Build on your previous component by adding properties. Props help display dynamic data within components. Think of properties in React as being an object, and each property is a key. Eve adds four properties to the component: total, powder, backcountry, and goal. Then we display data using this.props.
- [Narrator] Let's update this component…so it will display data from properties.…Think of properties in React as being…an object and every property is a key.…We're going to add four properties to our component.…Total, powder, back country and goal.…So let's open up our ski day count.…And we're actually going to start with our index file.…And we'll add these properties right where…we're rendering the ski day count.…So I'm going to go ahead and add our total…of 50, we're going to add the powder at 20,…we're going to add back country at 10,…and then our goal is going to be set to 100.…
Now all of our numbers here are…wrapped in these JSX expressions.…We could use these for Booleans, we…could use them for functions, we could…use them for numbers, just a quick note…though that if you're trying to use a string,…you're just going to use the string.…Let's go ahead and put this back…to a number though so we will need those braces.…So in our ski day count, we're going to,…instead of just using this hard coded data,…we're going to actually display from props.…
- 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?
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.