Summary of React Router Course

In this course, we're going to look at how to use React Router version 3 to implement a routing system in a React application. We are going to use Create React app to generate a project. Then we're going to look at the router, hash history and route components from React Router. Then we're going to learn how to navigate between pages using the link component. Later we're going to look at nested routes, that is we're going to see how we can have a page that includes a menu and have only the content change as we switch to pages. The menu still fixed for each page. We're going to also look at URL parameters and query strings. We're going to learn how to access those from the props injected by React Router. Finally, we're going to look at how to programmatically navigate between pages using either history or the router object from React Router. So let's get started. Let's open the terminal. For this course, I'm going to use node version 8 with npm 5. So let's get started. First you're going to need Create React app to generate a React project. If you don't already have it, you can install it using npm install-gcreatereactapp. You can also use yard to install it. Once we have create react app, we need to only say create react app and then give the name of your application. I'm going to call the application using react router. So create react app and the name for the project. Create react app is going to generate our project, installing all the dependencies there's not necessary. So let's wait a little bit until it finishes. If you want, you can skip this video, skip the part where React is being installed. Okay, so we got everything ready now. The project is now here. So let's change the directory to the project. You can see these are the files. Let's now open the text editor to take a look at what we have. In my case, I'm using Adam, my text editor. So we have the package JSON here. Just a note, we're using react version 16.2. And if you go to the SRC directory, there's index.js. This is where the react application is being injected into the DOM from the index.html file that is in the public directory. Okay, if you go to public slash index.html, you have a div right here with ID root. This is where the react application is going to be injected. And the code that does that inject is in us SRC slash index.js. You can see here react.dom.rander, the app component in the root div. Okay, now let's get back to the terminal and install react router. So let's do npm install react router at version three. Okay, don't forget we're using version three for this example. So you need to say add three. Since I'm using npm version eight, I don't no longer need to say dash dash save to include that in my packages and dependencies. React router version three was installed. Let's check our package.json to confirm it is indeed there. Here we are react router version 3.2. Okay now that we have a project to work with, we're going to start building our pages in the next lecture. Okay, so until then.