In the last section we fixed an error message by using react Dom to our render a component to the DOM 2
instead of the re-act library. 3
Remember re-act arm is used to interact with the actual Dom while re-act is used to create and manage 4
our components. 5
In this section we're going to tackle the next error message that we got. 6
The one about the invalid component element. 7
So let's check it out. 8
This message here is a little bit cryptic. 9
So let's just jump right to the chase. 10
When we create a component we are creating a class of a component a type of a component. 11
This right here is a type of component. 12
We can have many different instances of app.. 13
This is a cult class not an instance. 14
So think of this object here think of this function as a factory which produces instances of the actual 15
components that get rendered to the DOM. 16
So with this knowledge the error message starts to make a little bit more sense. 17
We passed app as the class right we've passed the app class to react on Dot render not an instance of 18
the component in it so it's saying please make sure that you make an instance of the component and then 19
pass it to react on Dot render. 20
So the lesson here we need to instantiate our components before we try to render them to the dog. 21
Fortunately instantiating or you know creating an instance of component is really easy. 22
This is behavior that's baked right in. 23
GSX. 24
So you enter the transponder that we looked at. 25
You know this REPL here. 26
So I still got it open. 27
So let's you know toss a quick DIV tag in here and look at what we get. 28
So this looks like what we had before when I copy paste our component in here. 29
When we write a GSX tag right here we write div. 30
It actually calls create element for us. 31
So whenever we you wrote we write GSX and we put a component name in here the component name is a component 32
class. 33
But using it inside of GSX turns it into a component instance. 34
So that's the device here. 35
That's the tie between GSX a component and a component instance and it copy paste over our code here 36
or component really quick. 37
So I'm going to copy our app component. 38
So again this is a component. 39
Excuse me a component class but we want a component instance of that. 40
So to do that we can just write app like so. 41
And don't worry about their message at the bottom right now. 42
So you'll see now at the bottom we have reacted Krait element. 43
So we're actually making an instance of app here by the way. 44
One quick little tip whenever we have a tag with GSX that has nothing inside of it we can make what's 45
called a self-closing tag by running a space and then a forward slash. 46
And this is valid GSX right here as well. 47
OK. 48
So let's go back and try to fix our bug inside of re-act down don't render. 49
So right now we're passing a class to render but we need to pass an instance. 50
So all we have to do is put a GSX tied around it. 51
So this now creates an instance of app and passes it to react on that render. 52
So let's flip back over to the browser refresh and not quite there yet. 53
So Tarja container is not a dummy element. 54
OK. 55
So we're almost there. 56
Let's check out this error message in the next section and wrap this up.