Run the React Router v4 Examples with Create React App
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.
note: in this video react-router-dom is installed with the --save-dev flag. This is not required and may cause issues if used. Simply install it with npm install react-router-dom and it will function as expected.
[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 <h1> 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 <BrowserRouter>. 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 <BrowserRouter> is in fact available to us.
- Afterglow - icons may have been something else though - will double check on that.
- I plead the fifth.
Hey Joe, just a quick question: Why are you installing the router with --save-dev?
just force of habit - could've just as easily have been --save.
Hi Joe, Like your course and pace of delivery. I had the same question, would we not need the router to be installed with --save as it will be needed in prod as well, and not in dev?
I think we should not install react-router-dom this with --save-dev. That is wrong. Since it has to be the part of our app, we should just install it as just dependency (without --save-dev)
Agreed with Shripada. This video is misleading and should be corrected to indicate that react-router-dom should be added to the dependencies and not devDependencies.
Hey there, thanks for pointing out this error! It should be very useful for other learners.
For anybody else watching, you don't need --save-dev and should not use it. It's an error.
Hey Joe! Love your personal site, simple design with great effects! Had to laugh when I opened to dev tools. Also great course so far!
Quick questions:
What is your sublime plugin/theme that gives you all the nice syntax highlighting along with the icons along side the file names?
Why no need for the semi-colons in the javascript?
Thanks for taking the time to answer these simple queries.