Now that we've gone through some of the concepts in React, let's try to revisit component and add more
things to it by talking about, for example, types of component and how we can break down a layout
into pieces or components.
So let's get started with types of components where basically we have two types of component and react
stateless component and state for component.
So stateless component is a component that does not have any internal state.
Stateless components are simpler.
They just take in process or attribute and then return some HTML again.
Stateless component also known as presentational or dump or stateless component.
So instead let's component a simple react component, not have any state and then can only receive props
from parent components.
For example, you can create a component for only input field or a dropdown menu or basic headers or
paragraph or images as that.
So let's get started with what is called the stateless component in this video.
So back to our folder here.
Now, we are going to create one more folder here and let me place it inside here.
Component, component.
So let me call it as component part two.
Component.
Part two.
So let's start with the stateless component.
So here, let's create a function and cause a state less stateless component or compo and.
JS So the snippets are AFC and boom, I have my stateless component.
So let's add H2 and say states list component and now let's return that or render that to inside my
app stateless component or to import.
And now let me comment out this or let me repeat this one.
Let me move this one to have some clean sheets.
So now I have stateless component.
So stateless component are just for presentational meaning.
For example, if won't make reuse of a pattern across your entire application, we can create a stateless
component for that.
So let's go ahead and create a pattern component.
All right, a pattern component.
It means that that pattern can be reused across or inside our entire application.
So instead of making a stateless component, well, I can make this one as pattern component.
Biden component here.
So a stateless or I make it barren.
Stateless.
So that to be more descriptive.
Right.
But in stateless.
Compo.
It's long though.
But don't worry.
I just want to make more descriptive.
So let's rename the name here back to that.
And now the import is wrong again.
So now it is rename.
And then let's change this one to stateless component and then state less component.
Okay, good.
So we are going to create a button and this button, we can reuse it inside our application where we
want.
So here we go.
So inside a button, here we are going to create a button.
So instead of just returning here, we can return just a button here, a baton tag.
And there you go.
Call this one as Starr star.
So check it out.
Now, we have registered here, but we can add more style to it.
You get it?
So let's get going.
Well, we pass in.
Let's do the inline style in here.
And the first one is we have access to the font size.
Let's say the font size of this one is going to be 30 or 20 pages.
And then after that, you also need the part in a part in of, say, ten pages on all sizes.
Save it.
Come to the next line and let's say the border.
Border.
Is going to be one piece of solid, let's say yellow.
It's up to you.
This just like a normal case.
And then we have the border radios.
Border Radio's own.
A radius of less say.
Give it us $10.
So let's see what we have so far.
Yes, something like this.
I think the color here make it us.
Let me get about one color, a background color of, say, just some ugly semantic here.
Okay.
The border here around it, I think.
Let's make it to paste.
That is more.
Yeah.
It's more clay here.
And the color on the text is let's give it as white.
And there you go.
So now this button or this component is what you call presentational component or stateless component,
because inside this component, there is no state that this component is keeping track of.
So let's say that I want to use this component inside my app component instead.
So here, instead of just returning, okay, I'm coding.
What about if I want to call this body component inside my any of this component, I can still reuse
it.
That is how I mean.
Component is all about able to reuse the component.
But one more thing is that stateless component can take in problem meaning we need we can customize
our component the way we want.
Let's say that on the let me let's get back to let's say let me go my component.
What about let's try to call this component CSS and react this component.
I want to add a button to this component.
So I need to import that.
So import I think I have the import button stateless component.
I have the auto import here.
Yes.
So now I can call the component here as but instead less component.
So instead of this one, we are going to render the CSS here.
So now let's change this one to the CSS react component, the auto import as above here.
If I say we see that I have the button inside this component, but let's say that on this component
I want to change the background color or the size of the button or the height of the button.
That's where we can pass in props to a presentation of component.
So in the next video, we are going to customize or make our component more flexible by passing in prop
going to receive from component and then we can render this one.
What about I just want to name the type listed here to be log in if want to change here to log instead
of register.
Well, that's what I'm going to do to make it more customizable and make it more flexible.
So let's get into that in the next video.