The React component lifecycle provides a list of methods that can be used to execute code at certain moments in a component's lifetime. Looking at the mounting lifecycle, Eve installs fetch, which is a way to grab data from an API. Connect to the API and load data on members. Use methods like componentWillMount and componentDidMount to enhance the app.
- [Woman] React provides methods that you can use…to execute bits of code at certain moments…in a component's lifetime.…In this video, we're going to take a look…at The Component Lifecycle, and we'll take a look…specifically at the mounting lifecycle.…We're going to be grabbing some data…from the randomuser.me API.…We've already pulled some pictures from here,…but we're actually going to connect to this API…to load some data.…So, the first place I want to start…is in our MemberList component,…and the MemberList component should,…instead of having this data hard-coded here,…we're just going to set members equal to an empty array.…
The next state variable that we want to set up…is loading, and we want to set it equal to false.…So, the initial state of our application…will have loading as false,…and then we're going to use another method that is going…to trigger that loading process.…The way that we're going to load this data is using fetch.…Now, since I included this for you already,…we don't have to NPM install it.…
- 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.