In the last few sections we've covered some very challenging content. 2
So I want to take a second to review where we are and where we're going and what we've covered so far 3
. 4
If you feel like you're totally comfortable with everything we've been talking about Feel free to skip 5
to the video. 6
Otherwise stick around for a little bit. 7
So to review. 8
We're building an application that will allow users to search for YouTube videos. 9
So far we've covered numerous core re-act topics including GSX components and state inside of our search 10
bar. 11
Some of these topics have been interwoven with ESX for example we've discussed classes aero functions 12
and import and export statements. 13
We also signed up for the YouTube API. 14
So in particular the section I want to review our apps current structure first our app starts inside 15
of index stock jaywalks where we define a base component called app index imports the component search 16
bar into it and then renders it inside of its render method. 17
Or is the inside of the app component right here right now. 18
App is a functional component because it doesn't have any concept of state. 19
The search bar component and the app component demonstrate two different types of components and re-act 20
a class based component and a functional based component class based components are used to whenever 21
we have a component that needs to be aware of state in some fashion. 22
So your data is changing over time. 23
We're reacting to user events and we need to keep track of you know some aspect of state from render 24
past to render pass functional components are used whenever we're just taking in some information and 25
spitting out some GSX also very important to note that a functional component can contain a class based 26
component totally fine. 27
Right now our component is functional but that's probably going to change later on whenever we start 28
to import videos from the YouTube API. 29
Finally our search bar component makes use of state by updating the user input whenever the state changes 30
whenever the user enters some text. 31
We first update the state which causes the entire component to re render. 32
We made the component the input element here a controlled component by telling it to receive its value 33
from state. 34
So believe it or not in everything we talked about so far you know functional components and class based 35
components and state and GSX is probably 80 percent of the real core re-act topics. 36
So we've gone through some like really slow process so far but the remaining amount of this app is actually 37
going to go by much more quickly since we've gotten through a lot of the tough stuff already. 38
Reactor's really actually quite famous for having a very Loew's API surface area. 39
You know if you compare react to say backbone or angular the list of methods included in backbone you 40
know the different functionality of the framework is tremendous. 41
It's huge in scope. 42
Same with angular while you know relatively tremendous compared to react where it's really very small 43
function very small API surface the number of topics you need to understand is far fewer to get started 44
. 45
OK so now that we have done a little bit of review here a little bit of breather Let's get continuing 46
in the next section