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 lets you define your own tags. A JSX tag can not only represent an HTML element (like <h1>
, <span>
, and <header>
), but it can also represent a user-defined component.
Resources
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
JSX provides the flexibility
to define custom tags.
0:00
A JSX tag can not only represent
an HTML element, such as h1 span or
0:05
header, but it can also represent
a user defined component.
0:11
This means that by creating
a component called Header,
0:18
we can use a header tag whenever we
want to display the header component.
0:21
Let me demonstrate this by
rendering the Header component
0:27
to the page using a JSX tag.
0:32
In the root.rendermethod,
0:34
I'll replace the element variable
with a self-closing Header tag.
0:36
It's important to ensure that
the tag name exactly matches
0:42
the name of the corresponding function.
0:45
Now let's save our changes and
switch to the browser.
0:50
We see the full header component
rendered to the screen, and
0:54
you can see its elements
in the element inspector.
0:59
There are a few important details
you should know about JSX tags
1:02
that refer to react components.
1:07
Firstly, it's important to note that
the capitalization of the tag name is
1:10
essential for distinguishing custom
components from native DOM elements.
1:15
In JSX,
lowercase tag names such as header h1,
1:21
or span are interpreted as HTML tags.
1:26
When you see a capitalized JSX tag,
1:30
it means that the tag is
referring to a react component.
1:33
Secondly, if the component
has no children,
1:37
you can utilize the self-closing
form of the tag.
1:41
For instance, it's acceptable to represent
the Header component using opening and
1:45
closing Header tags like this.
1:51
The reason you'd write them this way is
to provide more JSX tags as the children.
1:53
This is gonna be useful for
2:00
displaying nested components
which you'll soon learn about.
2:01
However, since our header component
is a self contained header element,
2:05
we can refer to it using
a self closing tag.
2:11
While not mandatory,
2:15
it's recommended to include a single
space in your self closing JSX tag.
2:16
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