Route parameters are very useful with the react-router. In this video, Eve adds route parameters, specifically for the SkiDayList. The new Link components added to the SkiDayList will filter the table to show all days, powder days, or backcountry days. Each should be assigned to a specific route.
- [Instructor] Currently, our ski day list component…is rendering all of our different ski days.…In this video, we're going to add some filters…so that I can see just the powder days…and just the back country days, based on links…that I click on.…Over in our ski day list component,…we're going to make a few changes that will make…this look much, much better.…So number one, we're going to wrap all of our JSX elements…in these parentheses, so they all should be wrapped,…and the reason that we're doing this is because…we want to wrap everything in these curly brackets.…
So the reason that I'm doing this is we're going to set up…some variables inside of our ski day list component.…We're not just going to return JSX elements,…so we need to wrap the whole thing in braces.…Cool, so the next thing I want to do here is let's wrap…our table with a div, and the div is going to have…a class name equal to ski day list.…Then, at the bottom of our table on line 27 here,…we're going to close that div.…
The next thing I want to do here is we're going to add…
- 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.