1
00:00:01,230 --> 00:00:06,210
Let's update our show function again, we're going to make sure that it can recognize a jazz element.

2
00:00:06,450 --> 00:00:08,490
Now, again, the key word here is an element.

3
00:00:08,490 --> 00:00:10,310
We're not worrying about a react component just yet.

4
00:00:10,830 --> 00:00:16,560
So we need to first figure out some way to update our show function to recognize that we've been given

5
00:00:16,590 --> 00:00:19,810
a react element as opposed to just a plain object.

6
00:00:20,430 --> 00:00:25,830
So step number one here, let's actually console log a sex element and see what is actually given to

7
00:00:25,830 --> 00:00:26,060
us.

8
00:00:26,070 --> 00:00:30,120
In other words, what real properties does it have that we can use to figure out whether or not this

9
00:00:30,120 --> 00:00:34,040
value thing is a react element to back inside my browser?

10
00:00:34,680 --> 00:00:40,620
I'm going to change that show right there to a console lug of a react element and then we'll see what

11
00:00:40,620 --> 00:00:42,240
properties actually react.

12
00:00:42,240 --> 00:00:42,960
Element has.

13
00:00:43,800 --> 00:00:48,570
So it appears that a react element is always going to have a dollar sign, dollar sign type of property.

14
00:00:49,510 --> 00:00:52,150
It might have a key that is null rep that is null.

15
00:00:52,300 --> 00:00:55,260
We'll definitely have a type and possibly props as well.

16
00:00:56,110 --> 00:01:00,220
So I think that we could probably add in a very simple check into our show function.

17
00:01:00,550 --> 00:01:06,910
We might say that if an object has a defined dollar sign, dollar sign type of property and maybe a

18
00:01:06,910 --> 00:01:13,630
defined props property, then we are going to assume that this is a sex element and we want to use react

19
00:01:13,860 --> 00:01:15,530
to render this thing onto the screen.

20
00:01:16,060 --> 00:01:17,110
So let's try that out.

21
00:01:19,790 --> 00:01:24,410
Back inside of my show function right before our current if statement check.

22
00:01:25,650 --> 00:01:30,420
I'll add in about just right inside of it that we won't have to write out the repeat check to see if

23
00:01:30,420 --> 00:01:32,430
this thing is an object, I'm going to say if.

24
00:01:33,770 --> 00:01:36,470
Value dot, dollar sign, dollar sign type of.

25
00:01:36,530 --> 00:01:43,220
So if that is defined and value crops is defined, then we're going to treat this thing as though it

26
00:01:43,220 --> 00:01:45,470
were a react element or a sex element.

27
00:01:46,170 --> 00:01:49,160
Otherwise, we're going to assume that it really is just a plain object.

28
00:01:49,370 --> 00:01:54,800
And we want to do the very simple strategy of just turning that thing into some JSON.

29
00:01:58,580 --> 00:02:04,010
OK, so then inside of this if statement right here, we need to somehow make use of react to render

30
00:02:04,010 --> 00:02:05,000
this thing onto the screen.

31
00:02:05,750 --> 00:02:08,690
So I'll try out a very simple and straightforward approach to get started.

32
00:02:08,720 --> 00:02:11,820
We'll just do something like React, Dom, render.

33
00:02:12,390 --> 00:02:17,570
I want to render that value and we want to display it inside of our div with ID root.

34
00:02:18,050 --> 00:02:20,940
So I'll just copy that document query selector in like so.

35
00:02:21,650 --> 00:02:25,490
Now at this point in time you might notice that we've got a lot of duplicate query selectors inside

36
00:02:25,490 --> 00:02:32,200
of here, so we might decide to just extract out and define a variable right above the statement itself.

37
00:02:32,510 --> 00:02:35,900
It's going to put up your const route is that selector?

38
00:02:36,320 --> 00:02:41,450
And we can go back through and replace all the document query selector pound routes with just a reference

39
00:02:41,450 --> 00:02:44,240
to the variable itself will go to route.

40
00:02:47,690 --> 00:02:49,400
And root.

41
00:02:50,700 --> 00:02:52,290
OK, let's save this.

42
00:02:52,500 --> 00:02:54,030
Go back over and see how it's doing.

43
00:02:56,150 --> 00:02:56,860
It's back over.

44
00:02:56,930 --> 00:02:58,310
I'm going to do a quick refresh.

45
00:03:00,570 --> 00:03:05,640
I'll then tried to do a show with an H one with some text inside.

46
00:03:07,400 --> 00:03:13,670
Right away, we're going to once again see and hear about react so we can import, react from react.

47
00:03:14,590 --> 00:03:19,000
And then after that, we're going to see a second, our second one says react Dom is not defined.

48
00:03:19,420 --> 00:03:22,330
Well, for that, I guess we need to add in another important statements.

49
00:03:22,330 --> 00:03:26,260
We'll do an import, react from react some.

50
00:03:28,220 --> 00:03:29,870
Hey, looks like it actually works.

51
00:03:31,180 --> 00:03:38,380
So as long as we add in and import, react and react, Dom, then we can show a jousts element that

52
00:03:38,380 --> 00:03:41,800
doesn't seem like the best thing in the world, because now we're assuming that every single time that

53
00:03:41,800 --> 00:03:46,600
a user tries to show a plane sex element, they will have already imported react and react.

54
00:03:46,600 --> 00:03:46,960
Dom.

55
00:03:48,330 --> 00:03:52,140
If they have not imported those, then we're going to show them an error message like this, which isn't

56
00:03:52,140 --> 00:03:57,780
super helpful, it doesn't very clearly tell the user that they need to import, react or react before

57
00:03:57,780 --> 00:04:00,620
they try to call our show function with some element.

58
00:04:01,140 --> 00:04:02,760
So I've got a little idea here.

59
00:04:03,150 --> 00:04:09,600
Maybe we should say that if we ever try to write out any kind of juice whatsoever or maybe just in general,

60
00:04:09,870 --> 00:04:15,840
maybe we should always attempt to import, react and react Dom into a bundle in all circumstances,

61
00:04:15,840 --> 00:04:16,570
no matter what.

62
00:04:16,980 --> 00:04:21,510
So whether or not a user is making use of X, maybe we should just go ahead and assume that we want

63
00:04:21,510 --> 00:04:27,330
to import, react and react, um, so the user can very easily make use of them to show just elements.

64
00:04:28,310 --> 00:04:32,300
This would have a little bit of a downside because it's assuming that we always want to get react and

65
00:04:32,300 --> 00:04:36,530
react, Dom, even if a user is not actually trying to show some kind of react element.

66
00:04:36,890 --> 00:04:41,780
But it would definitely completely sidestep this issue of having to worry about a user running to this

67
00:04:41,780 --> 00:04:45,740
kind of nasty error message and not really have any idea of how to deal with it.

68
00:04:47,690 --> 00:04:51,230
Well, let's take a pause right here and figure out what the best approach will be in the next video.