In this video, Eve challenges you to build a component that will display member information for the member app. Then she goes over the solution. The member component is a div that contains an h1 with member information, a link to make the member an administrator, a thumbnail image, and a paragraph that contains a linked email address.
- [Woman] In this video, I'm going to challenge you…to build the component that will display our Member data.…I've made some adjustments to your files here…so I've stubbed out this Member component…and what you're going to do is you're going to create…a Member component based on a few different properties.…The other thing I want to point out is that…in your index.js file, instead of rendering…all of our routes as we did before,…I've commented that out in favor of rendering…just the Member component.…So we can build this out in pieces,…we're going to start with the Member,…and then we're going to build the Member list…that will wrap around and render Members.…
So here are your instructions.…You're going to, using this data that I provided…in the index.js file,…you're going to create a Member component…and it should a render a name in the h1,…it should render an FaShield,…one of these React icons right next to that h1,…we should populate an image using a src…equal to thumbnail, an "a" tag that has email,…and then we're also going to pass down…
- 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.