1

00:00:00,960  -->  00:00:06,600
In the last section we fixed an error message by using react Dom to our render a component to the DOM

2

00:00:06,660  -->  00:00:08,790
instead of the re-act library.

3

00:00:08,970  -->  00:00:16,530
Remember re-act arm is used to interact with the actual Dom while re-act is used to create and manage

4

00:00:16,530  -->  00:00:18,080
our components.

5

00:00:18,090  -->  00:00:21,080
In this section we're going to tackle the next error message that we got.

6

00:00:21,180  -->  00:00:23,780
The one about the invalid component element.

7

00:00:24,160  -->  00:00:25,550
So let's check it out.

8

00:00:26,070  -->  00:00:28,430
This message here is a little bit cryptic.

9

00:00:28,890  -->  00:00:31,080
So let's just jump right to the chase.

10

00:00:31,260  -->  00:00:36,960
When we create a component we are creating a class of a component a type of a component.

11

00:00:36,960  -->  00:00:39,000
This right here is a type of component.

12

00:00:39,030  -->  00:00:42,640
We can have many different instances of app..

13

00:00:42,720  -->  00:00:46,830
This is a cult class not an instance.

14

00:00:46,860  -->  00:00:53,250
So think of this object here think of this function as a factory which produces instances of the actual

15

00:00:53,250  -->  00:00:55,480
components that get rendered to the DOM.

16

00:00:55,620  -->  00:00:59,880
So with this knowledge the error message starts to make a little bit more sense.

17

00:00:59,910  -->  00:01:07,830
We passed app as the class right we've passed the app class to react on Dot render not an instance of

18

00:01:07,830  -->  00:01:12,850
the component in it so it's saying please make sure that you make an instance of the component and then

19

00:01:12,880  -->  00:01:16,290
pass it to react on Dot render.

20

00:01:16,320  -->  00:01:22,050
So the lesson here we need to instantiate our components before we try to render them to the dog.

21

00:01:22,500  -->  00:01:27,690
Fortunately instantiating or you know creating an instance of component is really easy.

22

00:01:27,720  -->  00:01:29,180
This is behavior that's baked right in.

23

00:01:29,190  -->  00:01:30,620
GSX.

24

00:01:30,620  -->  00:01:33,140
So you enter the transponder that we looked at.

25

00:01:33,150  -->  00:01:34,410
You know this REPL here.

26

00:01:34,590  -->  00:01:36,060
So I still got it open.

27

00:01:36,090  -->  00:01:41,620
So let's you know toss a quick DIV tag in here and look at what we get.

28

00:01:41,700  -->  00:01:45,870
So this looks like what we had before when I copy paste our component in here.

29

00:01:46,140  -->  00:01:50,410
When we write a GSX tag right here we write div.

30

00:01:50,430  -->  00:01:54,520
It actually calls create element for us.

31

00:01:54,750  -->  00:02:02,070
So whenever we you wrote we write GSX and we put a component name in here the component name is a component

32

00:02:02,070  -->  00:02:03,150
class.

33

00:02:03,420  -->  00:02:07,900
But using it inside of GSX turns it into a component instance.

34

00:02:07,920  -->  00:02:08,930
So that's the device here.

35

00:02:08,940  -->  00:02:16,980
That's the tie between GSX a component and a component instance and it copy paste over our code here

36

00:02:17,030  -->  00:02:18,440
or component really quick.

37

00:02:18,730  -->  00:02:23,000
So I'm going to copy our app component.

38

00:02:23,130  -->  00:02:25,720
So again this is a component.

39

00:02:26,220  -->  00:02:29,870
Excuse me a component class but we want a component instance of that.

40

00:02:29,880  -->  00:02:34,760
So to do that we can just write app like so.

41

00:02:35,190  -->  00:02:37,750
And don't worry about their message at the bottom right now.

42

00:02:37,920  -->  00:02:41,660
So you'll see now at the bottom we have reacted Krait element.

43

00:02:41,910  -->  00:02:46,860
So we're actually making an instance of app here by the way.

44

00:02:46,860  -->  00:02:53,130
One quick little tip whenever we have a tag with GSX that has nothing inside of it we can make what's

45

00:02:53,130  -->  00:02:58,310
called a self-closing tag by running a space and then a forward slash.

46

00:02:58,410  -->  00:03:01,610
And this is valid GSX right here as well.

47

00:03:02,460  -->  00:03:03,330
OK.

48

00:03:03,720  -->  00:03:08,760
So let's go back and try to fix our bug inside of re-act down don't render.

49

00:03:08,790  -->  00:03:13,630
So right now we're passing a class to render but we need to pass an instance.

50

00:03:13,680  -->  00:03:18,360
So all we have to do is put a GSX tied around it.

51

00:03:18,360  -->  00:03:23,630
So this now creates an instance of app and passes it to react on that render.

52

00:03:23,640  -->  00:03:29,750
So let's flip back over to the browser refresh and not quite there yet.

53

00:03:29,760  -->  00:03:32,450
So Tarja container is not a dummy element.

54

00:03:32,460  -->  00:03:33,000
OK.

55

00:03:33,210  -->  00:03:34,440
So we're almost there.

56

00:03:34,530  -->  00:03:37,800
Let's check out this error message in the next section and wrap this up.