4.5 Writing the App Component
Now we can begin creating our application UI. In this lesson, we’ll start with the
App component, which be the wrapper for all our future views.
1.Getting Started2 lessons, 03:51
2.Project Setup3 lessons, 20:58
3.Server-Side Code6 lessons, 53:00
4.The Client Side16 lessons, 2:43:53
5.Conclusion1 lesson, 00:29
4.5 Writing the App Component
At this point, I think we've done enough of the behind-the-scenes code in our application and we're ready to start working on actual user interfaces. And of course, we both know that the views in our application are going to be written with React, so what we're going to do first is install the React library. And again, we're gonna do this with NPM. So in our directory on the terminal, I'll do npm install react, and we're going to install version 0.13. And don't forget to save that to your package.json file. Something we haven't spoken about yet in this project is a router. Neither Flux nor React have any real opinions when it comes to a router, so we're going to use the React router library, although if you have another router package that you prefer, that would work as well. So to install the React router I'm going to do npm install and the package is called react-router and this has the same version as React itself, version 0.13. With those installed, let's come back to our main.js file in our source directory. Right now all we're doing is requiring the API and the ChirpStore and then fetching the chirps. And we did this in the previous lesson so we could kind of see how our ChirpStore was working. So in this file we'll start by pulling in React and the router. So I will require('react') and I will require('react-router'). Now the ReactRouter library is one with many properties on it. So I'm going to create a shortcut to the Route property because we're going to use that quite a bit in this file, so I'll say ReactRouter.Route. And now we're ready to create a routes object. So the idea behind the ReactRouter is that it allows us to write our routes in the JSX style. And then, of course, when we compile, that will be converted to the right function calls. This is great because it makes it easy for us to nest routes, and therefore nest templates. So we can have our root route, which will have the surrounding page layout. And then our individual routes only have to worry about their specific portion of the page. So let's create an object called routes and this will be our routes and it's common in React to surround JSX with parentheses, although it's not required. And for starters, we're just going to have a single route object and this route can have several different properties such as a name and a path. We're not gonna give it a path, and therefore, it will default to the root path, just the homepage of our application. However, what we do need to give it is a handler. And this property needs to be a React view component that will be rendered when this route is activated. Now currently we don't have any components, so we need to go ahead and make our first component. And so for now, let's leave our routes object here and create our first React component. And this is going to be the app component, just kind of a top-level component that will surround all the content of our page. So we'll start by creating a folder for all of these components and I'll just do this right within my text editor. So I will make the directory src/components. And now let's create new file src/components/App.js. So in here I'm going to require('react') because we need to create a React class. And of course, this class will be called App. And to create a React class we will say React.createClass, and pass it an object. And in here we can have many different properties, but for this class it's very simple. We only need our render function. And now this render function can return the JSX that we want to display on our page. So we're going to have a div at the top level, and within this div we'll have another div which is a row, and so we have to give it the class of row. However, if you've used React before you may know that you can't use the class attribute on your elements. You have to use the className attribute. So I'll go ahead and give this div the className of row. And then in here, we can have an h1 which will just have the name of our application. All right, let me copy this div and paste it down below because we want another row. And inside of this row, we're gonna have two columns. The first one is going to be three columns wide. So we'll give it the classNames of three and columns as created by the get skeleton framework. And this is going to be our navigation, so I'll just put the word Navigation in there for right now. We'll get to creating that navigation a little bit later on. Then we want another div, and this one is going to be 9 columns, because remember, a skeleton row should add up to 12 columns. This right here is where our nested views will be coming. For each of our individual pages we want their content to go in here. So for right now I'll just add the text Nested Content Coming. All right, with this class in place, we can go back to our main.js file, and we can add this component as the class for our handler here. So inside the curly braces for this handler attribute, I can just require the class, so I will say ./components/App, and that will get our component. Oh, actually it won't. I just remembered if we come back to app.js at the very bottom of this file we need to do module.exports = App. Then we need to export our class from this module. All right, so now this will work just fine. At this point we've created an object that defines our routes, but it doesn't actually run them or enable them in any way. So we need to use ReactRouter.run for this. So we'll say ReactRouter.run and we'll pass it the routes as the first parameter. And the second parameter is optional, but if you want to enable the HTML5 history API, we can do ReactRouter.HistoryLocation. And then we will get a callback function. And one parameter passed to this callback function is a React class. And this React class will be whichever one should be currently displayed based on the URL in the address bar. So we just need to use React to render that class. So I'll say React.render, and the syntax React uses is the JSX syntax, so we can say render the Root element. And the second parameter, of course, is where we should put that. Now if we open up our index.EJS template, we really don't have anywhere specific to put it yet. So I'm just gonna create a new div here and I'm gonna give this div an id of app. And we'll say that we want to render in there. So back in main.js here we can just do document.getElementById and we will get app and there we go. So now we should be able to see this in action. Now if you don't have the Gulp watch task on, you'll have to run Gulp before we do this to make sure that our files have been freshly compiled. And of course, you'll want to make sure that the server is running. But once all that's in place, you can come to our application and we can go ahead and log in. And you can see that once we log in, our router is working exactly as we would hope. You can see we have our header at the top, and we have our Navigation and our Nested Content Coming labels showing down below. One problem I'm noticing is that we're not really receiving the right borders here. So really quickly let's reopen views/index.ejs and let's give this div a class of container, which is the wrapper class that Skeleton provides. Now if I refresh the page, you can see that this is a little bit better. We can't really see the right edge of this content right now, but know that's it's gonna be the same width as what we have over here on the left. And that will be visible once we get some chirps showing up in here. And speaking of chirps, we'll start working with those in the next lesson, where we build our chirp input box.