JSX in detail

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:&#x2F;&#x2F;github.com&#x2F;wisercoder&#x2F;uibuilder" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;wisercoder&#x2F;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&#x27;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&#x27;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:&#x2F;&#x2F;github.com&#x2F;viebel&#x2F;klipse" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;viebel&#x2F;klipse</a> 2: <a href="https:&#x2F;&#x2F;github.com&#x2F;facebook&#x2F;react&#x2F;issues&#x2F;10646" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;facebook&#x2F;react&#x2F;issues&#x2F;10646</a>

Another good resource to learn about JSX (by the author of Preact): <a href="https:&#x2F;&#x2F;jasonformat.com&#x2F;wtf-is-jsx&#x2F;" rel="nofollow">https:&#x2F;&#x2F;jasonformat.com&#x2F;wtf-is-jsx&#x2F;</a>

Gave a talk at React Rally that goes over this briefly. <a href="https:&#x2F;&#x2F;github.com&#x2F;hzoo&#x2F;so-how-does-babel-even-work" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;hzoo&#x2F;so-how-does-babel-even-work</a>, and a basic version of the actual Babel transform: <a href="http:&#x2F;&#x2F;astexplorer.net&#x2F;#&#x2F;gist&#x2F;ccb201a61db3d581c8be3161bf78065d&#x2F;b4651fda44c10da9d252896809caa6439afb2a16" rel="nofollow">http:&#x2F;&#x2F;astexplorer.net&#x2F;#&#x2F;gist&#x2F;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&#x27;s fairly easy to learn:<p><a href="https:&#x2F;&#x2F;github.com&#x2F;mlmorg&#x2F;react-hyperscript&#x2F;blob&#x2F;master&#x2F;index.js" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;mlmorg&#x2F;react-hyperscript&#x2F;blob&#x2F;master&#x2F;inde...</a>

Thanks for posting this, it&#x27;s a good read so far.<p>I have been using JSX quite a bit and this is helping me get a better understanding.

It&#x27;s funny how, for years, we&#x27;ve been trying to get away from HTML mixed with code (specially in spaguetti PHP), just to get back to something similar again.

<a href="https:&#x2F;&#x2F;github.com&#x2F;lantiga&#x2F;react.hiccup" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;lantiga&#x2F;react.hiccup</a>