Note that JSX is not limited to React. You can use JSX (or TSX in the case of Typescript) as a better replacement for Moustache or Handlebars. See here: <a href="https://github.com/wisercoder/uibuilder" rel="nofollow">https://github.com/wisercoder/uibuilder</a>
Has anyone else made the switch from JSX to hyperscript? JSX works well enough, but I love the consistency and composability of building views with plain old functions and data structures.
Experimenting with JSX has introduced me to two language constructs: the Pragma, and the Macro. I know that these might seem a bit pedestrian to most folks, but they opened up my understanding of programming languages considerably. I am genuinely a bit surprised that the Javascript community hasn't played around more with the possibilities that both can offer.
Here is the author of the Klipse plugin[1] that powers the interactive code snippets.<p>I've opened a github issue[2] to suggest to integrate the Klipse plugin on react.js official documentation.
If you like the code interactivity, feel free to express yourself on the github issue[2].<p>1: <a href="https://github.com/viebel/klipse" rel="nofollow">https://github.com/viebel/klipse</a>
2: <a href="https://github.com/facebook/react/issues/10646" rel="nofollow">https://github.com/facebook/react/issues/10646</a>
Another good resource to learn about JSX (by the author of Preact): <a href="https://jasonformat.com/wtf-is-jsx/" rel="nofollow">https://jasonformat.com/wtf-is-jsx/</a>
Gave a talk at React Rally that goes over this briefly. <a href="https://github.com/hzoo/so-how-does-babel-even-work" rel="nofollow">https://github.com/hzoo/so-how-does-babel-even-work</a>, and a basic version of the actual Babel transform: <a href="http://astexplorer.net/#/gist/ccb201a61db3d581c8be3161bf78065d/b4651fda44c10da9d252896809caa6439afb2a16" rel="nofollow">http://astexplorer.net/#/gist/ccb201a61db3d581c8be3161bf7806...</a>
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:<p><a href="https://github.com/mlmorg/react-hyperscript/blob/master/index.js" rel="nofollow">https://github.com/mlmorg/react-hyperscript/blob/master/inde...</a>
It's funny how, for years, we've been trying to get away from HTML mixed with code (specially in spaguetti PHP), just to get back to something similar again.