From the course: Interactive React for the Web
Unlock this course with a free trial
Join today to access over 24,900 courses taught by industry experts.
Consuming live data using a REST API - React.js Tutorial
From the course: Interactive React for the Web
Consuming live data using a REST API
- [Presenter] Over the course of the next several videos, we're going to create a little status update app for a hotel website, the Landon Hotel. We're going to interface with a simple API to retrieve messages and post new ones. This will be another step closer to a real-world project since there will be actual data fetching and posting involved. Taking a look at this mockup, I've loaded mockup.html here in the browser from the first chapter, and we can see our status updates here. This is a mockup of what we'll be building. We have a small form over here that's going to post the status updates from various parts of the hotel over here with who it's from and the date and time. So let's look at this and think about the components that we're going to need. We'll have one big component to wrap up everything. We could call that the status message manager. Then we'll have a post form component over here. We'll make its form elements controlled as we did before, so we know we'll have to…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
-
(Locked)
Consuming live data using a REST API2m 14s
-
(Locked)
Inspecting the starting code5m 41s
-
Making our first API call in a useEffect hook6m 50s
-
(Locked)
Providing feedback via conditional rendering6m 53s
-
(Locked)
Wiring up the status form to post an update3m 17s
-
(Locked)
Posting a new message to the API7m 50s
-
(Locked)
Lifting state to make data usable throughout the app6m 9s
-
(Locked)
Update the message list from local state after posting4m 41s
-
(Locked)
Breaking a large file into separate components9m 43s
-
(Locked)
Solution: Make the date and time editable5m 18s
-
(Locked)
-