Autoplay

    Run the React Router v4 Examples with Create React App

    Joe MaddaloneJoe Maddalone

    React Router v4 doesn’t require a lot of configuration to run. The core examples will run out of the box with Create React App. In this lesson, you will create an application and get React Router v4 up and running.

    reactReact
    15 - 16
    react-routerReact Router
    ^4.0.0
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    00:00 To get started with React Router, we're going to be using create-react-app. The command to install that is going to be npm install create-react-app and then throw in a tag -g to install that globally. I've already got that installed, so I'm going to go ahead and use it here to set up our applications.

    00:17 I'm going to say create-react-app. I'm going to give it a directory of rr4 for React Router v4. Now that that's installed, I'm going to cd into our directory. I'm going to go ahead and open that up in our text editor.

    00:34 The first thing we're going to do is get rid of some things here in the source directory. We're going to get rid of the test, the index.css, and the logo. I'm going to go ahead and delete these guys. We're not going to need them. Then, in our App.css, I'm going to go ahead and clear that out for now.

    00:49 Here we're going to ahead and recreate this guy. We're going to import React from 'react', create a quick a little stateless function here, let's return an

    that says Hello World, and we'll export that by default.

    01:09 The next thing we want to do is install react-router. It's going to be npm i react-router-dom. This is a version of React Router that is specifically meant for working with the DOM in a browser. I'm going to use the @next variable here to get the latest version of react-router-dom. I'm going to save that to our devDependencies.

    01:32 We can run our application by running npm start. You see that's loaded up here. It looks like I left something in that index.js, this index.css reference, so I'll save that. As soon as I save it, we get a browser refresh. If we look in our package.json, we can see we have react-router-dom installed.

    01:56 If we jump over to our app, we can now import whatever we want from react-router-dom. I'm going to import something called . We're not going to worry about using that right now, but I'll just log it out so we know we have it. Open up the devtools, and we can see that is in fact available to us.

    Discuss

    Discuss