What is JSX?

How JSX Transforms into JavaScript

What is createElement?

Pragmas and babel-transform-react-jsx

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

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.

Course

WTF is JSX

How JSX Transforms into JavaScript

Share this video with your friends