2.1 Router Setup

Now that we have our build task all set up. We're ready to begin writing some front end code. Actually, there's one more bit of housekeeping first. We've created our source directory but inside that directory we will need a directory for all of our react components. I like to keep them all in a single folder. And we'll call that Components. So now that we're thinking about front end features, we need the front end modules that are not development dependencies, but actual application dependencies. And of course, I'm talking about React and in our case, React router. So let's go ahead and install React version 0.13 and React router version 0.13 as well. And of course we'll include the -save flag so that we can save these into our package.json file. Then, let's set our build task running. So, I'll run and mpm run build. And now, in another terminal tab here, we'll go back to our source/app.js file. Let me remove that little bit of code that we started with last time and let's begin by importing those two libraries. And we can use an ES6 import statement. So we'll say import React from the React package, and we'll import the rotor object from React/router. Now the React rotor package has a lot of classes inside of it. And one of the things that we're going to use here is router.route. So I'm going to pull that out with destructuring. We can get the router.route property by setting a variable, or in this case a constant, equal to route within curly braces. Which means we'll get the route property of the router object. So with these classes in place, we can start writing our router. Now, if you've used the React router before you may know that we use the J S X syntax to create a series of nested routes. So I'm going to create our first route, and we're gonna sign all of these routes to the routes variable. Now this route is going to be kind of like our master template. Since we're not going to give it a specific path, and since it is the root route in our hierarchy of routes here, it will be rendered on every page. Now the way we decide what React component will be rendered is by giving it a handler property. So I'll go ahead and set our handler equal to the app component here. Now we haven't created the app component yet. However we'll get there in the next lesson. We're only going to have a single nested route in this application and I'll give it the name of Page. The path for this application is going to be /page/id. And this is going to be our wiki page's individual ID. Of course, we'll need a component for rendering the page and we'll call that predictably enough, Page. And this, of course, is another React component that we'll have to create in the process of building our application. And in the next couple of lessons, we're gonna focus on building the app component and not the page component. However, if we leave the route that uses the page component here in our router, we're gonna get some errors because the component doesn't currently exist. So I'm just going to delete that line for now. Then we'll come back and add it when we create our page component. Now, to use these routes in our application, we're going to need to call Router.run. We'll pass the routes object that we've created as the first parameter. And as the second parameter, we'll pass Router.HistoryLocation. This way, we're going to use the modern push state history API instead of including hashes in our routes. Now the callback function, which is the third parameter to router.run, gets the final compiled React component as its property. And we're going to use one of ES6's arrow functions here. I'm gonna use these almost as much as possible in this application. So it takes a single parameter. We're gonna call it root. That's kind of the common convention with Reactor router. And inside of this function, we're going to call React.render. And this will render the root component and we will get our div with the ID of app which we included in our index view file and of course this will render our application in that div. Excellent. So this means we're pretty much set up to start writing components. I'm gonna add one more import statement at the top of this file. We're gonna import app from components/App. Now, since this is not an mpm package, we do have to include the relative path, so we'll start with ./components/App. And that's it for this router file. In the next lesson, we will start writing our app component.