So that's it. 2
Our first re-act application I knew at the beginning it started off awful slow. 3
It took us several sections just the content on the screen. 4
But I hope you've got a better understanding of how re-act works. 5
Now there's a couple of Qanta concepts I really want to draw your attention to here and wrap up. 6
First off some of the really big things that we covered First the difference between a class based component 7
and a functional component. 8
Remember a class is used whenever we want to have the concept of state in our component. 9
We can use functional components like our video list or a video list item. 10
Whenever we have a simple component that just takes some number of properties and returns returns some 11
amount of static GSX basically nothing really changes with these. 12
There are always the same functional components like this are super lightweight and super fast also 13
really easy. 14
It started with just the amount of code you have to write is dramatically less than a class based component 15
. 16
You know we've got class blah blah blah constructor blah blah blah it's kind of a you know crazy stuff 17
going on. 18
The next thing I want to talk about is state in general state is super confusing. 19
I admit it. 20
It's also a little bit more challenging because we're using this class based component here as opposed 21
to kind of the more dated or legacy style of creating a react component in which you might be familiar 22
with if you ever covered re-act before we use the create class syntax. 23
You might see in some older examples create class did a little bit more clear job of initializing your 24
state because there was a dedicated method for it called good initial state in a class based component 25
. 26
However we really set our state inside the constructor. 27
We don't get a special function to do that. 28
So this extra divide in here where in one place we're saying this state statement equals but then everywhere 29
else we're saying this not set state starts to get a little bit confusing. 30
Nonetheless I think that we did some pretty solid examples in here particularly with the with the search 31
bar. 32
Did you grasp with how to wire up a input with state is really step number one on grasping how state 33
works. 34
The number one thing to keep to be aware of a state is that whenever we change our state the component 35
instantly renders along with any children that this component contains as well. 36
Finally one of the last things I want remind you about is using import statements and export statements 37
. 38
Our index file here had several import statements and then we required files in from the components 39
directory. 40
Whenever we have a file that we're trying to require in or import in that we wrote we give a relative 41
path reference whereas wherever we use a library we just get the name of the library. 42
Finally last thing I want to talk about is how often we used callbacks to manipulate our our data here 43
in a re-act only application which is what we just built. 44
We used callbacks you know twice which for the application that we had four components total. 45
That's kind of a hefty number of callbacks right in many more or many redux themed applications as we'll 46
find out very shortly here. 47
We've much less frequently have callbacks like this were much less frequently passing down callbacks 48
and kind of this really kind of confusing fashion in which we did it here. 49
So I think that in later sections as we start to move away from callbacks and start to use the full 50
power of redux a lot of stuff will start to get a little bit more clear. 51
Nonetheless do you know that callbacks callbacks exist and they're a great way to do parent child communication 52
without a lot of extra overhead. 53
There actually is one last thing I want to mention in this section we've covered the topic of state 54
right several times in different components both in app and inside the search bar. 55
One thing I want to draw your attention to and this is going to get very relevant as we start covering 56
redux is that this is component level state. 57
This component app and this component search bar both have their own state and it solely belongs to 58
them. 59
Now we can pass callbacks you know that kind of change the state and we can pass data from the state 60
to other components but at the end of the day whenever we change say search STATE using search state 61
it only triggers a change on search bar. 62
You know it's very localized for a state that's going to kind of change a little bit and read docs and 63
we'll talk about it. 64
You know in the upcoming section about exactly how it's different. 65
Just be aware that when we're talking about state here in react it's very component level. 66
When we start to talk about it in redux it's going to be more application level so much higher level 67
of state. 68
But again we'll talk more about that in due time. 69
I just want to draw your attention to it before we get there. 70
OK. 71
So I hope you enjoyed this application. 72
Honestly when I first built it. 73
It came out much better than I was expecting. 74
You know obviously I was expecting a lot but it came out pretty well I think in some regards it's actually 75
a lot easier to use than youtube search because it's instantaneous. 76
You know you can click the results right here on the right and you play the video instantly as opposed 77
to YouTube where you kind of get that full page load. 78
You know it's this interface right here is almost a little bit faster than using YouTube. 79
So it was really a pleasure to put together. 80
All right. 81
So with this review all done let's get started on redux in the next section.