JSX is used heavily in the React ecosystem to represent tree structures such as HTML. Explore how JSX works, how it compiles to JavaScript, and why it isn't tied to React.

JSX is a language extension to JavaScript for representing tree structures used heavily in the React ecosystem... but it's not only used with React!

What is JSX?

A walkthrough using the babel repl to explore how JSX transforms into JS.

[Click here to open the repl.](https://babeljs.io/en/repl#?browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=JYWwDg9gTgLgBAJQKYEMDG8BmUIjgcilQ3wChRJY4BvIgOwBMkoBfObXAo9GAWgdxlS9JlAAUAHgbAAbnDQAbFAGdlAORQgkAXgBEygBYQwYYHQDmvBcGUxdAPlJxncCQYCM9gMpGTZ83AAMjYwEgD0Ho4urgCuClHRrtb24clOiRLJqcAJ0Zk52bmuYXGO4dIy9gA0cAJoMVp0MAB0AEYQDACeAJRAA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=react&prettier=true&targets=&version=7.8.4&externalPlugins=)

How JSX Transforms into JavaScript

React's createElement is at the core of most React applications, and due to it being used indirectly through JSX you may not even know it!

Further, createElement is a normal function and we can implement our *own* version of createElement to use in our React applications.

What is createElement?

Let's change the function React uses to compile JSX to using pragmas. Pragmas are used in MDX, Emotion, theme-ui, blocks-ui, and other projects to do everything from style insertion and caching to full blown visual editing of React apps.

[Open the Babel repl](https://babeljs.io/en/repl#?browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=PQKhAIAECsGcA9wEMB2BPALgCwJYoObgjABQOAtgA4D2AThuAEoCmSAxgwGa3XngDktVh35kqdBgG8hKACbNaAX3DdeAoewwBaWb1EkZ82gAoAPLJwA3cGwA2SWLAByScswC8AIlhZqlSnj4WrY4sBieAHwk4DHgplgAjBEAyr7-geAAMqEYpsCJUbFxAK62hUVxIRF5VdEVplU1OOVFDc1NLXHApVF5FpYRADTgumzFbigYAHQARtSyaACUQA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=react&prettier=true&targets=&version=7.8.4&externalPlugins=)

WTF is JSX

Instructor

Course Content