Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
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.
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.
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