1

00:00:00,870  -->  00:00:06,690
In the last section we completed a solid look at GSX and discussed what its purposes and this section

2

00:00:06,810  -->  00:00:11,790
will take the GSX been returned from our component and make sure that it ends up in the dorm so our

3

00:00:11,790  -->  00:00:13,040
users can see it.

4

00:00:13,350  -->  00:00:19,290
So that's really step to our second comment here rendering a component to the dog is simple in theory

5

00:00:19,590  -->  00:00:23,370
but in practice it involves some kind of confusing looking code.

6

00:00:23,400  -->  00:00:24,480
So here's something to do.

7

00:00:24,480  -->  00:00:26,420
I'm going to take a first stab at it.

8

00:00:26,520  -->  00:00:30,900
The first half is going to be wrong but I want you to see the error message that error messages that

9

00:00:30,900  -->  00:00:33,770
we get and then see what we're going to do to fix it.

10

00:00:34,020  -->  00:00:39,180
Again interpreting the error messages is key to developing your own Yacoub So I really want you to see

11

00:00:39,180  -->  00:00:45,600
them we'll do this Airfix error and then fix cycle probably about three or four times to get this working

12

00:00:45,620  -->  00:00:45,960
.

13

00:00:46,290  -->  00:00:48,450
So here's my first naive try.

14

00:00:48,480  -->  00:00:52,280
We're going to put some kind of a screen and we'll talk about what's going on.

15

00:00:52,380  -->  00:00:54,120
I'm going to say react.

16

00:00:54,240  -->  00:00:58,950
Please render like element to the dom so I'll say react.

17

00:00:59,040  -->  00:01:03,930
Please render the component out and you know let's just go and see what happens.

18

00:01:04,170  -->  00:01:10,380
So I'm going to save this flip open to the browser and I get re-act is not defined.

19

00:01:10,650  -->  00:01:11,540
All right.

20

00:01:11,760  -->  00:01:14,880
So not not a big surprise there.

21

00:01:16,020  -->  00:01:21,870
So I'm back over here the code editor and we can see that you know hey I got re-active but I don't really

22

00:01:21,870  -->  00:01:25,460
have anything else in this file that's defined react.

23

00:01:25,830  -->  00:01:31,960
And as far as I know looking at index studied CML I'm not importing the re-act library.

24

00:01:31,980  -->  00:01:33,560
So you know where is this.

25

00:01:33,690  -->  00:01:37,080
What is my expectation that react should be defined here.

26

00:01:37,500  -->  00:01:42,660
Well when we write six code which we're doing here this is yes six that we're writing.

27

00:01:42,660  -->  00:01:49,620
We have access to a concept called javascript modules javascript modules encapsulates the idea that

28

00:01:49,680  -->  00:01:56,700
all the code that we write in separate files is siloed we're separated from other code that we write

29

00:01:56,790  -->  00:02:03,770
in other libraries that we install in our project code that is declared in other files that we produce

30

00:02:03,940  -->  00:02:10,410
will have zero contact with this file unless we explicitly say hey I want access to some code in that

31

00:02:10,470  -->  00:02:12,900
other file over there.

32

00:02:13,410  -->  00:02:18,270
When I say silo I mean to say that we can't make reference to any variables in that other file.

33

00:02:18,330  -->  00:02:23,940
So if we have some other file and we want to get access to this app variable we don't have access to

34

00:02:23,940  -->  00:02:24,060
it.

35

00:02:24,060  -->  00:02:29,800
We have to explicitly say hey I want access to app inside of this other file over here.

36

00:02:30,210  -->  00:02:35,190
So even though re-act really is already installed in our project you know we installed as a dependency

37

00:02:35,190  -->  00:02:37,540
earlier on when we ran NPM install.

38

00:02:37,710  -->  00:02:44,640
We have to explicitly say hey I want access to react inside of this file right here.

39

00:02:44,760  -->  00:02:48,150
So luckily for me this connection is really pretty straightforward.

40

00:02:48,540  -->  00:02:55,800
At the top we just have to write one line one one line of code to say hey please go and get re-act from

41

00:02:55,800  -->  00:03:03,570
the you know on my install modules which you know really are right here go get react and give me access

42

00:03:03,570  -->  00:03:04,870
to it in this file.

43

00:03:05,190  -->  00:03:13,950
So to do that all we have to do is write import re-act from re-act knows the lack of parentheses here

44

00:03:13,950  -->  00:03:14,690
.

45

00:03:15,180  -->  00:03:22,950
We can read this line as literally go find the library called re-act installed in my application as

46

00:03:22,950  -->  00:03:26,550
dependency which is installed in this node modules folder.

47

00:03:26,550  -->  00:03:28,340
You can see re-act right here.

48

00:03:28,590  -->  00:03:34,010
Go and find that library and assign it to the variable react.

49

00:03:34,020  -->  00:03:41,070
Now when are transpire the same library that's turning our GSX into normal javascript runs this file

50

00:03:41,070  -->  00:03:41,130
.

51

00:03:41,160  -->  00:03:44,640
It will say to itself ok they need to react inside this file.

52

00:03:44,850  -->  00:03:49,820
I need to make sure that this file has access to the variable react.

53

00:03:50,440  -->  00:03:53,490
OK so now we've imported reacting to this file.

54

00:03:53,550  -->  00:03:57,540
Let's go ahead and give it another shot in the browser in the next section.

55

00:03:57,540  -->  00:03:58,510
I'll see you there.