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.…
Author
Eve Porcello
Updated
6/20/2018Released
1/10/2017- 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
Duration
Views
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.
Q: This course was updated on 06/20/2018. What changed?
A: New videos were added that cover staying up to date with React and using create-react-app. In addition, the following topics were updated: creating components with createClass() and working with state.
-
Introduction
-
Welcome55s
-
Using the exercise files1m 27s
-
-
1. What Is React.js?
-
What is React?1m 5s
-
Inspecting React sites1m 45s
-
-
2. Intro to JSX and Babel
-
Pure React6m 19s
-
Babel inline transpiling2m 52s
-
Building with webpack8m 16s
-
Migrating to webpack 37m 33s
-
-
3. React Components
-
Planning an ActivityCounter1m 14s
-
Adding component properties2m 32s
-
Adding component methods2m 52s
-
Adding react-icons3m 22s
-
-
4. Props and State
-
Composing components2m 21s
-
Default props4m 33s
-
Custom validation5m 7s
-
Working with state3m 59s
-
Passing state as props6m 20s
-
State with ES6 classes2m 32s
-
-
5. Using the React Router
-
Incorporating the router4m 36s
-
Setting up routes4m 26s
-
Using route parameters5m 36s
-
Nesting routes5m 31s
-
-
6. Forms and Refs
-
Creating a form component5m 56s
-
Two-way function binding4m 46s
-
-
7. The Component Lifecycle
-
8. create-react-app
-
Introducing create-react-app1m 21s
-
Generating a React project2m 25s
-
-
Conclusion
-
Next steps56s
-
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
Press 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.
Share this video
Embed this video
Video: Understanding the mounting lifecycle