React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

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

Chris Biscardi

Learner Reviews

Course Content