Learn about creating API endpoints in Express and consuming them in React with axios in componentDidMount.
- [Instructor] So now that we have the data on the state,…we can start working with the data API,…instead of reading the data directly from memory.…So we're kill this line, and we're going to go prepare…and API endpoint on the back end instead.…So if you remember, in server.js,…we prepared an API endpoint at /api,…and started preparing an API router module under API.…Right now, we're returning an empty data array.…So what we want to do here now…is to have an API endpoint to serve the contest's data.…
So we'll have this API endpoint under /contests,…so that we can get to it with /api/contests.…Instead of sending data, we're just going to send contests.…And in here, we're just going to read it…from the same file directly,…so I'm going to import data from test data,…which is up one level from here, under source /testData.…And now the contests can be read with data.contests,…so let's go ahead and test that.…We go to /api/contests.…
And we get a list of contests here in an API.…Cool, so now we need to use…this list of contests from the React application.…
- 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.