In the last section we successfully created a new component search bar exploited it and then rendered 2
it inside of our app. 3
In this section we're going to start to explore creating a component not with a function but with an 4
easy access class. 5
So check out our search bar right now. 6
Right now it's a plain javascript function. 7
Some information goes in you know maybe we've got some arguments in here in the future. 8
And the only thing that comes out is some GSX and that GSX is what eventually ends up being rendered 9
to the DOM. 10
This is a component that we call a functional component. 11
It's called a functional component because it literally is a function one function. 12
Some info goes in some jacet X comes out. 13
That's it. 14
Very simple. 15
There's another type of component in re-act which is called a class component a class component is used 16
whenever you want a component to have some type of internal record keeping some ability for it to be 17
aware of itself. 18
And what's happened to it since it's been rendered because users are going to be typing into this input 19
or you know this component is input right here our component really needs to have some ability to introspect 20
itself someone believes to tell other parts the application stuff like Hey the user just typed something 21
into my input here and here is exactly what they typed. 22
You know it needs the ability to be all that more aware. 23
So to upgrade this component from a functional component to a component with some you know more intelligence 24
to it some greater complexity. 25
We're going to create what's called a class based component and we are going to create it using a six 26
class and six class is not like a CSSA class at all. 27
Totally different. 28
It's an actual javascript object with properties and methods to it. 29
So let's go ahead and do the refactoring from a functional component to a class based component and 30
then we'll talk about what some of the differences are. 31
So to start Let's go ahead and delete everything we've got right here and we're going to start by declaring 32
a new class a javascript class by writing class search bar and then curly braces like so. 33
So this declares a new class with name search bar. 34
This class is really just a plain javascript object of sorts. 35
No you know a special behavior to it. 36
We could declare a new instance of the class by writing something like new search bar. 37
OK we're going to enhance this thing's behavior by extending it with you react based component class 38
. 39
And you know again just bear with me for a second here. 40
After class search bar. 41
We're gonna do another space and then write extends re-act dot component like so. 42
So this can be read as. 43
Define a new class called search bar and give it access to all of the functionality that re-act component 44
has. 45
In other words it gives our search bar a bunch of functionality from the react doc component class when 46
we use a class based method. 47
We still have to give it the ability to render itself somehow. 48
You need to return some GSX to do so will define a method on the class called the render method. 49
Every re-act component that we create That's class based must have a defined render method so will define 50
it by writing method or seeing me render them parentheses a space and then curly braces. 51
This is the. 52
This is the syntax that we use for finding methods on a class. 53
Notice that it looks different from a normal javascript object. 54
You know we don't have a colon after render for example. 55
It might not look like you know it's a function here because we don't have that colon. 56
You know we don't have something it looks like colon function. 57
But trust me this is still a function it's still a method here. 58
So now whenever our app component tries to render a search bar instead of just calling a normal function 59
you know which it was before it's going to try it's going to call this render function instead. 60
So whenever we define a render function and every class must ever and their function we must return 61
some GSX. 62
Otherwise we'll end up with an air. 63
So let's go ahead and make sure we follow that rule by adding some GSX that will return from this render 64
method will right return input like so. 65
All right so this looks pretty good. 66
Let's go ahead and save it and give it a run in the browser. 67
And we still get our input on the screen. 68
Cool. 69
OK. 70
Two more things to talk about here. 71
First we can clean up some of the code in here by using a little bit more. 72
Yes 6 syntax. 73
So let's do that first. 74
Right now we have class search bar extends re-act doc component. 75
We can clean up this reference right here by using a little bit of six syntax instead of writing re-act 76
component. 77
If we go back up to our import statement at the top where we have import react at a comma and then curly 78
braces component then we'll drop the re-act dot from component right here. 79
So this is just you know syntax syntactic sugar. 80
This is the exact same thing as doing something like Konst component equals reactive component. 81
The curly braces here just means import react and pull off the property component as a variable called 82
component. 83
OK so I don't go out and delete this. 84
There we go. 85
OK so I was the first one to talk about now the second thing I want to talk about here is just reiterate 86
what's going on with the class here. 87
Previously our search bar was a functional component. 88
It was really just a you know what we would refer to as kind of a dumb component. 89
It was just a function that we could call and it would return some plain GSX didn't have any ability 90
to really be aware of its surroundings aware of its state or have the ability to communicate with other 91
components very effectively because we want this component to be able to communicate with your other 92
components that were going to be creating to say you know essentially something like Hey the user just 93
typed in here and here is what they just typed. 94
We decided to promote the search bar from a functional component to a class based component. 95
When we write a class based component we write class the name of that component and then we extend re-act 96
component and that basically gives this class a bunch of added functionality. 97
Whenever we create a class component we must always define a render method and return some GSX. 98
Otherwise you'll end up with an error to render a class based component total same practice as a functional 99
base component. 100
No difference whatsoever. 101
So we're still going to just export search far and we still are over here in index or G-S we just write 102
search bar inside of some GSX tags and we're good to go. 103
So deciding when to use a class based component versus a functional based component tends to be you 104
know kind of a little bit challenging. 105
In general I really recommend you start off with a functional component and only when you decide that 106
you need like added functionality should you start to factor it to a class as we go through vs application 107
. 108
I'll definitely point out where it's appropriate to use a functional vs. a class based component so 109
don't sweat that part. 110
We'll definitely talk about when to use one versus the other. 111
OK so now that our refactor is done and everything still looks good over here in the browser Let's continue 112
onto the next section.