In this video, Eve incorporates the react-router, one of the most popular tools in the React ecosystem. Install react-router from npm. Set up a few routes using the Router, Route, and hashHistory components. react-router can be an excellent solution for handling navigation on single page apps.
- [Narrator] One of the most popular tools…in the React ecosystem is the React Router.…It's a community-built routing solution…for React applications.…Currently, our ski day counter application is rendering…these two components as part of our app:…the ski day list and the ski day count.…When we incorporate the router,…we'll be able to navigate between these components…on different pages fairly easily.…First, we want to install the React Router from npm,…so we'll run npm install dash dash…save react hyphen router.…
Excellent.…The next thing we want to do is we want to go over to…our index js file inside of source,…and the index js file is currently rendering the app,…but we're actually going to have it render the router.…So we're going to import a few things…from React Router, including the router,…route, for all of the separate routes,…and then this other feature called hash history,…which we'll talk about in a bit.…We'll import all of these from React Router.…
Now, the next thing I want to do is we'll replace our app…
- Refactoring elements with JSX
- Transpiling with Babel
- Creating components
- Adding component properties and methods
- Displaying child components
- Working with props and state
- Setting up routes
- Nesting routes
- Creating forms
- Understanding the component life cycle
Skill Level Intermediate
Building an App with React.js and MeteorJSwith Emmanuel Henri4h 20m Intermediate
Building a Polling App with Socket IO and React.jswith Alex Banks3h 56m Intermediate
1. What Is React.js?
2. Intro to JSX and Babel
3. React Components
4. Props and State
5. Using the React Router
6. Forms and Refs
7. The Component Lifecycle
Next steps1m 4s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.