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
Released
12/24/2016- 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
-
Introduction
-
Welcome55s
-
Using the exercise files1m 4s
-
-
1. What Is React.js?
-
What is React?1m 5s
-
Inspecting React sites1m 50s
-
-
2. Intro to JSX and Babel
-
Pure React6m 19s
-
Babel inline transpiling2m 52s
-
Loading JSON with webpack6m 32s
-
Adding CSS to webpack build5m 30s
-
-
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 48s
-
Passing state as props6m 20s
-
State with ES6 classes2m 32s
-
-
5. Using the React Router
-
Incorporating the router4m 27s
-
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
-
Conclusion
-
Next steps1m 4s
-
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