Transcript
  • React

Creating Components

From the class:  Getting Started With React

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.

I'm going to write ES6 JavaScript here, so you might see some syntax that you're not familiar with. Feel free to ask any questions you'd like if something isn't clear to you. But it's also important to note that you can do this work in regular JavaScript, and it should work fine. If you're following along the regular React tutorial on their website, they're actually going to use regular JavaScript. So we'll use ES6.

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.

One of the cool things about JSX files is that we can use regular HTML tags right inside of our functions. So I can return a div tag, for example. The reason for this is because these tags get compiled by the JSX compiler into their equivalent JavaScript.

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.

One of the things we can do with these JSX tags that look like HTML is add properties to them. Let's say I want to add a CSS class to this div. I can say Class, and then, because Class is a special key word in JavaScript, we have to say Class Name, and then give this a class name of comment dash box. And to make this a little bit more descriptive, let's call this an actual comment box.

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.

As we fill out our components and add more and more code here, you're going to see this back-and-forth between writing regular JavaScript and writing HTML-like tags like we did here. But it's important to remember that these tags are being compiled into actual JavaScript function calls. And you can see an example of that by looking at the documentation for React itself.

So over here you see this div tag here gets converted into react.createelement, along with some parameters that it passes. So this file, ultimately, just becomes regular JavaScript.

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.

In the past couple minutes, you saw how to create a new React component by extending React component and providing a Render function. And we looked at how we can use regular HTML-like syntax using the JSX compiler to compile it into JavaScript automatically. You saw how to render a component to the page using the global React Render function, providing the name of the component and where we want to render it to. Finally, we saw how we can compose multiple components into one using JSX syntax.