Use a Component with JSX

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