In the last section we completed a solid look at GSX and discussed what its purposes and this section 2
will take the GSX been returned from our component and make sure that it ends up in the dorm so our 3
users can see it. 4
So that's really step to our second comment here rendering a component to the dog is simple in theory 5
but in practice it involves some kind of confusing looking code. 6
So here's something to do. 7
I'm going to take a first stab at it. 8
The first half is going to be wrong but I want you to see the error message that error messages that 9
we get and then see what we're going to do to fix it. 10
Again interpreting the error messages is key to developing your own Yacoub So I really want you to see 11
them we'll do this Airfix error and then fix cycle probably about three or four times to get this working 12
. 13
So here's my first naive try. 14
We're going to put some kind of a screen and we'll talk about what's going on. 15
I'm going to say react. 16
Please render like element to the dom so I'll say react. 17
Please render the component out and you know let's just go and see what happens. 18
So I'm going to save this flip open to the browser and I get re-act is not defined. 19
All right. 20
So not not a big surprise there. 21
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
have anything else in this file that's defined react. 23
And as far as I know looking at index studied CML I'm not importing the re-act library. 24
So you know where is this. 25
What is my expectation that react should be defined here. 26
Well when we write six code which we're doing here this is yes six that we're writing. 27
We have access to a concept called javascript modules javascript modules encapsulates the idea that 28
all the code that we write in separate files is siloed we're separated from other code that we write 29
in other libraries that we install in our project code that is declared in other files that we produce 30
will have zero contact with this file unless we explicitly say hey I want access to some code in that 31
other file over there. 32
When I say silo I mean to say that we can't make reference to any variables in that other file. 33
So if we have some other file and we want to get access to this app variable we don't have access to 34
it. 35
We have to explicitly say hey I want access to app inside of this other file over here. 36
So even though re-act really is already installed in our project you know we installed as a dependency 37
earlier on when we ran NPM install. 38
We have to explicitly say hey I want access to react inside of this file right here. 39
So luckily for me this connection is really pretty straightforward. 40
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
the you know on my install modules which you know really are right here go get react and give me access 42
to it in this file. 43
So to do that all we have to do is write import re-act from re-act knows the lack of parentheses here 44
. 45
We can read this line as literally go find the library called re-act installed in my application as 46
dependency which is installed in this node modules folder. 47
You can see re-act right here. 48
Go and find that library and assign it to the variable react. 49
Now when are transpire the same library that's turning our GSX into normal javascript runs this file 50
. 51
It will say to itself ok they need to react inside this file. 52
I need to make sure that this file has access to the variable react. 53
OK so now we've imported reacting to this file. 54
Let's go ahead and give it another shot in the browser in the next section. 55
I'll see you there.