Eve challenges you to build the MemberList component. The member list holds a list of members in state and returns a Member component for every member that is in state. Practice mapping over an array and returning components based on the data. These components serve as the base for the members page in the app.
- Now that we've created our Member component,…we're going to use the Members list to render it.…So if we open up our Member list file,…you should see that I've listed some members…and I've held those in state of Member List.…So it's going to be up to you to take that data…and to render a member…for each and ever one of the people…that are held in state.…So take some time to do that,…pause the video,…and when you un-pause it…I will go over the solution.…
Okay, let's go over the solution…to the Member List.…First, since I'm going to be using the Member component,…we want to import it.…So let's import Member from Member.…Now I can actually adjust my Member list a little bit.…So we have our h1 here already,…I want to be able to loop through those members…that are held in state.…So the first thing I'm going to do is…I'm going to de-structure Members from state…so that my syntax can be a little cleaner.…
- 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
Q: This course was updated on 09/19/2017. What changed?
A: The following topics were updated: setting up Chrome tools for React, inspecting React sites, Babel static transpiling with babel-cli, loading JSON with webpack, adding CSS to webpack build, and creating components with createClass(). In addition, a new video was added that covers migrating to webpack 3.
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.