1

00:00:01,470  -->  00:00:02,180
So that's it.

2

00:00:02,190  -->  00:00:06,710
Our first re-act application I knew at the beginning it started off awful slow.

3

00:00:06,720  -->  00:00:09,490
It took us several sections just the content on the screen.

4

00:00:09,490  -->  00:00:12,060
But I hope you've got a better understanding of how re-act works.

5

00:00:12,060  -->  00:00:17,280
Now there's a couple of Qanta concepts I really want to draw your attention to here and wrap up.

6

00:00:17,280  -->  00:00:23,490
First off some of the really big things that we covered First the difference between a class based component

7

00:00:23,550  -->  00:00:25,450
and a functional component.

8

00:00:25,750  -->  00:00:31,430
Remember a class is used whenever we want to have the concept of state in our component.

9

00:00:31,440  -->  00:00:36,730
We can use functional components like our video list or a video list item.

10

00:00:36,840  -->  00:00:42,390
Whenever we have a simple component that just takes some number of properties and returns returns some

11

00:00:42,390  -->  00:00:46,550
amount of static GSX basically nothing really changes with these.

12

00:00:46,560  -->  00:00:52,710
There are always the same functional components like this are super lightweight and super fast also

13

00:00:52,710  -->  00:00:53,150
really easy.

14

00:00:53,160  -->  00:00:58,200
It started with just the amount of code you have to write is dramatically less than a class based component

15

00:00:58,200  -->  00:00:58,260
.

16

00:00:58,260  -->  00:01:03,030
You know we've got class blah blah blah constructor blah blah blah it's kind of a you know crazy stuff

17

00:01:03,030  -->  00:01:04,810
going on.

18

00:01:05,370  -->  00:01:09,890
The next thing I want to talk about is state in general state is super confusing.

19

00:01:09,930  -->  00:01:11,660
I admit it.

20

00:01:12,120  -->  00:01:17,370
It's also a little bit more challenging because we're using this class based component here as opposed

21

00:01:17,370  -->  00:01:22,470
to kind of the more dated or legacy style of creating a react component in which you might be familiar

22

00:01:22,470  -->  00:01:26,690
with if you ever covered re-act before we use the create class syntax.

23

00:01:26,760  -->  00:01:32,280
You might see in some older examples create class did a little bit more clear job of initializing your

24

00:01:32,280  -->  00:01:38,080
state because there was a dedicated method for it called good initial state in a class based component

25

00:01:38,080  -->  00:01:38,140
.

26

00:01:38,130  -->  00:01:41,340
However we really set our state inside the constructor.

27

00:01:41,340  -->  00:01:43,350
We don't get a special function to do that.

28

00:01:43,530  -->  00:01:49,410
So this extra divide in here where in one place we're saying this state statement equals but then everywhere

29

00:01:49,410  -->  00:01:53,890
else we're saying this not set state starts to get a little bit confusing.

30

00:01:54,630  -->  00:01:59,790
Nonetheless I think that we did some pretty solid examples in here particularly with the with the search

31

00:01:59,790  -->  00:02:00,720
bar.

32

00:02:00,720  -->  00:02:06,570
Did you grasp with how to wire up a input with state is really step number one on grasping how state

33

00:02:06,570  -->  00:02:07,490
works.

34

00:02:07,710  -->  00:02:13,110
The number one thing to keep to be aware of a state is that whenever we change our state the component

35

00:02:13,140  -->  00:02:21,300
instantly renders along with any children that this component contains as well.

36

00:02:21,300  -->  00:02:26,790
Finally one of the last things I want remind you about is using import statements and export statements

37

00:02:26,790  -->  00:02:27,200
.

38

00:02:27,240  -->  00:02:32,820
Our index file here had several import statements and then we required files in from the components

39

00:02:32,820  -->  00:02:33,730
directory.

40

00:02:33,990  -->  00:02:40,290
Whenever we have a file that we're trying to require in or import in that we wrote we give a relative

41

00:02:40,290  -->  00:02:48,300
path reference whereas wherever we use a library we just get the name of the library.

