One of the most powerful features of React is the ability to compose components to build a user interface. Eve describes how to build our first component tree so that we can pass props down the component tree. The SkiDayRow is the child of the SkiDayList in this component tree. This will display all of our ski days (or activity days) in a table.
- [Instructor] When we think of React user interfaces,…they are just a collection of composed components.…So like we see here, we have a table.…It's comprised of the ski day list, and then ski day rows…for however many days that we've skied.…So the ski day list is the parent…and the ski day rows are the children.…So in the next few videos, we're going to compose…a few components together to build this table.…So the place I want to get started with this…is instead of rendering the ski day count,…we're going to render a component…that we'll create called SkiDayList.…
Now the SkiDayList is going to be pulled…from the same folder, so we can set this up now.…We'll import SkiDayList here also.…The properties that we're going to use…for SkiDayList are a little bit different.…So let's remove our previous properties…and we're going to replace it with a property called days.…Now, days is going to be an array of different ski days,…so this is going to make up all…of the different rows of that table.…
So let's create an array of objects here…
- 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.