JSS let´s you define your own tags.

A JSX tag cannot only represent an HTML element, like an h1, span,

and header, it can also represent a user defined component.

In other words, by creating a component called header,

we can use a header tag wherever we want to display the header.

Let me show you by rendering the header component to the page with a JSX tag.

In ReactDOM.render,

I'll replace the header variable with a self-closing header tag.

And the tag name needs to exactly match the name of the function.

I'll give app.js a save.

And over in the browser, we see the full header component rendered to the screen,

and you can see its elements in the element inspector.

There is a few important details you should know about JSX

tags that refer to react component.

First, is that the capital letter in the tag name is necessary to

differentiate custom components from native DOM elements.

In JSX, lowercase tag names like h1, span, and

header, are considered to be HTML tags.

So when you see a capitalized JSX tag,

it means that the tag is referring to a React component.

Second, is that you can use the self closing form of the tag,

if the component has no children.

For example, it's acceptable to refer to the header component using opening and

closing header tags, like this.

The reason you'd write them this way is to provide more JSX tags as the children.

This is going to be useful for

displaying nested component which you'll learn about soon.

Now, our header is a self contained header element, so

we'll refer to it using a self closing tag.

And although not required it's recommended that you include a single

space in your self closing JSX tag.

Finally, a component's JSX tag is also a function called

toReact.createElement under the hood.

Let's quickly go back to Babel's online compiler to see what's really happening

when we write out our component using a JSX tag.

So as you can see here, in the compiled JavaScript,

ReactDOM.render is being passed the React.createElement method,

which is supplied the Header function as the element type.

And that function returns a Header React element along with its children.

So in React, your entire UI is a composition of functions.