All language subtitles for 006 Onwards To A More Realistic Example_en

So here's a more realistic project.

Attached you find this project where after you downloaded it

you need to add in your Firebase links

and therefore to understand what's going on here,

you should make sure that you did not skip

the Http course section.

The section where I talk about connecting React apps

to a backend.

There I show how to set up Firebase as a dummy backend

and I show how sending Http requests works.

Which is of course, something you need a lot

in any kind of application you're building basically.

So, in this application here we are sending requests

and if you wanna follow along on your system

you should therefor make sure

that you have a Firebase account,

you can get started for free

as shown in this Http course section

and that there you are using the real time database

and you got your rules configured like this.

Set both read and write to true

or use the default test mode configuration,

and then use this URL which you find under data

and use that URL here, instead of my URL.

Keep the /tasks.json part though, you will need that.

So that's what you should do to follow along.

But what's this application doing?

Once you updated the code

and you installed all dependencies with NPM install

and you started the project with NPM start,

this is what you'll see on the screen.

It's a simple tasks application, a very simple one actually

where initially the tasks are loaded

and if we have no tasks

we of course have to add some tasks first,

for example, learn all about Hooks

and you simply click add task

and now this is sent to Firebase

it's all to display down there

and if you reload the application it's loaded

and displayed and it's stored here on Firebase.

Now I am only using what you learned

in the Http course section

and this all works by sending an Http request

with the fetch API, by handling errors

and a loading state

by transforming the data when it arrives

and by then displaying the data.

And we've got various involved components

but most importantly we got the app JS component

where we are fetching tasks

with this fetch task function,

which is either executed

because the component loaded due to use effect,

or because inside of this tasks component,

a button was clicked,

a button which has shown if we had an error

which allows us to try again.

So that's when this fetch task function is triggered

in the app component

and besides that in the new task component

we got the enter task handler function

where we also send a request

but here we are sending a post request

with some data attached to store task data on Firebase.

And this function is triggered

whenever this task form is submitted in the end,

which happens when this button is clicked

and we verified the entered value.

Now feel free to pause the video

and dig a bit deeper into the code,

but that is what's going on here.

And if you followed along in the Http course section,

which you should have,

then this is all basically just something you already saw.

Now I did create this basic yet more realistic example

because here we also got another chance

of adding at least one custom Hook.

And do you see where we could utilize the custom Hook?

Well, we got two similar kind of operations

in two different parts of this application.

And that would be here in the new task component

when we send the request to store data

and in the app component

when we send the request to get data.

Now, regarding the details, the code is different.

When we get the tasks, we configured a request like this

we send a get request without a body and without headers

and we have some transformation logic

which we apply to the response.

Whereas in the new task case we send a post request

and we do add data

and we have a different transformation logic

for the response.

But even though these details are different,

there are a lot of parts

where the code is pretty much the same.

For example, in both components, we are managing a loading

and an error State

and we are setting the loading and error States

in the same way.

We are also having the same error handling logic here

and so on.

So there are parts which are quite similar

and because that's the case

because we have some code duplication

some code re-usage here

because of that

we might wanna consider outsourcing this logic

into a separate function.

But since the logic

or at least parts of the logic,

which is being reused contains the usage

of other React Hooks

and the usage of State.

Since that's the case,

our regular function won't do the trick

because there we're not allowed to use React Hooks.

That's why here we have a great opportunity

for building a custom Hook

where we outsource the Http logic,

and then still in the end can reuse that stateful logic

for the loading and error State.

And that's therefor what we're going to do now

we're now going to apply our custom Hook knowledge

to build another accustomed Hook,

but this time our custom Hook,

which in the end encapsulates this Http logic.

Definitely feel free to try this on your own first.

It'll definitely be challenging

and they're also will not

just be one single way of doing this.

Nonetheless, try it on your own first

in the next lecture, we're going to implement it together.