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>), it can also represent a user-defined component.
JSS let´s you define your own tags.
0:00
A JSX tag cannot only represent
an HTML element, like an h1, span,
0:02
and header, it can also represent
a user defined component.
0:08
In other words,
by creating a component called header,
0:13
we can use a header tag wherever
we want to display the header.
0:16
Let me show you by rendering the header
component to the page with a JSX tag.
0:20
In ReactDOM.render,
0:25
I'll replace the header variable
with a self-closing header tag.
0:27
And the tag name needs to exactly
match the name of the function.
0:33
I'll give app.js a save.
0:38
And over in the browser, we see the full
header component rendered to the screen,
0:40
and you can see its elements
in the element inspector.
0:46
There is a few important details
you should know about JSX
0:52
tags that refer to react component.
0:56
First, is that the capital letter
in the tag name is necessary to
0:58
differentiate custom components
from native DOM elements.
1:03
In JSX, lowercase tag names like h1,
span, and
1:07
header, are considered to be HTML tags.
1:11
So when you see a capitalized JSX tag,
1:15
it means that the tag is
referring to a React component.
1:18
Second, is that you can use
the self closing form of the tag,
1:22
if the component has no children.
1:26
For example, it's acceptable to refer to
the header component using opening and
1:29
closing header tags, like this.
1:34
The reason you'd write them this way is
to provide more JSX tags as the children.
1:36
This is going to be useful for
1:41
displaying nested component
which you'll learn about soon.
1:43
Now, our header is a self
contained header element, so
1:46
we'll refer to it using
a self closing tag.
1:50
And although not required it's
recommended that you include a single
1:53
space in your self closing JSX tag.
1:58
Finally, a component's JSX
tag is also a function called
2:00
toReact.createElement under the hood.
2:04
Let's quickly go back to Babel's online
compiler to see what's really happening
2:07
when we write out our
component using a JSX tag.
2:12
So as you can see here,
in the compiled JavaScript,
2:15
ReactDOM.render is being passed
the React.createElement method,
2:19
which is supplied the Header
function as the element type.
2:24
And that function returns a Header React
element along with its children.
2:28
So in React, your entire UI is
a composition of functions.
2:33
You need to sign up for Treehouse in order to download course files.
Sign up