FREELessons: 11Length: 1.7 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.1 React's Built-In Factory Methods

This isn't a very practical example, but we have to honor tradition by coding our first component as a hello world.

2.1 React's Built-In Factory Methods

Since this is the beginning of this course, we're going to start at the very beginning. And I know that that sounds obvious, but usually I like to go over the things and the tools that you need to follow along. Now we don't necessarily need to do that in this lesson, because as we start with this very simple example, we're going to build. We're going to be adding new ideas and concepts and eventually we're going to go over the things that you will need for everyday React development, be it if you're writing an entire application with React or if you're just using React for rendering certain components within your application. So we're going to start simple by just bringing in two assets, via a CDM. The first is called react.js, this is the React library. And then we have reactdom.js, which is kind of the glue between React and the browser. So the reason why we have two things here is because React is just a library for building UIs. You can use React in any JavaScript environment, and then you would use a second library for rendering those components. So in our case, we're going to be working within the browser. All of our UI components are going to be rendered with HTML through the DOM, so we are using react-dom. There's other libraries, if you are inside of another environment. But in our case react-dom is going to suffice. Okay, so the first thing we need is a place where we want to render our application. So we're going to start by creating a div element. Let's give it an id, and it doesn't matter what id you use. I'm going to use app here, and you can call it whatever you want. But if you also wanted to render different pieces within a webpage, you can do that with several different insertion points, if you will. So if we had a sidebar, we could have a sidebar. And then if we had something else like a menu that would be completely separate, and we didn't want to render just a complete app, then we can render the different components. We could say, okay, our sidebar is going to render here, and our menu is going to render here. But a lot of times whenever you are using React, you're going to be building an entire application. So we're going to take this route and just have a single element that we are going to render our components into. And then we just need our JavaScript. So that's going to be a normal script element. So we want to render some components, and we do that with ReactDOM. So we say ReactDOM, and then this has a method called simply render. The ReactDOM library is used for rendering components, so most of the time this is the method that you're going to be using. And we need to tell ReactDOM two things, the component that we want to render, and then where we want to render that component. Now ideally, we would create our own components. And we will be doing that in the next lesson. But for right now, we're going to use the React library's built-in DOM components. So we're going to say React.DOM, and then we're going to create an h1 component. Now this is going to render into an h1 element within the DOM. However, as far as React is concerned, this is a component because everything in React is a component. So get used to using that terminology. We are creating an h1 component here that is going to have some content. Now whenever you use one of these built-in components, you need to tell it two things. The first are the properties or the attributes that would be applied to this component. So right now we're going to start with null. And then we're going to specify the second argument, which is going to be the component, and let's just say, Hello, World! That is rather appropriate in our case. So this is the component that we want to render. Now we just need to tell React or rather ReactDOM where we want to render this component. And that is going to be our div element with an id of app. So we're going to retrieve that element object and that is going to be our application. So we can run this now. Let's just open up the file, just double-click it. And then in the browser, you're going to see an h1 element that says, Hello, World! Now we can inspect this, and we're going to see that it is fairly simply HTML. We have an h1 element, and then we have this attribute that says data-reactroot. But other than that there's nothing else being added to our output. Now, this is, of course, a very simple example. And more complex components could have more complex output, but that's what we are giving. Now let's also talk about what this reactroot means. Well, whenever you call the render method, you pass in a component that you want to render. But here's the thing, you can only pass in a single component here. We cannot pass in a number of components. So we can't come in here and say ReactsDOM.h2 and then pass in the content. We just can't do that because that's not what the render method does. We can, however, pass in a component that contains any number of components, so we use the term a top level component. What that means is we have a component that is essentially at the top. And if you think of a component as an HTML element, like the head element, within the context of our document., the head element is not a top level element. It is a child of the HTML element which is our top level element. So if you're familiar with XML, you know that an XML document can have just a single top level element. Well, that is true with React. You can have any number of React components, but they all have to be contained within a top level React component. So let's look at how we could create something like that. We're going to use our h1 element. But let's say that we also want to add some actual content like a paragraph element. But we need to contain these things within some type of containing component or a top level component. So let's do this, we're going to say let container and that is going to be equal to React.DOM, and we're going to create a div element. We're not going to pass in anything for the properties or attributes, but instead we are going to pass in our h1 element, and we're going to pass in a p element that contains some content. So this content is in a paragraph. And so by creating this div container component, we can now use this as what we pass to the render method. So we are no longer just rendering an h1 element, we're going to render a div element that contains an h1 and the p element. So whenever we refresh the page, that is exactly what we see. We have our div element with an id of app, our reactroot is now this div element. It is no longer the h1 element, because as far as this component is concerned, our div element is the root of that component. Then we have h1 and then p. So when it comes to using React within your applications, you need two files. The first is the React library, the second is a library for rendering your components. In our case, that is ReactDOM. You need an element that is going to be used to contain your rendered component. In our case it was a div element with an id of app. And then you have your code for creating your components and then rendering them. So you render a component using ReactDOM.render. You pass in the component that you want to render, and then the element where you want to render that component. And you can only render one component at a time, or rather you can only render a top level component at a time. Now that element can contain any number of components, so you will need to build your component and then render it. Well, in the next lesson we're going to talking about properties and attributes. Applying them to a component is very simple, but there are some rules that you will need to know.

Back to the top