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.

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

https://app.egghead.io/api/v1/lessons/react-what-is-jsx/subtitles

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?

Chris Briscardi: [0:00] JSX is used by a number of projects that represent tree structures in JavaScript. The JSX specification makes it clear that this is not a proposal to be included in X script itself, but rather is meant to be used by transpilers and compilers to compile into working JavaScript.

[0:15] One of the most common tree structures on the web is HTML, but JSX is often used to represent structures that end up rendering HTML. As shown in the spec, you can also use JSX for high order obstructions.

[0:28] As JSX is not tied to any particular framework, you can use it in any project you want. This is what allows projects like React and MDX to take advantage of JSX. React uses JSX to represent components, while MDX uses JSX as a target so that it can support not only React, but also Vue and other frameworks.

[0:48] While JSX is predominant approach, there are alternate paths being taken by frameworks such as FEL. Even frameworks such as Vue that support JSX can end up recommending a less powerful approach for most use cases in their documentation.

https://app.egghead.io/api/v1/lessons/react-what-is-jsx/transcript

https://app.egghead.io/api/v1/lessons/react-how-jsx-transforms-into-javascript/subtitles

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

Chris Biscardi: [0:00] One of the defining features with JSX is how it compiles into JavaScript. To show how it compiles into JavaScript, we'll have to choose the compile target. In this case, we'll work with React.

[0:11] If we go on to the babel rappel, we can take our source code on the left and see what it compiles to on the right. This a little hard to read, but we'll take it into Prettier as well. After formatting the code with Prettier, we'll take the result and put it back into our editor to look at the original source and the output side-by-side.

[0:31] On the left, we can see JSX <li> elements, JSX <h1> elements, and JSX <ul> elements. On the right, we can see there are <li> elements compiled to a React.createElement function call. This createElement call takes the type of the element and object to props in any children.

[0:51] Because the createElement call can take many children, a <ul> element takes all the <li> calls as children, and we can nest this all the way up to our <div>.

[0:59] When we start looking at props like the one on our <div>, we can see that they get passed in as an object. Finally, the reason we need to import React at the top of our source file is that the compiled output references React as part of the createElement transformation.

https://app.egghead.io/api/v1/lessons/react-how-jsx-transforms-into-javascript/transcript

https://app.egghead.io/api/v1/lessons/react-what-is-createelement/subtitles

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?

Chris Biscardi: [0:00] Here we have a brand-new project that depends on React and ReactDOM. In index.js, we have a complete React app with a problem. When we run the application, we see a SyntaxError on the first JSX bracket.

[0:12] We can solve this problem by manually compiling with JSX the React that createElement calls. Note that we also have to handle the app declaration in renderToString.

[0:22] Now, when we run the application, it outputs the string HTML. CreateElement is a top-level API in the React ecosystem. CreateElement takes the type as the first document, the components props in the second, and any children of the component as the remaining elements.

[0:36] The type can be an HTML host element as a string like div or span, a React component like a class or a function, or a React fragment.

[0:43] Back in our app, the className prop is passed into the <div> component, while the <h1> and <p> elements take null props. Note that we can keep that in children to any of the createElement calls. There are some HTML comments in the output, but we won't talk about those today.

[0:58] Here, we've moved the <p> element out to its own React component and we can use that component in our createElement call. The new component takes no props and no children. After running the application again, we get the same output.

[1:12] React happens to provide us with createElement function as do other libraries like Preact. If we want to use a custom pragma, we're going to have to implement our own version of createElement using the same type statement.

https://app.egghead.io/api/v1/lessons/react-what-is-createelement/transcript

https://app.egghead.io/api/v1/lessons/react-pragmas-and-babel-transform-react-jsx/subtitles

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=)

Pragmas and babel-transform-react-jsx

Chris Biscardi: [0:00] If we look at our code in the Babel rappel, we can see that our JSX elements get transformed to React.createElement. If we add a comment at the top of the file, we can change the function that's being used.

[0:12] Note how we're no longer using React.createElement and instead, we're using a custom JSX function. We can change the name of this function to be anything.

[0:23] Importantly, we have an imported a function named anything, but the resulting code won't run unless we do that. We also don't need to import React anymore, because we're not using CreateElement.

[0:34] The comment we just used was called the pragma. A pragma gives the compiler in this case, Babel, additional instructions or hints or how to compile the code. The plugin that looks for this specific pragma it's called babel-plugin-transform-react.jsx.

[0:47] If we look at the examples, we can see the pragma being used to support frameworks like React. In this case, we're using Preact.h from the Preact package, and the resulting code uses Preact.h instead of React.createElement.

[1:01] When people refer to a pragma in the context of React, they typically mean either the comment itself or the resulting function, which can be any function we define ourselves.

https://app.egghead.io/api/v1/lessons/react-pragmas-and-babel-transform-react-jsx/transcript

WTF is JSX

Resources in this collection: