7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.2 App Component

In the previous lesson, we created our router, and we found that our root route needs a component called app. So, in the source/components directory, I'm going to create a file called app.js. Now, as you might expect, we'll start with an import statement. And we're going to import React. The next thing we want to do, is create our actual class. Now, since we're creating an ES6 module, we can use the export feature. And since, this is the only thing we want to export from this module. We'll say export default. And of course, this is going to be a class. So, we'll export default class App. And this is going to extend React.Component. Now, within a React class the first thing I usually do, is write the getInitialState function. However with the ESX, the convention is not to use the get initial state function but to instead use a class property called state. And we'll set this to an object, and this will set the initial state of our component. Now ,the class property feature whereby, we can set a property with the equals sign is not actually an ES6 feature. This is actually a experimental feature of the ES7. And this is why, in our package.jason file, we've included the optional flag for babelify es7.classproperties. And we'll be using this feature quite a bit throughout our React components. Not only for setting state, but also for setting most of our DOM event handler functions. This is because of kind of a weird way that React works behind the scenes, where we need to use arrow functions to preserve the value of this within those functions. So, if we want to set a method as an arrow function, we need to set it as a property, and so that's why we're using the class properties feature. Now the state for our application is just going to be our user object. And we're going to set the value to the all uppercase user global variable that we set in our index field. So once we get the user's current value, let's go ahead and write our render function. So we'll return a basic div here. And inside this div we'll have another div with a class name of row. And this is a class name that we can use from our skeleton CSS library. Inside this row we're going to have two columns. The first one, will be a div of of three columns wide and inside this div, we'll just start with a basic H1 where we'll put our application name. In our case that's just Wicker. Then underneath this we want to have a couple of sidebar items. This is where the user will be able to login, so for now, I'll just write login. Eventually, we'll replace this with a login component. And we're also going to include our page list as you might recall from our demo application. So, I'll just put page list for now, we'll write that component later as well. Now, the primary portion of our page is going to be the next div, and this is going to be nine columns. The main portion on the right, and in here we want to render our individual pages. This is where the nested route that we talked about in the previous lesson comes in. This app class that we're creating here is kind of like a master template, and then inside of it we're going to plug our individual pages when those pages are being viewed. Now we know that with react rotor when we create the roach we can make them as nested roached, So that means their associated components need to be your guest it is well. And we can use the component wrote handler. To let react read, or know that this is where we want you to plug in the nested route, and where do we get wrote handler from what we need to do an import here. And then, we'll use D. Structuring to get the road handler component from the reactor rather module. Excellent. Now our page component is going to need to know if the user's log in or not, so we'll just pass our user stage on through as a property to the route handler. And will be able to use that from within the page component. Alright, so with all that written, we wanna see this in action. So, I'll open another terminal window here. And then, we'll start up our server by running node server. Now, if I come to the browser, and go to local host port 3000, you can see that we have an error message showing up here. We have Route Handler is not defined. It looks like I made a typo in Route Handler. So let's go back to that file, and I'll go ahead, and correct that. And after a watch task recompiles the files, we'll come back, and refresh our page. And you can see that everything is showing up as we might expect from what we've written so far. So we have our header there that says Wicker, and then, over on the left in our sidebar we have our logon in page list placeholders. Excellent. So, that is our app component. In the next lesson, we'll start talking about logging the users in and out of our web application.

Back to the top