1

00:00:00,780  -->  00:00:07,650
OK so in the last section we learn that when we write a component out just the word is just a variable

2

00:00:07,650  -->  00:00:08,380
.

3

00:00:08,460  -->  00:00:10,600
This is a class of a component right here.

4

00:00:10,620  -->  00:00:14,950
So it's just a type that produces instances to make an instance.

5

00:00:15,180  -->  00:00:19,950
We just have to wrap it with GSX tags that'll make it an instance of our component.

6

00:00:20,130  -->  00:00:21,210
So not too bad.

7

00:00:21,210  -->  00:00:22,140
Pretty straightforward.

8

00:00:22,200  -->  00:00:27,560
General rule of thumb whenever we try to make use of a component just wrap it in GSX tags.

9

00:00:27,570  -->  00:00:29,050
And we're good to go.

10

00:00:29,130  -->  00:00:35,510
We still have an error message though that says Target containers not a down element.

11

00:00:35,850  -->  00:00:40,490
So let's look back at our index start GSX file.

12

00:00:42,390  -->  00:00:46,720
Let's read over our current code and compare the comment that we have above it.

13

00:00:46,770  -->  00:00:49,640
So we've got this first coming up here.

14

00:00:49,680  -->  00:00:53,560
It says create a new component this compiler should produce AMH TNL.

15

00:00:53,640  -->  00:00:59,940
So yeah looks like we are you know making component and we are turning some GSX which you know gets

16

00:00:59,940  -->  00:01:02,420
turned into age T.M. by react.

17

00:01:02,730  -->  00:01:06,060
And then secondly we have take this components generate age T.M..

18

00:01:06,120  -->  00:01:13,590
So that's you know here's the component and put it in the DOM you know put it on the page so that second

19

00:01:13,590  -->  00:01:15,630
step here is really missing.

20

00:01:15,630  -->  00:01:19,890
We're saying put it on the page but we're not actually telling re-act where to put that component on

21

00:01:19,890  -->  00:01:21,840
the page right.

22

00:01:21,840  -->  00:01:23,670
The target container is not a dom element.

23

00:01:23,680  -->  00:01:24,600
In other words.

24

00:01:24,720  -->  00:01:25,200
OK.

25

00:01:25,230  -->  00:01:29,790
You know re-active same here I'm trying to render this but I have no idea where to render it to.

26

00:01:30,090  -->  00:01:35,260
So we can fix this really easily react or just takes a second argument here.

27

00:01:36,000  -->  00:01:41,160
And that second argument is a reference to an existing Dom node on the page.

28

00:01:41,160  -->  00:01:44,930
So you can think of this as like a target container or a target domino.

29

00:01:44,950  -->  00:01:51,810
It says hey when you render this component no app I want you to render it produce some H.T. mail and

30

00:01:51,810  -->  00:01:57,450
then insert that HCM out into this you know we'll put it in here in a second.

31

00:01:57,600  -->  00:02:01,530
This element that exists in our it's HTML document.

32

00:02:01,530  -->  00:02:10,560
So that means that we need a existing T.M. node to render this to sign I open up index h t m l and inside

33

00:02:10,560  -->  00:02:15,270
of here you'll notice that we have this very top level div with class container.

34

00:02:15,630  -->  00:02:19,710
So this actually looks like you know you might guess this is a really good location and render a component

35

00:02:19,740  -->  00:02:20,360
too.

36

00:02:20,670  -->  00:02:25,800
In most re-act deaths you're going to see something that looks just like this will have you know maybe

37

00:02:25,800  -->  00:02:31,440
your body tag and then generally you're going to have a div with something like class container or a

38

00:02:31,440  -->  00:02:38,670
class app or you know class or something maybe even ID something and that div or whatever element it

39

00:02:39,060  -->  00:02:44,830
ends up being it's usually a div is the root node of the entire re-act application.

40

00:02:44,850  -->  00:02:49,290
So as we start to write more and more components and we've got like you know say 20 or 30 different

41

00:02:49,290  -->  00:02:54,790
components being rendered on the screen in any given time they all end up being a child of or you know

42

00:02:54,810  -->  00:03:00,090
nested inside of this very root container element.

43

00:03:00,120  -->  00:03:05,220
So let's look back over to our render statement here and all we have to do is pass a reference to that

44

