Learn about fetching data on demand with componentDidMount and working with multiple top-level objects on the state.
- [Instructor] Let's now display the list of names…from our React application.…We have an API.…It receives a comma separated list of name IDs…and it returns an object…ready for us to look up any name by ID.…We'll go ahead and use this API…to place the actual names in our UI.…The first thing we need when we load a contest,…we need to start fetching these names.…You don't want to fetch the names…unless we are on a contest.…For example, in this main view I don't need any names.…When I click on a contest,…I need the contest to fetch its own names.…
So inside the contest class,…this is a candidate for component did mount code.…So when I mount a contest component,…we can instruct React to go back to an API…and fetch the list of names.…However, I want to keep all the state in the app component.…I don't want to put any state here in the contest component.…So instead of fetching the names here directly,…I'll assume that the app component…is going to pass down the property for every contest…to fetch the names.…So let's actually start there.…
- Configuring webpack and Babel
- Working with native Node modules
- Creating an Express server
- Working with React components and JSX
- Loading and working with test mock data
- Fetching data from a remote API
- Working with data in MongoDB
- Isomorphic rendering on the server
- Front-end routing and back-end routing
Skill Level Advanced
Building a Website with Node.js and Express.jswith Ray Villalobos3h 16m Intermediate
MEAN Stack and MongoDB: Development Techniqueswith Alexander Zanfir1h 48m Intermediate
1. Getting Started
2. Node as a Web Server
3. React Basics
4. Working with Data
5. Rendering on the Server
Fix the checksum problem6m 11s
6. Routing on Client and Server
7. Working with MongoDB
- 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.