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
Since JSX is a syntax extension to the JavaScript language, it accepts any valid JavaScript expressions written inside curly braces. This allows you to make your JSX more dynamic.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Let's dive deeper into JSX and
0:00
explore three important rules
to follow when working with it.
0:02
The first rule we'll cover is JSX
must return a single root element.
0:06
Let me show you what they mean by this.
0:12
Applications usually consist
of more than just a heading.
0:14
So let's add a p tag
under our heading tag.
0:18
To write our JSX across multiple lines,
I'll wrap our h1 tag in parentheses.
0:23
Inside the p tag,
I'll write I just learned how to
0:34
create a React node and
render it into the DOM.
0:39
We can see we're getting an error, JSX
expressions must have one parent element.
0:43
To fix this error, we can wrap our
JSX tags in a div tag, like so.
0:51
Now, when we take a look at the browser,
we can see the p tag we added.
1:02
In the DevTools, we can see the div
tags wrapped around the h1 and p tags.
1:07
If we don't want to add a div tag
just to return both the h1 and
1:15
p tags,
instead we could use React's Fragment tag.
1:20
Fragment lets you group elements
without a wrapper node.
1:25
To use React's Fragment,
we'll just wrap our h1 and
1:29
p tag in an empty tag like so.
1:34
In the browser,
the page looks exactly the same, but
1:37
when we take a look at the DevTools,
we no longer see the h1 and
1:42
p tags wrapped in the extra div tag.
1:47
So why do multiple JSX
tags need to be wrapped?
1:50
React's Docs answers this question, and
you can read their answer on the screen.
1:55
But it basically says, when you
write multiple JSX tags, like h1 and
2:00
p tags, React needs to transform each
of these tags into a JavaScript object.
2:06
However, since you can't return
multiple objects directly,
2:12
you have to wrap those JSX
tags inside something else,
2:16
like a parent tag or React's Fragment.
2:20
This way, we're only returning one
JavaScript object instead of two.
2:23
The second rule is to close all tags.
2:29
In JSX, all tags must be closed,
even if they don't have any children.
2:33
Unlike in HTML,
where some tags can be self-closing,
2:40
in JSX, you need to include
the closing tag for every element.
2:45
For example,
if we create an image tag in HTML,
2:51
we would just write img src= image.jpg.
2:57
But we get an error, JSX element img
has no corresponding closing tag.
3:02
instead in JSX,
we should write image tags like this.
3:09
Notice the closing slash
at the end of the tag.
3:13
The third rule is to
camelCase most of the things.
3:18
In HTML, if you wanted to add
a class attribute to the p tag,
3:23
you would just add class
inside the p tag like so.
3:28
But JSX turns into JavaScript,
3:33
so you can't use reserved
words like class or for.
3:35
You also can't use names
that contain dashes.
3:40
Since class is a reserved word, in React,
you would write className instead.
3:44
You can find all of these
attributes in the list of
3:51
DOM component props in
the React documentation.
3:55
But if you get one wrong, don't worry,
4:00
React will print a message with
a possible correction to the console.
4:03
The error message we see is
Warning: Invalid DOM property class.
4:07
Did you mean className?
4:12
In the Elements tab, we can see it's
still added the class attribute.
4:14
But let's go back to our code and
change class to className.
4:19
Now that we covered the three rules,
let's move on to embedding
4:25
JavaScript expressions in
JSX using curly braces.
4:30
Since JSX is an extension
to the JavaScript language,
4:34
it accepts any valid JavaScript
expressions written inside curly braces.
4:39
This allows you to make
your JSX more dynamic.
4:45
For example, I'll add two string
4:49
variables that will contain
the values of the h1 and p tags.
4:52
Then we can use the title and
description variables inside the h1 and
5:05
p tags by wrapping them in curly braces.
5:11
If we check our app in the browser, you
can see that everything is still the same.
5:14
When you use curly braces in JSX,
it's called a JSX expression.
5:20
A JSX expression is always
surrounded by curly braces and
5:26
can be placed between JSX tags like this,
or
5:32
as the value of an attribute in a JSX tag.
5:36
For example, I'll create a new variable
5:40
named myTitleId and set it to a string.
5:44
And now I can use the value assigned to
myTitleId as the h1's id value like so.
5:49
If we inspect the h1 tag, we see that
the id attribute is set to main-title.
6:00
Good, so now let's make our
static text just a little
6:07
bit more dynamic with a JSX expression.
6:11
Let's create the variable name and
assign our name as a string.
6:15
Inside the h1 tag, I'll replace the title
variable with the name variable,
6:21
then add an 's after it and
the text First React Element.
6:29
I'll go ahead and
6:35
delete the title variable up top
since we're no longer using it.
6:37
Let's save our file, and
over in the browser,
6:42
we see the text
Laura's First React Element as the title.
6:45
Just remember that when you're
including the curly braces,
6:50
you're exiting JSX and
entering JavaScript territory.
6:54
The curly braces lets JSX know
that you're writing JavaScript.
6:58
For example, you can do math operations.
7:03
I'll create an input element and
7:07
set the value to a JSX expression
that multiplies 10 by 20.
7:10
And over in the browser,
we see 200 as the input field's value.
7:16
There are lots of other things
you can do with JSX expressions,
7:22
which we'll learn later in this course.
7:26
But feel free to try writing
a few expressions on your own
7:29
after this video to explore
the capabilities of JSX.
7:34
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up