React JS for beginners: Tutorial 9 - Fetching data from an API (part 1)

Sharing buttons:

in this video we're gonna take a look at

sending an HTTP request to an API to

fetch data and display that on our page

so if I give this a refresh you'll

notice that we have a little loading

symbol and then the data loads in from

this HTTP request you can see that in

the network tab in Google Chrome and in

fact we can see a better example of this

if we simulate slow 3G and load this


so you'll notice that it takes a little

bit longer but we have the loading

symbol and then we have our data loading

into the page we'll also be looking at

dynamic route parameters to make this

happen so if I were to load product for

then we'll have a completely different

product loaded in now before you can

follow along with this tutorial you're

going to need to have a JSON API that

you can connect to and fetch all of the

Chasen data so if you want to learn how

to create your own API I do have a

complete tutorial series on how to do

this with laravel and that is a free

course so I will link to that in the

video description of this video go ahead

and take a look at it and you'll learn

how to create an entire project that

will return any data you like and of

course you'll be able to store data etc

but for the purpose of this tutorial and

keeping this tutorial accessible to

everyone I'm going to show you a great

free resource which is called mock API

and what this allows you to do is set up

a bunch of mock api's in fact you only

have one free one but that's fine it's

perfect for this video and what I'm

gonna do is log in and let me show you

the API that I've set up for this video

so I've just set up a product list with

a bunch of products and those products

have some images now if I take a look at

my data I think let's click the edit

button there this is the setup that I

have for this tutorial so I've got

products and we can get products with a

specific ID by adding that to the URL

we've also got post put in delete

requests if we want to

put some more data like edit data in the

database and delete data from our

database then these are the columns that

I have on my API so we've got an ID

we've got created at we've got a name a

material that the product is made out of

a price and all of these are generated

with fake ajs so it's just generating

fake names for us and fake prices and

then we also have a images resource

which is a child resource and that is

just this resource down here so if we

were to take a look at a specific

product in our database we can visit API

v1 products and then the ID of that

product being for or let's just say

let's look at the third product and this

is the data that we have returned now

that you have an API to connect to the

next thing we're going to do is open up

a new file so I'm going to create a new

file called product jeaious and this is

going to be the product page for our app

and I'm just going to paste in some

standard react boilerplate code here and

the next thing I want to do is head over

to app J's and add that product page

over here so we'll add that in and this

is going to import the product component

so we just need to make sure that we

import that over here as well and so now

let's just change the path so we're

going to access this product by

accessing the URL products and then

we're gonna add in a wild-card to the

URL by adding a colon and then the name

of the wild-card that we're passing

through which in this case is going to

be an ID and if we save this now we

should be able to access our product on

the products URL and then adding a ID to

the to the URL as well so ID 3 ID 2

whatever and that should give us back

the product page of course we don't know

where on the product page just yet so

let's add in an h1 just to say

that this is the product page and of

course now we know we're there so we're

going to be looking at replacing this

data with the actual name of the product

as they're heading but in order to do

that we first need to send through a

request to our API to fetch all of this

data in order to send that request we're

going to make use of an HTTP library

called Axios which is just a yon package

so we can copy that come on and we can

come over to our terminal and yon add

Axios and now that you have Axios in

your project you can go over to the file

you want to use this in and in for Axios

from Axios and what we'll do is we'll

use Axios to send through one of the

HTTP requests so you can use Axios to

get to post to delete or any one of the

different types of requests available

but in this case because we want to

fetch data from our API we're going to

be making use of a get request and this

get request takes in a URL so what we

want to do is we want to take in this

URL and we're going to paste that in

here of course to clean things up a

little bit what I'm going to do is I'm

going to create a constant and this

constant will be a URL and we'll set

that equal to the string version of our

URL up here so that's maybe just close

that so we can see that a bit better but

that is the variable and so now what we

want to do is

Axios get that URL and once we've got

that URL this is actually going to

return a promise so we can chain on a

then function and this then function can

give us back the response from that

request and we'll run a function on that

response and on that response we are

going to set a variable so what I

actually want to do is I want to create

another state variable up here so we'll

call this Const

