Let's create our first React component together and talk through some of the technologies.
I've opened up the app in Vim, and then I'll open up the app.jsx file which we'll be working with for the rest of the video. On the right, I'll keep the browser open so that we can see our changes as we make them.
And so in order to create a component, I'm going to use the class keyword. And we'll create a class called Comment Box that inherits or extends from react.component. And then, we'll use the brackets to create the body for the class.
Now, React component only needs to have one function defined, called Render. This is the minimum amount that you have to do to create a React class. And inside the Render function. We're going to return some HTML that describes what the component looks like.
So now I have a Comment Box component that returns some HTML that should be able to be rendered to the page. In order to render this to the page, I can call the global react Render method. And the first parameter to that will be the component that we want to render. And I can use JSX syntax here as well. So I can say open tag comment box close tag. And notice how I'm treating this custom component just like a regular HTML tag here.
And then, the second parameter is going to be the element that we want to attach this to. So I can use the Get Element By ID DOM method. And we'll look for the element that has an ID of Content. And that's right over here in the browser. You can see this div tag here that has the ID of content.
OK. When I save that and refresh this page, you should now see the new component rendered to the page. Notice the markup here in the Elements area. We have a div called with an ID of Content which we just rendered this component to. And then, React created these new DOM elements that get put on the page.
If I flip over to the React debugging console, you can see it's also now rendering, or showing us the components that are on the page, starting with this top-level area. And then, we have a comment box which renders out a div.
The React debug tab also allows us to look at properties and state associated with a particular component that we have selected. And we'll take a look at how these work as we continue with the class.
And if we refresh the page, that should all be reflected. And if we look at the class name inside of the rendered comment box, you see that this class has been applied to the div tag.
Now, we're able to do a multi-line return statement here because we're using this open parentheses and close parentheses.
Now, one of the cool things you can do in React components is you can render other React components. Sometimes this is called composing components, because we're composing different components together.
So inside of this comment box, I'm going to actually render out an H1 tag to say that this is the comments. And then underneath that, we'll render out another component that we'll create in a minute called Comment List. And then underneath that, another component we'll Comment Form, where we'll create new comments.
Now up here, we'll go ahead and create those components by, again, creating new classes. So the first one will be called Comment List. And it'll extend React component just like before. And then, we'll create the comment form the same way. And both of these functions need to have a Render function, just like the comment box. We'll make it multi-line, and give them class names. And then, I'll just print out the name of the component so that we know that the right thing is getting rendered.
So then, go ahead and copy this Render function to save some typing. And we'll change the class name here to Comment Form.
And now, we've defined our two extra components, and referenced them down here in the comment box Render function. So once I save that, if I refresh the page on the right, we should see all of our components rendered to the page. First, our comments H1 tag, then the comments list, and then the comment form. And they're styled because of the CSS that was created previously.
Now, if I click on the React Debug tab, you should be able to see the hierarchy of components here, starting with the comment box, and then looking at our comments list, and then the comments form.