00:03:05,220  -->  00:03:06,340
container.

45

00:03:06,960  -->  00:03:13,860
So we'll say documents doc queries selector dot container.

46

00:03:14,250  -->  00:03:21,540
So this will say OK go find that div with class container and tried to render the app component into

47

00:03:21,540  -->  00:03:22,970
that div.

48

00:03:23,070  -->  00:03:25,120
All right so let's save this.

49

00:03:25,530  -->  00:03:26,420
Flip back over.

50

00:03:26,430  -->  00:03:29,670
Refresh and we'll hot dog.

51

00:03:29,950  -->  00:03:31,290
We got high on the screen.

52

00:03:31,290  -->  00:03:36,810
That was one heck of a lot of work just to get high on the screen but hopefully we learn something along

53

00:03:36,810  -->  00:03:38,880
the way.

54

00:03:38,880  -->  00:03:40,760
So we'll do a review of what's going on here.

55

00:03:40,770  -->  00:03:45,960
But there's one that will change I want to make it sound right now our component is looking like you

56

00:03:45,960  -->  00:03:51,420
know just a normal function we call it return some GSX we're good to go you know pretty straight forward

57

00:03:51,420  -->  00:03:52,320
here.

58

00:03:52,380  -->  00:03:59,830
So I want to take this opportunity to introduce a new piece of syntax a piece of E-6 syntax.

59

00:04:00,660  -->  00:04:03,810
I'm going to drop the function key word.

60

00:04:03,810  -->  00:04:04,720
Still eat it.

61

00:04:04,830  -->  00:04:08,560
And then after it we're going to put a space we're going to write what looks like an arrow.

62

00:04:08,580  -->  00:04:13,130
We call this a fat arrow as equals and then a greater than symbol.

63

00:04:13,860  -->  00:04:18,650
So this code is nearly identical to what we had before.

64

00:04:18,660  -->  00:04:20,250
It's still a function.

65

00:04:20,250  -->  00:04:25,520
It's just a different way of declaring a function using new yes six syntax.

66

00:04:25,650  -->  00:04:28,220
So this is still a function right here.

67

00:04:28,230  -->  00:04:32,460
Beyond the difference in syntax there is also very good.

68

00:04:32,460  -->  00:04:37,850
The only difference between this and using the function keyword is the value of this.

69

00:04:37,890  -->  00:04:42,640
So you know like javascript this is slightly different inside the function.

70

00:04:42,660  -->  00:04:45,370
So we'll talk more about that later on.

71

00:04:45,870  -->  00:04:51,450
Ulo you're going to end up seeing the fat error like this in place of function all over the place and

72

00:04:51,450  -->  00:04:53,730
react in react.

73

00:04:53,730  -->  00:04:58,440
We sometimes need to create several functions inside of a single component and so you know it really

74

00:04:58,440  -->  00:05:03,100
helps to have more terse and more compact syntax for defining a function.

75

00:05:03,510  -->  00:05:08,380
So for now just remember that you know more or less except for the value of this.

76

00:05:08,460  -->  00:05:14,470
We'll talk about that later using a fat area like this is identical to using the function keyword.

77

00:05:14,960  -->  00:05:15,840
OK.

78

00:05:16,230  -->  00:05:20,730
So again you're probably thinking this is like the most work I've ever had to do you know get hello

79

00:05:20,730  -->  00:05:22,430
world basically up on the screen.

80

00:05:22,440  -->  00:05:23,910
I know I know.

81

00:05:24,210  -->  00:05:28,270
Nonetheless it's really important to me that you understand the reasons behind the code we write.

82

00:05:28,290  -->  00:05:33,270
You know I don't like just tossing code up on the screen saying OK you know hey look stuff popped up

83

00:05:33,270  -->  00:05:34,370
on the screen.

84

00:05:34,410  -->  00:05:36,730
Only by kind of having a little bit of challenge there.

85

00:05:36,780  -->  00:05:40,690
Talking about the code that we're writing do you really get to understand the concepts.

86

00:05:41,010  -->  00:05:46,710
So you know by figuring out the why behind react and redux you really have an easier time in the future

87

00:05:46,710  -->  00:05:49,290
of solving issues that come up in your own projects.

88

00:05:49,560  -->  00:05:52,630
So now that we have a compound on the screen let's continue in the next section.