Join Eve Porcello for an in-depth discussion in this video A deeper look at keys, part of Learn React.js: The Basics (2015).
- When rendering our note components,…we pass a key property to our component…when it's part of an array of children.…Our board is the parent.…Its note children all contain a key property.…React decides what to re-render, based on IDs.…If a change occurs to an element,…React will re-render that element.…If our children are dynamic,…let's say they get shuffled around via a random function,…or maybe new components get added…to the beginning of an array,…the importance of keys becomes even more clear.…
To ensure that the state and identity of our components…is maintained throughout multiple renders,…we need to assign it a unique key.…To demonstrate this,…let's first add a function called randomBetween.…And I'm going to add this here on line 5,…right beneath our getInitialState method.…Now randomBetween is going to help us…generate a random number between two numbers.…And this is going to be a function…that returns that calculation.…
And the calculation is going to take in…two different arguments.…So let's add those to our function.…
- What is React.js?
- Introducing JSX
- Creating a React component
- Handling events
- Using state
- Defining parent/child relationships
- Adding child elements
- Mounting and updating components
- Creating a React.js app
Skill Level Beginner
Up and Running with AngularJS 1with Ray Villalobos1h 20m Intermediate
1. What is React.js?
2. Getting Started
3. React Components
4. Parent/Child Relationships
5. Component Life Cycle
6. Creating an App
Next steps1m 5s
- 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.