All language subtitles for 003 The Starting Project_en

Now, to get started with hooks,

you find a extra project attached to this lecture here,

which acts as a starting project for this course section.

It's this starting project

which we're going to use

to dive into the different hooks,

to use them, to learn how they work

and to then also write our own custom hooks.

So this is a simple React project created

with Create React app.

It runs on a version later than 16.8.

And that's important, you need to have React 16.8 or higher.

Otherwise you can't use React hooks.

Well, and other than that,

there's nothing special in here.

It's just a normal React application

with a couple of components I already built for you.

So let me quickly walk you through what we have here

before we start working with that

and before we start using React hooks.

With our index.js file, which is pretty trivial,

I'm importing index.css,

which sets up some global styling,

imports a font, sets up some well, global styling

for the font, for buttons, and that's it.

And then here, I render the App component,

which is living in the App.js file.

It's a very simple component.

It doesn't do much.

It will do more later,

which is why I have this extra component.

For now it just returns the Ingredients components,

which we get from the components folder,

there from the Ingredients subfolder

and then from the Ingredients.js file,

which would be this file here.

Now, in there, I, in the end, have a div.

I render a IngredientForm component,

which lives in the IngredientForm.js file.

And then I have a section

where I render the Search component,

which unsurprisingly lives in the Search.js file.

And if we have a look at the IngredientForm,

then we see that this is a component

that uses a custom Card component,

which lives in the UI folder.

We'll have a look at that folder in a second.

And then the IngredientForm here,

I do have my form here,

I have a section, which is a normal form

with a couple of inputs, two inputs to be precise

for a type and an amount

with a button and I'm also using React.memo here

to wrap this component to avoid unnecessary re-renders

so that this only re-renders, this component only re-renders

when the props it depends on changed

and not always when the parent component changed.

So not always when ingredients changed

but only when ingredients changed

and we're passing new props to IngredientForm,

which right now, we're never doing.

So right now, IngredientForm won't re-render

when Ingredients re-renders.

That's just a tiny side note.

You'll learned about React.memo earlier in the course

in the component deep dive module.

Now, that's the Ingredients folder.

Well, almost, we also have IngredientList.

There I'm just rendering a list of ingredients.

Right now we're not getting any ingredients from anywhere

and therefore, well, we're not using this.

We'll use it throughout this module, of course.

And in the Search.js file,

well, there I also use React.memo

for the same reasons I do it in the IngredientForm

and I just output a search box,

this input here in a Card.

And that's, of course, this box here at the bottom.

I've got a couple of CSS files there too.

You can, of course, go through them if you want.

Just a bit of styling to make this all look good

so that we have a nice-looking app to work with.

Now, in the UI folder, I prepared a couple

of UI components, like the Card here,

which simply wraps whatever we pass between its opening

and closing tag and gives it this nice Card look

with these styles here.

I've got the ErrorModal, which I'm right now not using

but which we will use throughout this module.

And this is just using React.Fragment.

Then I render a backdrop there in the modal itself

where we can output a custom content,

like a custom error message.

We've got a button to close that.

Clicking the backdrop should also close the modal

but it'll be up to us to wire up this logic.

I'm also using React.memo here and here I've got some styles

for that modal.

And I have a LoadingIndicator,

which is just a spinner, which we can render

to indicate that we're well, loading data.

So that is what we have here.

These are the components I'm giving you

and right now, this app doesn't do anything.

You can enter something here

but hitting this button won't do anything

because now it's up to us to wire this up.

And if you watch closely,

you'll see that all these components here,

they're all functional components.

There's not a single class-based component in there.

And we'll leave these components as functional components.

So we'll not change that

because as we'll now learn in this module,

we can build an entire React app

with just functional components with the help of hooks.

Therefore, let's dive right in

and let's learn about our first hook,

the most important hook probably.