All language subtitles for 088 Tours - Fetch Data.en_US

And once we have covered how the second project, the torture project, is going to look like, then

of course we need to navigate through this sort of folder, all the doors.

Now, if you're using the same setup as me as far as the integrated terminal, first we would need to

leave the set of folder of the birthday, a reminder.

So first, what I would want you type is a CD and then two dots.

So now, of course, we are back in the birth reminder.

Then we type one more city and we'll be back in the project.

And of course, again, let's type three day and grab as a set of folder all of the tours project.

So essentially that is going to be set up for every project.

Make sure that you are in Riak projects and then of course, you can navigate to the specific set up

folder.

And once I'm here, I'll run NPM Install and the NPM start as well as far as this particular project.

Again, we have industries where we import and of course, we have a jayesh where we import loading

so loading component as well as towards component, which of course is going to be responsible for rendering

all the doors.

Then we have the euro, which we will use once we start watching the torc.

And also we have a single Torx component.

So there where it's going to work, we will watch our data that we'll pass it into the stores and then

we'll iterate over the torchbearer and plan for every tour will display a single tour component.

Now I think I can close the integrated terminal and let's start by just setting up some kind of state

values as well as fetching all the stores.

Now, I can tell you right away that I set up my own API.

And if you want to quickly check what is going to be a response, you can just copy the string here

and navigate, of course, to some kind of browser copy and paste, and you'll see that there's going

to be an array of objects.

Now, there's a couple of reasons why I'm setting up my own API.

First, I can always make sure that the API doesn't change.

So as I'm recording the video, the API will be the same when you are watching the video.

So that is very, very important because of course, we know that in real world, apps do change.

And then the second thing is I wanted to avoid, especially in the beginning, the nested structure

that typically comes with some kind of external API.

You'll notice that all my apps are usually going to be very simply structured where we have all the

properties right on the object.

Of course, don't worry.

Later we will work with external APIs as well, but especially in the beginning, I think it's very

important that we start with the basics.

So this is what we'll get once we fetch the data from this URL.

And like I said, I set up the API myself and the moment I have had to with torse project set up.

But I think we can start by setting up some kind of state values and I'm going to have to loading and

detours.

So let's go with const loading.

That is of course going to be displayed while we're loading and then set loading, set loading and that

is equal to use state and then by default I'll set it equal to zero.

So by default loading will be true.

That just means that we will see the loading component.

And then the second thing is that we're going to go with Const and TORC and of course we need to have

our function as well.

So set towards and that is equal to a used state and the default value will be an empty right now.

Before we fetch anything, why don't we also right away work on the returns?

Because at the moment we just have to having to.

But since I already introduce the state value of loading and we have covered before that, of course

we can have multiple returns.

Why don't we have one return for loading and one return when we're not loading?

So essentially, once we've got the data back and as far as loading first, of course, we would need

to set up our condition.

And I'm going to say, if loading is true, then I would want to return and I'll wrap my loading component

in the main package.

So say here loading like Shell.

And then of course, ST's loading is true.

That's why you can see this on the screen.

Now, I took the liberty and already worked on the loading jars and essentially there's not much there.

So we have the component.

We have the day off with a class of loading and then we have the heading one.

I think at this point you are familiar of what is happening here and a component.

So this is what we're seeing on the screen.

So that's my loading jayesh component.

And then, of course, I would also need to have some kind of return.

Well, if I'm not loading correct that the moment loading is true, but eventually, of course, we

will have our data show here as a default.

I can just say that our turn main element, again, that is for my styling purposes, by the way, I

need to fix it here and then I'll return my towards component inside there.

So say the worst component, Azerrad.

And just so you can see that everything works by default was once I say, of course, I have to ask.

So this is where we'll have the list of.

Now, I'm going to go back to try to save it.

And, of course, let's work on fudging the data.

I'm going to set up my function.

So right above the condition of if I'm going to go with CONSED, I'll call this Fetch the worst and

it's going to be a sink.

So right away set up myosin keyboard.

That is my function and I'll use the built in the fetch API.

And just in case maybe you have set set loading to be false, I'll just showcase that self-loading.

We would set up Astrue.

So just in case you would start as default as false.

Well you always when you start watching you can say I loading for sure to be true.

Now of course in our case we already have true here, but this could work as an extra precaution when

we say, yeah, you know what, when we fetch loading.

For sure.

For sure.

For sure.

Set loading the truck.

So then, of course, we're displaying to the user that we're watching the data and now we want you

fetch, of course, minotaurs.

So we're going to go here with CONSED and I'll name this a response like so not as equal to weight then.

Watch now of course we just need to pass in the euro.

Now I know that I'll have to run the injection since we would need to pass it.

So we're going to go and that horse is equal to again wait and we'll go with Futch and Jason and then

invoke it.

So this should give us a list afterwards.

And for starters, we can just lock the doors.

And of course, we need to use my usufruct where I'm going to invoke the French doors, wants the component,

renders my app component in here.

I'm going to go with years of fact.

Then I'll make sure that it only runs once, once the component renders on the initial render, and

then we go here we futch and minotaurs and then of course we invoke it and we should see in the console

the torch.

Now, prejudice is not a function and of course, it is a response dress on my apologies response,

Jason.

So I want to invoke it.

We should see in the console the aura that we're getting back.

And of course there is.

Those are my five doors now before we set up the torch with set torch function equal to the torch that

we just watch, we can also place this and try and clutch.

So that way, if there is some kind of error, at least we can display it again.

Keep in mind that we have built in fetch.

We're just talking about the night workers and Turrill.

We talked about how we can actually look for different hours if we ever wanted to.

And since I don't want to repeat myself, I'm not going to go over that.

But as far as these network errors, if we would want to catch them, we can just go and try catch block

and let's set up our own weights and the tri block like show.

And let's also set up right away loading as far as an hour towards value, the one that is an empty

array to whatever tours we're getting back.

So here, let's go set loading to force and of course, we'll flip what we are displaying on the screen.

And as far as the torch, we're going to go set the horse and also we'll pass in the torch that we just

watched from the API and then in the block, we still need to set loading to force even if we have the

error.

So say here, false and line.

As far as the error, I would just want your control log.

So I'm going to go here with console log error.

So we start with loading and then eventually, once we've got back to TORC and of course we set loading

to force in both cases, whether we're successful or there is an error.

And as far as our state value, well, we should see the aurora of five items.

So now let me navigate back to my bigger browser window and now let's see.

As far as the Iraq death tolls, if I navigate two components, notice in the beginning, this is false,

but if I refresh, then of course loading will be true.

Then once I've got the data, then of course it is going to be false.

And as far as the stated value for my thoughts, initially it was an empty array.

And then once we successfully fetch our torc beautiful, we have an array of five items since we set

up the use of fact.

Of course we're doing that on the initial render because we also had a dependency array and we left

it empty.