42

00:02:48,420  -->  00:02:55,080
Finally last thing I want to talk about is how often we used callbacks to manipulate our our data here

43

00:02:55,770  -->  00:02:59,550
in a re-act only application which is what we just built.

44

00:02:59,550  -->  00:03:04,650
We used callbacks you know twice which for the application that we had four components total.

45

00:03:04,720  -->  00:03:11,940
That's kind of a hefty number of callbacks right in many more or many redux themed applications as we'll

46

00:03:12,030  -->  00:03:13,810
find out very shortly here.

47

00:03:13,890  -->  00:03:18,570
We've much less frequently have callbacks like this were much less frequently passing down callbacks

48

00:03:18,570  -->  00:03:22,610
and kind of this really kind of confusing fashion in which we did it here.

49

00:03:22,830  -->  00:03:27,060
So I think that in later sections as we start to move away from callbacks and start to use the full

50

00:03:27,060  -->  00:03:30,630
power of redux a lot of stuff will start to get a little bit more clear.

51

00:03:30,660  -->  00:03:36,870
Nonetheless do you know that callbacks callbacks exist and they're a great way to do parent child communication

52

00:03:37,230  -->  00:03:39,660
without a lot of extra overhead.

53

00:03:40,620  -->  00:03:48,480
There actually is one last thing I want to mention in this section we've covered the topic of state

54

00:03:48,660  -->  00:03:53,960
right several times in different components both in app and inside the search bar.

55

00:03:53,970  -->  00:03:58,020
One thing I want to draw your attention to and this is going to get very relevant as we start covering

56

00:03:58,020  -->  00:04:03,480
redux is that this is component level state.

57

00:04:03,480  -->  00:04:10,770
This component app and this component search bar both have their own state and it solely belongs to

58

00:04:10,770  -->  00:04:11,720
them.

59

00:04:11,730  -->  00:04:17,220
Now we can pass callbacks you know that kind of change the state and we can pass data from the state

60

00:04:17,220  -->  00:04:22,830
to other components but at the end of the day whenever we change say search STATE using search state

61

00:04:23,190  -->  00:04:25,120
it only triggers a change on search bar.

62

00:04:25,140  -->  00:04:30,120
You know it's very localized for a state that's going to kind of change a little bit and read docs and

63

00:04:30,120  -->  00:04:31,350
we'll talk about it.

64

00:04:31,450  -->  00:04:34,140
You know in the upcoming section about exactly how it's different.

65

00:04:34,140  -->  00:04:40,380
Just be aware that when we're talking about state here in react it's very component level.

66

00:04:40,380  -->  00:04:45,240
When we start to talk about it in redux it's going to be more application level so much higher level

67

00:04:45,240  -->  00:04:45,880
of state.

68

00:04:45,990  -->  00:04:48,030
But again we'll talk more about that in due time.

69

00:04:48,030  -->  00:04:50,530
I just want to draw your attention to it before we get there.

70

00:04:50,930  -->  00:04:51,290
OK.

71

00:04:51,300  -->  00:04:53,590
So I hope you enjoyed this application.

72

00:04:53,760  -->  00:04:55,480
Honestly when I first built it.

73

00:04:55,470  -->  00:04:57,460
It came out much better than I was expecting.

74

00:04:57,480  -->  00:05:01,920
You know obviously I was expecting a lot but it came out pretty well I think in some regards it's actually

75

00:05:01,920  -->  00:05:05,750
a lot easier to use than youtube search because it's instantaneous.

76

00:05:05,790  -->  00:05:11,940
You know you can click the results right here on the right and you play the video instantly as opposed

77

00:05:11,940  -->  00:05:14,010
to YouTube where you kind of get that full page load.

78

00:05:14,010  -->  00:05:17,400
You know it's this interface right here is almost a little bit faster than using YouTube.

79

00:05:17,400  -->  00:05:19,710
So it was really a pleasure to put together.

80

00:05:19,980  -->  00:05:20,390
All right.

81

00:05:20,430  -->  00:05:24,490
So with this review all done let's get started on redux in the next section.