1

00:00:00,880  -->  00:00:04,120
In the last few sections we've covered some very challenging content.

2

00:00:04,170  -->  00:00:08,190
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

00:00:08,190  -->  00:00:09,010
.

4

00:00:09,090  -->  00:00:12,600
If you feel like you're totally comfortable with everything we've been talking about Feel free to skip

5

00:00:12,600  -->  00:00:13,250
to the video.

6

00:00:13,290  -->  00:00:15,690
Otherwise stick around for a little bit.

7

00:00:15,690  -->  00:00:16,530
So to review.

8

00:00:16,560  -->  00:00:21,380
We're building an application that will allow users to search for YouTube videos.

9

00:00:22,050  -->  00:00:31,320
So far we've covered numerous core re-act topics including GSX components and state inside of our search

10

00:00:31,320  -->  00:00:33,250
bar.

11

00:00:33,330  -->  00:00:40,920
Some of these topics have been interwoven with ESX for example we've discussed classes aero functions

12

00:00:41,550  -->  00:00:46,230
and import and export statements.

13

00:00:46,230  -->  00:00:48,690
We also signed up for the YouTube API.

14

00:00:49,350  -->  00:00:55,800
So in particular the section I want to review our apps current structure first our app starts inside

15

00:00:55,800  -->  00:01:04,350
of index stock jaywalks where we define a base component called app index imports the component search

16

00:01:04,350  -->  00:01:08,550
bar into it and then renders it inside of its render method.

17

00:01:08,590  -->  00:01:12,330
Or is the inside of the app component right here right now.

18

00:01:12,330  -->  00:01:19,000
App is a functional component because it doesn't have any concept of state.

19

00:01:19,170  -->  00:01:24,030
The search bar component and the app component demonstrate two different types of components and re-act

20

00:01:24,660  -->  00:01:32,100
a class based component and a functional based component class based components are used to whenever

21

00:01:32,100  -->  00:01:35,710
we have a component that needs to be aware of state in some fashion.

22

00:01:35,730  -->  00:01:38,000
So your data is changing over time.

23

00:01:38,100  -->  00:01:45,140
We're reacting to user events and we need to keep track of you know some aspect of state from render

24

00:01:45,150  -->  00:01:51,240
past to render pass functional components are used whenever we're just taking in some information and

25

00:01:51,240  -->  00:01:59,760
spitting out some GSX also very important to note that a functional component can contain a class based

26

00:01:59,760  -->  00:02:01,650
component totally fine.

27

00:02:02,220  -->  00:02:07,530
Right now our component is functional but that's probably going to change later on whenever we start

28

00:02:07,530  -->  00:02:10,980
to import videos from the YouTube API.

29

00:02:11,880  -->  00:02:19,770
Finally our search bar component makes use of state by updating the user input whenever the state changes

30

00:02:21,390  -->  00:02:23,160
whenever the user enters some text.

31

00:02:23,340  -->  00:02:28,620
We first update the state which causes the entire component to re render.

32

00:02:28,740  -->  00:02:36,690
We made the component the input element here a controlled component by telling it to receive its value

33

00:02:36,690  -->  00:02:38,440
from state.

34

00:02:38,580  -->  00:02:44,940
So believe it or not in everything we talked about so far you know functional components and class based

35

00:02:44,940  -->  00:02:51,450
components and state and GSX is probably 80 percent of the real core re-act topics.

36

00:02:51,630  -->  00:02:57,010
So we've gone through some like really slow process so far but the remaining amount of this app is actually

37

00:02:57,010  -->  00:03:02,110
going to go by much more quickly since we've gotten through a lot of the tough stuff already.

38

00:03:02,430  -->  00:03:07,240
Reactor's really actually quite famous for having a very Loew's API surface area.

39

00:03:07,380  -->  00:03:13,110
You know if you compare react to say backbone or angular the list of methods included in backbone you

40

00:03:13,110  -->  00:03:17,550
know the different functionality of the framework is tremendous.

41

00:03:17,560  -->  00:03:18,380
It's huge in scope.

42

00:03:18,390  -->  00:03:23,520
Same with angular while you know relatively tremendous compared to react where it's really very small

43

00:03:23,520  -->  00:03:30,150
function very small API surface the number of topics you need to understand is far fewer to get started

44

00:03:30,160  -->  00:03:30,610
.

45

00:03:31,060  -->  00:03:36,060
OK so now that we have done a little bit of review here a little bit of breather Let's get continuing

46

00:03:36,060  -->  00:03:36,940
in the next section