In this section, we are going to dive in and learn the core concepts when it comes to react, and that
is component.
Any time you hear the word react, you hear the word component also.
So React is all about component.
In my own definition, I define react is equal to component.
So as a beginner, the most confusing part when it comes to react is to be able to understand and use
component.
Because of that, we are dedicating a specific section to cover everything about component by moving
step by step.
To better understand our edge, you to take some nodes as we proceed.
Well enough talking grade.
So before we get into the technical term of re act sorry component, we are going to use some object
to explain before we get into that.
And the first object we are going to use to explain component is what you see on the screen.
Even though I'm not a mechanical engineer.
So if I misuse some technical terms concerning this object.
Pardon me for that.
Okay, cool.
So you can see that for this particular object we see here, we have pieces of object on it, and that
is what you call component.
We see that and each of these ones has a specific function that it does.
So these pieces of components we see make up this entire object functional.
That is the nature of a component.
So if you take this one to compare to web application, we can say that this is the Web application.
The entire chip here and the pieces of on it is our logic, entire application.
So that is one object we can use to explain what is called component.
So let's get to next slide and explain more about component.
Well, before we describe this object, cut your eyes around you.
Anything you see around you is made up of component, whether it's natural or artificial.
So let's use this laptop as an example here for this laptop.
You can see that we have a screen or the laptop.
Then we have a keyboard of the laptop.
Then we have a mouse track of the laptop.
So this is what you call component.
And this component makes up this laptop.
So we can describe this laptop as our web application or react application.
And the pieces of the component makes up the entire application.
So this component has a specific function that it does.
Before we get into the actual definition of component, let's use the last slide here and let's use
this handsome guy over here.
You can see that this person has different component.
It has.
This person has the arm component.
All right.
I'm component.
It has a head component.
Leg component.
And then shoe component.
And then nodes component.
And the person turns back.
The person has a back component as well.
You can see that this component we see here, they have a special function that it does.
Right.
Great.
So now that you have the pictorial aspect of a component, let's go ahead and then explain with the
definition of a component.
All right.
Let's get going.
Great.
So we add component is a single self-contained unit which may be re-usable across your app.
It is used to create a user interface.
So let's focus on this one over here.
It says that React component is a single self-contained unit, a single self-contained unit.
So it's like a box.
So let's go back to this one.
As we see here, it has a single unit, right?
Have a look.
This one has a single unit, a self-contained unit that perform a special function.
So this unit can be reusable.
It can you can place this unit somewhere here and somewhere here.
And that is what you call reusable.
All right.
So enough talking.
All right.
Now that we have the technical definition of component, let's use this object to explain more.
Let's take it that a box or this box is our component.
And a component has a name.
All right.
We get back into that.
So inside the box or the container, we can save both a HTML, CSS.
JavaScript.
Images, videos, and many more into that box.
So that box, we can take that box and then use it somewhere else.
So now that we have this pictorial aspect of component, let's use this website.
We are going to create a website from scratch.
And then I'm going to explain what is component how component fits together to make the entire Web application.
All right, cool.
So let's take it that this is our Web browser.
And they're on their web browser.
First of all, let's say that is our let me see our text editor that we are going to I mean, design
our website.
So the first one is we have said we want to have a header image.
The header image will be laid down here.
And then let's say that.
Well, I also want to have three images beneath the website.
So one image would be the site.
One would be the this side.
And then one would be the other side as well.
So you could see that this entire application is made up of four components.
Well, so let's go ahead and then use real website to explain more about component.
So let's use the application I just released, which is a voting application to explain more about what
is component.
As soon as you see this website, you can see that we have pieces of components that we have.
I mean, specific logic or designing that are related together.
So let's take this now.
For example, here, this.
Now back over here, we have a button called log in and we have a button called what?
I mean the host award here.
And this one component.
And one component and this one component and this one component and this buttons are all component.
So you can see that something that are related are called component.
So let's scroll down here and let's explain more about component.
Let's take this image, for example, if we see that.
These card over here are components because you can see that they perform a specific function.
Right.
You could have one card over here.
And one card over here, you see that?
They share the same logic.
Why don't you have an image here?
Image here.
Text the text here.
So we have coupled these components into one.
So that's what I'm going to do.
So the component can contain it can be used for presentational or I mean, the or the actual logic.
All right.
And one more time to see that we have a button here and this button can you also describe as a component,
component, component.
And then if you scroll down here to this image is a component.
This is the component.
And this component and this component, if I click on each of the our category here and we are going
to have a sub component also.
So that is all about a main component.
All right.
So now we have the the read definition of component in the next video.
Let's go ahead and talk about types of component and how we can create a component with code.