From the course: React for Web Designers
Unlock this course with a free trial
Join today to access over 22,600 courses taught by industry experts.
First API call with useEffect hook - React.js Tutorial
From the course: React for Web Designers
First API call with useEffect hook
- [Instructor] In this video, we're going to retrieve data from our API using another React hook called useEffect and render the status messages on the page. Over here in our code, we're going to go down to the status message list component. So I'm going to use Shift command + O, I can arrow down to status message list, and I have my stub statuses collapsed down here to make it a little easier to read. So what we're going to do is load the status messages using an http get from our little API. The URL for that as we currently have it configured is going to be something like localhost/reactjs/status_api/get.php. I can select that, copy it, I'll just check this over in my browser. There we go. That doesn't load stuff. So I'm going to write a helper function to do the message retrieval. We'll call it retrieve status messages. And for this, we'll use that Axios library that we brought in, which has a get method. Now all we need to pass to that in the URL of interest. And this will return…
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)
Use live data from a RESTful API4m 40s
-
(Locked)
Inspecting your starting React code5m 9s
-
(Locked)
First API call with useEffect hook5m 10s
-
(Locked)
Using conditional rendering4m 36s
-
(Locked)
Bring form fields under control3m 3s
-
(Locked)
Let form post to the API3m 25s
-
(Locked)
Lifting state for data visibility2m 48s
-
(Locked)
Completing the status updater3m 20s
-
(Locked)
-