OK so in the last section we learn that when we write a component out just the word is just a variable 2
. 3
This is a class of a component right here. 4
So it's just a type that produces instances to make an instance. 5
We just have to wrap it with GSX tags that'll make it an instance of our component. 6
So not too bad. 7
Pretty straightforward. 8
General rule of thumb whenever we try to make use of a component just wrap it in GSX tags. 9
And we're good to go. 10
We still have an error message though that says Target containers not a down element. 11
So let's look back at our index start GSX file. 12
Let's read over our current code and compare the comment that we have above it. 13
So we've got this first coming up here. 14
It says create a new component this compiler should produce AMH TNL. 15
So yeah looks like we are you know making component and we are turning some GSX which you know gets 16
turned into age T.M. by react. 17
And then secondly we have take this components generate age T.M.. 18
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
step here is really missing. 20
We're saying put it on the page but we're not actually telling re-act where to put that component on 21
the page right. 22
The target container is not a dom element. 23
In other words. 24
OK. 25
You know re-active same here I'm trying to render this but I have no idea where to render it to. 26
So we can fix this really easily react or just takes a second argument here. 27
And that second argument is a reference to an existing Dom node on the page. 28
So you can think of this as like a target container or a target domino. 29
It says hey when you render this component no app I want you to render it produce some H.T. mail and 30
then insert that HCM out into this you know we'll put it in here in a second. 31
This element that exists in our it's HTML document. 32
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
of here you'll notice that we have this very top level div with class container. 34
So this actually looks like you know you might guess this is a really good location and render a component 35
too. 36
In most re-act deaths you're going to see something that looks just like this will have you know maybe 37
your body tag and then generally you're going to have a div with something like class container or a 38
class app or you know class or something maybe even ID something and that div or whatever element it 39
ends up being it's usually a div is the root node of the entire re-act application. 40
So as we start to write more and more components and we've got like you know say 20 or 30 different 41
components being rendered on the screen in any given time they all end up being a child of or you know 42
nested inside of this very root container element. 43
So let's look back over to our render statement here and all we have to do is pass a reference to that 44
container. 45
So we'll say documents doc queries selector dot container. 46
So this will say OK go find that div with class container and tried to render the app component into 47
that div. 48
All right so let's save this. 49
Flip back over. 50
Refresh and we'll hot dog. 51
We got high on the screen. 52
That was one heck of a lot of work just to get high on the screen but hopefully we learn something along 53
the way. 54
So we'll do a review of what's going on here. 55
But there's one that will change I want to make it sound right now our component is looking like you 56
know just a normal function we call it return some GSX we're good to go you know pretty straight forward 57
here. 58
So I want to take this opportunity to introduce a new piece of syntax a piece of E-6 syntax. 59
I'm going to drop the function key word. 60
Still eat it. 61
And then after it we're going to put a space we're going to write what looks like an arrow. 62
We call this a fat arrow as equals and then a greater than symbol. 63
So this code is nearly identical to what we had before. 64
It's still a function. 65
It's just a different way of declaring a function using new yes six syntax. 66
So this is still a function right here. 67
Beyond the difference in syntax there is also very good. 68
The only difference between this and using the function keyword is the value of this. 69
So you know like javascript this is slightly different inside the function. 70
So we'll talk more about that later on. 71
Ulo you're going to end up seeing the fat error like this in place of function all over the place and 72
react in react. 73
We sometimes need to create several functions inside of a single component and so you know it really 74
helps to have more terse and more compact syntax for defining a function. 75
So for now just remember that you know more or less except for the value of this. 76
We'll talk about that later using a fat area like this is identical to using the function keyword. 77
OK. 78
So again you're probably thinking this is like the most work I've ever had to do you know get hello 79
world basically up on the screen. 80
I know I know. 81
Nonetheless it's really important to me that you understand the reasons behind the code we write. 82
You know I don't like just tossing code up on the screen saying OK you know hey look stuff popped up 83
on the screen. 84
Only by kind of having a little bit of challenge there. 85
Talking about the code that we're writing do you really get to understand the concepts. 86
So you know by figuring out the why behind react and redux you really have an easier time in the future 87
of solving issues that come up in your own projects. 88
So now that we have a compound on the screen let's continue in the next section.