Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Understanding JSX

4:08 with Guil Hernandez

JSX is an extension to the JavaScript language that uses a markup-like syntax to create React elements. Most React developers write their UI using JSX because it resembles writing HTML.

Teacher's Notes
Questions?
Video Transcript
Downloads
Workspaces

babel-standalone

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

Resources

The CDN-based approach is not useful in a production environment as soon as you start using JSX. The Babel script is ~800KB in size, which for most use cases, is too large of a download to be practical. In addition, there's the overhead in the browser of transpiling JSX into JavaScript.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

We could describe our application's UI by using the React.createElement 0:00

method over and over again, it really is possible to do. 0:05

However, it's not convenient. 0:09

It's a lot of extra typing, and all of those React.createElement calls make 0:11

things pretty confusing, especially when working with larger apps. 0:15

This is where JSX comes in. 0:19

JSX is an extension to the to the JavaScript language 0:20

that uses mark-up-like syntax to create React elements. 0:25

Most React developers write their UI was JSX, 0:28

because as you'll see, it resembles writing HTML. 0:31

Now that you've gained an understanding of the React.element API, 0:34

I'll teach you how JSX is a simple abstraction on top of it. 0:39

So let's start by converting our createElement calls for 0:42

title and desk to JSX. 0:46

First, I'll replace the titles React.createElement function 0:49

with opening and closing h1 tags, and 0:54

the text My First React Element. 0:59

Then, replace React.createElement in the description with a set of p tags and 1:03

the text, I just learned how to create a React node and render it into the DOM. 1:11

Now, this isn't really HTML that we're writing,or actual JavaScript syntax. 1:18

This is JSX, a syntax extension to JavaScript, and 1:24

you're going to use it a lot while working with React. 1:29

So let's save up that desc and 1:32

head over to the console, refresh and notice how we get a syntax error. 1:35

JSX is not valid JavaScript, so the browser cannot interpret it. 1:41

To create React elements with JSX, 1:46

it needs to be transfiled into react.createElement calls. 1:49

We can use the Babel compiler to do this. 1:53

Normally during development, you'd have a build system set up with Babel in 1:55

a tool-like web pack to automatically process your JavaScript files. 1:59

For instance, the tool create app provides a built system out of the box to do this. 2:02

But it's also possible to use bubble directly in the browser via a script tag. 2:08

And index.HTML, I'll add a script tag that points to Babel stand alone and 2:12

you can copy the script tag from the teachers notes with this video. 2:17

This is going to allow us to use JSX without a built step. 2:23

Now, there's one more thing we need to do in order for babel to work in the browser. 2:27

In the script tag to our app.js file, add the type text/babel. 2:31

This signals to the babel script that the JavaScript and 2:40

app.js should be complied before being executed. 2:44

I'll give this file a save and over in the console once I refresh, 2:49

the error goes away. 2:53

And the same elements are displayed on the page. 2:55

You have a header, with the child h1 and p elements. 2:57

Keep in mind that in production you would not use this text/babel type attribute. 3:01

Most likely your code would already be recompiled using babel and 3:08

a build tool like webpack before serving it to the browser. 3:12

Now JSX still produces objects that describe a DOM node. 3:15

For example, if I console/log(title), notice how 3:21

it's still the same object describing the h1 element like we saw earlier. 3:26

To demonstrate, I'll bring up the online Babel compiler or repl so 3:33

you can see how JSX gets to convert it to JavaScript. 3:37

I'll simply copy the title and desc variables from app.js and 3:40

paste them into this left panel. 3:46

Over in the right panel, we see that babel converts the JSX 3:49

into React.create element calls just like we wrote earlier. 3:52

So this should look a familiar to you. 3:57

During this course feel free at any time to copy and paste parts of your React code 3:59

into this online compiler to check out and learn what's happening under the hood. 4:03

You need to sign up for Treehouse in order to download course files.

Sign up

You need to sign up for Treehouse in order to set up Workspace

Sign up