3.1 Build a Pure Component

In the previous lessons, we've set up the first version of our Redux store, which is going to be managing our state as we move forward in building this application. So the next step is to actually begin building React components, which will display that state to our users. Now, many of the tutorials on React that you may have seen use React.createClass or the Essex class syntax with React components to actually create our reacts components. However, React components can also be functional components or pure components. These are pure functions that just take a set of properties and they return some JSX that defines our component. Now, I'm going to assume that you're kind of familiar with how JSX works. Really, it's similar enough to HTML that if you haven't seen it before this, working through it in these lessons should be enough to get you familiar with it. Now remember, we're writing JSX here, but remember that we have Babelify running within our Watchify command, and so Babel will be converting our JSX syntax into the react function calls. So let's go ahead and write our very first component. Right now in our project file, we have, at the top here, we have our cards reducer, than we create our store, for now, I'm gonna get rid of this stuff at the bottom, where we subscribe to this store and dispatch some events. We'll come back to that a little bit later. For now, let's create our first component. And so, let's create a constant here and this component will be called App. As I mentioned, often you'll create reactor components, and we will be doing this later on, by doing React.createClass, but what React also allows us to do is to just create a basic function like this, doesn't have to be anything special, just a regular function, and as a parameter, it will take the properties that are assigned to our App component. And then, what we can return from this function is some kind of JSX. So for example, we could return a div, just like this. Now this App component is going to be a basic wrapper for our application. Let's give it a className of app, and for now, let's make this really basic. In here, we'll just put h1, and we'll say, Hello React, just so we can actually see this in action. So, let's do that, and now we have to actually render it. So, we'll say ReactDOM, which is the ReactDOM library that we're pulling in, and we'll say ReactDOM.render, and we want to render App. So, we'll actually create an instance of our app component like this, and then we'll tell ReactDOM where to render this, so we'll render it inside that element. What did we call that? Let's open up our index.html file. We have a div with an ID of root. Okay, so I can just do, document.getElementByID('root'). Excellent. So now, if we head back to the browser, you can see that live-server has already refreshed the page and we have our element showing up on the page. If we open up the console here and look inside of our root div, you can see that we have a div with a class of app, and we have an h1 element inside of it. So this is our JSX syntax being rendered. In fact, if we look at the bundle.js file here, notice that if we scroll down here, you can see that where we're creating our app here, we actually have this converted to a React.createElement call, creating a div, giving a className of app, and then inside of that, we have another createElement call, where h1 is the element, and then ultimately, we have React.createElement for our app component. So you can see that this is one of the things Babelify is doing for us, it's converting our JSX into actual React function calls. Now because our app component here is just meant to be a wrapper for a bunch of our other components, what we actually want to do is allow this component to have children of its own. So, here what we're rendering, instead of making this a self-closing tag, we could render this and say, Hello React, inside of our app component. However, for this to render properly, we need to have our app component render its children. Now, children is just received as one of the attributes of the props object. So let me just replace the content of this div, and we will say props.children. So this, here, will just be replaced by whatever we put inside the component we're creating, and if we come back to our page, you can see that this is no longer an h1 because we've just given it that raw text. In fact, what I could do is, and let me just wrap the word React in a strong tag, and now if we go back to our page, you can see that React is bold. All right, so this is our very first component. Now, you may be thinking that we're moving a little bit too slowly here. But trust me, our application is going to get pretty complicated. So I want to make sure that we're all on the same page every step along the way. We're gonna be creating a lot more components soon, and of course, many of them will be using our state. In the next lesson, we're going to create a normal React component, instead of a pure component, as we have here.