Begin by creating the form that will help us add ski days in the app. Then add two new routes: list-days and add-days. When at the add-day route, the add day form will be displayed. When at the home route, the ski day count summary will be displayed.
- [Instructor] Currently we're using the router…to render our app component as well…as our Whoops404 component.…But really our app has the SkyDayList and the SkiDayCount,…and we want to be able to navigate between them.…We also want to add a new bit of functionality,…the AddDayForm, that will allow us…to add new ski days to our list.…So the first place we want to handle that…is by creating that AddDayForm component,…and then we're going to dynamically switch…between those screens using the router.…
So let's go ahead and create a new file…in the components folder, and this is…going to be called AddDayForm.…So for the moment, we're just going to stub this out,…so we'll just add and H1 here to make sure…that we have a component that is working.…In a little bit, we'll add better functionality to this.…So we're going to render, like I said,…just a simple H1 and our H1 will say Add a Day.…
Cool.…Now the next thing I want to do is switch over…to our index.js file.…Now like I mentioned, we're rendering the app…in the Whoops404, but we also want to render…
- 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.