product so we'll create a product

variable and then we'll create a method

for setting that product called set

product and we're going to set this

equal to the use state function from

react and we'll default this to no

so by default our product will be no but

once we've sent through this Axios

request we're going to set product to

the response dot data so we're going to

get the response data from our request

so if I save this now and go back over

to project you'll notice that we could

well first of all you'll notice in the

network tab seeing as I have that open

we are sending through a request every

single second and this is going to get a

bit much of course you don't want to

have be doing this so this is a massive

bug but the reason why this happens is

because we're making use of this Axios

request inside of our product function

so what we need to do is we actually

need to cut that out and we need to make

use of that inside of another react hook

called use effect so I'm going to add

that to my project and we're going to

make sure that that's imported up here

and then we are going to set this to an

arrow function so this arrow fund or

this hook actually takes in two

arguments the first one is a function of

code that we want to run and then the

second argument is a variable that we

want to monitor and if that variable

ever changes then that's what we want to

use to rerun the request so for now we

can add in the URL in here and so now if

this URL changes that's when the code

within the effect will rerun so what

we'll do is we'll paste in our Axios

request here and when we save this now

we should have our network request only

running once and we should have this set

product or we should have this data in

set product so I can try out put that in

my template down here by

are putting the product name and of

course if I save this now we have a huge

error cannot get property name of

undefined and that's because our product

first loads in as null and we're going

to return a template that's trying to

use the product names so what we need to

do in order to get around this is we can

create an if statement to check if there

is actually a value in product to check

that there's actually data there and

then return our product name and then we

can also have a default return down here

of just an empty div so we can grab this

and paste that in but remove the heading

with the data in it so you'll notice

that when I actually save this now and

we refresh there is a brief second in

which there is no data and then we have

the product name output so we got this

template first and then we actually have

this template another way to get around

that is to also just create a variable

called content so we can say lit content

equal no and then we can output that

content variable down here but in the if

statement we could change content to be

the content that we wanted to return

which in that case was actually the div

with the heading that I wanted to output

so in fact let's actually just grab well

yeah let's grab the entire heading and

change that variable to be this ok and

that basically does the same thing now

we can access the rest of our product

data and create a little template and

what i've done is i've already prepared

a little template for us so i'm going to

just paste in that JSX and the way i'm

getting all of these variables is if we

take a look at the request over here you

can see we've got an ID and name a

material a price so these are all things

that i can access and in case of the

images this is actually

an array so what I'm doing is I'm just

getting the first image in that array

and then getting the image URL on that

image and if we look at that in the data

I'm actually just returning a Pixum

image which returns a random image every

single time so whenever I save this

template now we should have our product

and then we should have a random image

and every time I load the page of course

that will return a different image now

the next thing we want to do is we

actually want to look at making this

dynamic because the problem is whenever

I access this product URL it doesn't

matter if I'm using the ID of one or the

ID for I'm always getting the same

handmade granite t-shirt and that's

because we've hard-coded that ID over

here into the URL so what I'm gonna do

instead is I'm going to create another

constant and we will call this the ID

and in fact we're going to make use of

JavaScript destructuring so I'm going to

create a variable here called ID and I'm

going to set this equal to another hook

which is called use params and that is a

hook that we get from the reactor outer

Dom and what this allows us to do is

well it will just return all of the URL

parameters up here and in this case it

will give us that ID so we'll get just

the ID from those params and now we can

make use of that ID over here at the end

of our string so I'm going to paste in a

little dollar sign ID but then we need

to surround the rest of our string with

back ticks instead of quotation marks

and so that will allow us to use a

variable in the string so if we save

this now we should be able to have a

dynamic variable in the string in the

URL so if I go to product - I should

have a handmade soft tuna if I go to

product one I've got a different product

which is awesome soft chips and if I

go to product five well I have gorgeous

cotton pizza so we're now getting a

dynamic product every time we change the

URL and I think that's where I'm going

to end this video don't forget that you

can download the code for this tutorial

on my github page and of course if you

guys like this video then please

subscribe watch another one consider

pledging to me on patreon and I'll see

you guys in the next video