Okay.
Let's talk about components now.
And in this video, we will be doing different components and I will show you how to write them.
And what are these in React?
So basically in React, everything is component.
So what does it mean?
That means it any function, any piece of code can become a component.
So what is component?
In fact, component.
It's a reusable piece of code.
So on this example, as we can see here, that's our function here and the function called app.
And that function renders hello from React on our page.
So in the previous video I explained how this is all done and we use get element by ID root and inside
we render our application and you can see this name here, it's the same name as we have here.
So basically our function is a component here and we have a few types of the component.
So let's clear this up a little bit.
So we'll remove the logo.
We don't use it anymore.
And then also actually I can leave it there for now.
So this file, App.js, it's a component.
It's a one of the component, the main components in in our application.
But I will show you a few ways how we can create a different components and component.
I can create it using a simple function.
So function like that and let's say our text like that.
And then that's a normal JavaScript function, our text.
So what we can do inside our function, we can return something and that's a combination of HTML and
JavaScript.
So I can do paragraph, this is our text.
So I have a paragraph and by the way, this is JS x syntax.
It's something unique in React, they developed a dot syntax and for me it's kind of hard to read because
it's not very intuitive.
This is JavaScript, this is typical JavaScript, and then we have kind of HTML, which is not really
HTML, but for example, the div Classname.
Normally in the HTML we would use class something like this, but class is restricted for JavaScript
language.
So they have different naming convention which is class name if you would like to apply class up to
it.
So basically in one file we have mixture of everything and I don't necessarily like it, but if you
would like to use React, you kind of need to get used to it.
So coming back to our function, our text, that's the function we have in our system and we can use
it or we can reuse it.
So we have hello from React here.
Let's say we would like to use our component here so it will be as easy as opening opening new tag and
then I will paste in our text, which is the name of the function.
So I will do it like like that.
And you can see ID is automatically closing that tag for for me or I can do is I can do a closing tag
inside and I will open and close it in one go.
So our text this is tag the name of the function we have there.
So if I will save it now you can see this is our text rendered.
So our function becomes a component just because we declare it here.
If I would like to duplicate a control, I will do shift option and down three times and I will save
it.
You can see this is our text three times display.
So it is reusing code that we can use in our application.
So basically any function inside our react is component.
So everything in React is component.
I will remove it now and come back to one here.
So this is our text.
So that's typical function, which is our component.
And you can see here that's also a function.
And basically what we have here is a component as well.
So this this big chunk that was created when we create our application is our component and that's a
functional component and I will remove it for now, this one and also this one, because we will have
an error and we will create a proper component from scratch.
So what we need to do and I will show you actually two ways of creating components.
We will do two thirds code here and inside our source I will create a new folder.
This one and I will call it components.
Components like that.
Combo.
Components like that and inside components, I can create a new file and let's name it header.
JS So it's a normal normal JavaScript file, So header JS and we'll create inside this file we create
a new component.
So what we need to do, basically we will need to do similar thing as we've done here.
So we need to import react.
From.
React like that.
So once you will have that imported react, that means you inside this file, anything like a function
function will become a component.
So we can do function and then let's do header like that.
And inside that function we can return something, return and we can do H1.
This is header like that.
So we have our function here and if we would like to use that component here, what we need to do is
we need to import it, but before we will import this header into our main application, we need to
export it from here and we have two ways to export it.
We can do export header like this.
So I could do like that.
Export header, which is kind of object we exporting object and inside we export our function.
And then I have this choice to import it here.
So I go import and then I do this one, this header because that's the name of our function.
And then from and then we need to specify from where we would like to import it.
So basically if I open this, we are inside App.js, so we need to go to the components folder and then
to header JS.
So we close it now and let's do that.
So from the current folder I will do components and then slash and then header.
You can see here the header has been imported and once this is imported I can use it here, but you
can see header, you already have that in the this application when we started.
So we'll remove whatever was there and we will create use our own.
So I will do header and then close the tag like that.
So what we have is we don't have that hello from React anymore.
What we will have in our application will have that header and we import that header from our component
from the file we created.
And this is header.
That's what we have in the component.
So I will go here, save it.
And this is header.
You can see it here.
So basically our application, the main application main component is this one.
And inside we import and we can inject more things.
So I said previously that we have two ways to export something and import.
This is one way we export this and this name needs to be exactly as here.
But there is another way.
If you have just one component or one thing that you would like to export from the file, what you can
do is instead of passing like this, you can do export default.
Heather.
So I save it.
Now I will have an error because I also need to change the way it's imported.
And then instead of this, I can import header and it will work exactly the same as it was before.
But this time I can name it whatever I like.
If I don't want to call it header, it doesn't have to be the same name as we have it here because that's
a default export.
So we by default, we export this one and you can have only one export default export per file.
So whatever you will call it here, it will be called.
So usually it's a good practice to call it the same way, but you have an option to call it in a different
way because it's a default one and you don't need to pass that curly brackets anymore.
So basically, that's two ways you can export and import stuff.
Next way to create a component is a class based component and I will show you how to do it now.
So let's create another component.
I will go to components here and I will create new file and let's call it Footer JS.
I will collapse it to make it more space and then we'll create a component, another component in this
file and we'll import it in the main application here.
I will close those as we don't need them anymore and I will do similar thing as we've done in the previous
one.
So import.
React from react.
So we are telling that this file will be react file and whatever we will have it, it will be our component.
Also, what we need to do is we also need to import our component.
So I will do comma and then we will import component as well.
So that's a keyword from React.
So we are importing React, which is a default export export and we also import component.
So what I can do here is we can create a new class, so we'll do class and call it footer.
So that's a class syntax and then we can do extends component.
Like that.
And inside a component this will be similar as we've done before.
So.
Inside here.
That will be our reusable component.
But a syntax is different.
We call it class instead of the function, and we tell it that it is a component using extend component.
So we need to do a few things inside and also we'll need to export it.
So export, let's use default one again.
Default and footer like that.
So the error is gone and then before we will actually include will go and include in App.js, we need
to do a few things.
So the class based components needs to have a function render like you can see here, and then parentheses
and then curly brackets like that.
And the render needs to return something so we can return here, let's say H2.
This is our.
Footer like that.
So we have a simple class and I will save it now.
And let's come back to the App.js, which is our main application.
And instead of header now we can actually duplicate it and I will do footer and then I will import that
from footer.
So we have our footer here and let's say this will be, let's say main content here.
I will just put something in between the header and the footer and then inside I will import, I will
insert a footer.
So what we have, we have our basically our application.
Then we have a header which is separate component.
I just put some content there and then we have a footer if I will save it.
Now you can see this is footer.
So we have two, two different components.
One component is a class based and the syntax is like that.
You need to extend component and you need to import that component from React and then you have inside
render and you return something from that and then you export it.
Another syntax is just a simple function and the name of the function and you return it straight away.
So when to use functional components and when to use class based components, basically the idea is
you will use functional wherever you can.
So functional is shorter and simpler way to use the components.
So if you don't need extra functionality and we will be talking about this later on in the course,
then go for the functional because it's just easier to use.
And then if you need some kind of extra functionality, then go for a class.
So by default I will pick the functional first and then class for something more.
Complicated and a more complicated estate.
If we need to handle the state for a component, then we'll use the class one.
Otherwise, the functional will be just enough.
So that's all about the components.
A component is a crucial part of the react.
And they are everywhere.
So every single piece of code we have on our page, it's a component and we'll be using components in
this course a lot.