In this video, Eve introduces the members website and nests the About and Members components inside of another component. This other component is a template that displays a menu on the right or left side of the pages, depending on which is selected. Be sure to include the Whoops404 component as well.
- [Instructor] To demonstrate how to nest routes,…we're going to take a look at a simple app…that also uses the router.…Now, we have a ton of files in this start folder for you…that you can use to get started.…So I'm first going to make sure I npm install…all of the dependencies for this project in the folder.…Great, so what we're trying to build is this,…we're going to build this website for…a very important society, the Rock Appreciation Society,…and we're going to create different routes…for our About and for our Members.…
So the place I want to get started with this is to take you…on a quick tour of some of the files that are already here…and then we're going to adjust them.…So in the root of the folder,…you should see an index js file…and this is going to be responsible…for rendering all of our routes.…Now, the routes come from the routes js file…and right now we're just rendering Home and Whoops404…which is why the About and the Member links didn't work.…Great, so the next thing I want to do here is…let's go to our components folder.…
- 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
Q: This course was updated on 09/19/2017. What changed?
A: The following topics were updated: setting up Chrome tools for React, inspecting React sites, Babel static transpiling with babel-cli, loading JSON with webpack, adding CSS to webpack build, and creating components with createClass(). In addition, a new video was added that covers migrating to webpack 3.
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.