react-hyperscript

Maybe you could try with hyperscript syntax for react(which I've just found the existence of). https://github.com/hyperhype/hyperscript https://github.com/mlmorg/react-hyperscript which might be actually similar except for the dollar sign which adds some noise. But some of your prop/attr setting would be inner function/methods instead of being passed as an array. That would shorten some lines. > Show me what that code would look like if it was done better I'm definitely not going to try to provide an example if you do not offer the courtesy of a smaller representative example though. By the way, why is $(Label,...) not simply Label()? That could be a function.

> From a UI standpoint, it would be virtually just as hard for a JSX dev to implement a React app with purely `React.createElement()` as it would be to just write a native DOM application I don't think that's true at all. I find react-hyperscript[0] and friends terser, more regular and just as easy to work with as JSX. [0] https://github.com/mlmorg/react-hyperscript

Do you mean JSX? Here you go: import {createElement as h} from "react" const Counter = () => { const [count, setCount] = React.useState(0) return h("div", {}, h("p", {}, `You have clicked the button ${count} times`), h("button", {onClick: () => setCount(count => count + 1)}, "Increment") ) } There are additionally libs like hyperscript (https://github.com/mlmorg/react-hyperscript) that take the non-JSX approach further. Although honestly, I don't recommend it. JSX is really great even it seems a little unfamiliar.

It saddens me that JSX became so popular in the React community. I find the syntax verbose and hard to read ... similar to HTML. At my last company we used `react-hyperscript` which was a simple wrapper around `react.createElement`. Ultimately, the React developers made the mistake of making `createElement` so annoying to work with, I assume because they bought into JSX. Granted, JSX might have been necessary when React was first created in order to ease people into transitioning to HTML in JS, but I feel like we can move passed that now. I highly recommend `react-hyperscript`: https://github.com/mlmorg/react-hyperscript

Hyperscript markup looks like a nice replacement for JSX. The source for hyperscript-react is 50 lines of code, including comments and empty lines, so it's fairly easy to learn: https://github.com/mlmorg/react-hyperscript/blob/master/inde...

FWIW the hyperscript helper is generally h rather than m, and there's a hyperscript helper available for react with the expected semantics[0]: https://github.com/mlmorg/react-hyperscript [0] in the sense that it supports normal hyperscript semantics and replacing the selector with a React component

> Not that it's pleasant though. "Raw" react is perfectly OK, and react + hyperscript[0] is great. [0] https://github.com/mlmorg/react-hyperscript

FYI, that's nothing to do with Cycle, that's just hyperscript. Works great with React if you feel the urge: https://github.com/mlmorg/react-hyperscript The syntax is slightly different though: h('ul', [ h('li', 'Foo'), h('li', 'Bar'), ]) Otherwise the same advantages as the author listed when using Cycle, eg, props and children are both optional, etc.

React with JSX is pretty bad. A library like https://github.com/mlmorg/react-hyperscript solves the verbosity with not using JSX.

I agree on the JSX point, but there are a few libraries that make using plain JS less awkward: https://github.com/af/JSnoX https://github.com/mlmorg/react-hyperscript https://github.com/jussi-kalliokoski/react-no-jsx I do wish the React team made their plain JS API less of a "second class citizen" to JSX though.

I don't get JSX, especially now that 0.12 requires you to use createFactory (a big improvement over the old API) to encapsulate all the static JSX parts. With JSX, you're losing all the things that make having a proper programming language useful. Have you given react-hyperscript a chance? https://github.com/mlmorg/react-hyperscript Having first class functions for creating DOM makes it much easier to keep your DOM state creation dry. It's more tedious if you use it just like JSX, but if you recognize where you are repeating yourself over and over again, it's trivially easy to write functions that encapsulate all the repetitive structures in your HTML. Furthermore, you don't completely break all the tools out there like eslint and whatnot. The h-script blends really nicely with solutions like RCSS and JSS.

Use react-hyperscript [0] instead. I'm not sure if it's yet been updated to support createFactory, but even if it doesn't you could create a simple higher order function the partially applies the static unchanging DOM parts, returning a function that takes the same data type as the function returned by createFactory. IMHO, with createFactory, there is no longer a good justification for JSX. JSX basically solves a problem that JSX created. The reason people like JSX is that it takes the unchanging DOM structure (basically the virtual DOM equivalent of HTML templating) and puts it in HTML like templates do. This gives it a sufficiently different syntax, that it's easy to visually discern the changing parts from the unchanging parts, especially with syntax highlighting support. However, with createFactory, you have a way to wrap up all the u

You don't have to use JSX. You can use React.DOM directly or use react-hyperscript as a shorthand method for React.DOM Also pay attention to the new createFactory method which aims to make it easy to separate your changing HTML from the static HTML (which you would have previously used a templating library for) My recommendation is to not use JSX ever since it breaks a lot of your tooling. The first impression people get is that "Hey this makes my code easier to read", but that is only because JSX introduces the problem that it attempts to solve. Basically most HTML structures are 80% unchanging and 20% changing (the reason we use templates in the first place). React.DOM was a pain previously because you'd define a complicated HTML structure in Javascript, which isn't really any harder or more complex, but then you'd have all this code th