1
00:00:00,660 --> 00:00:01,320
Welcome back.

2
00:00:01,710 --> 00:00:11,010
We just talked about this Div ID equals route where we only have this on our page, but somehow react,

3
00:00:11,160 --> 00:00:11,910
grabs it.

4
00:00:13,370 --> 00:00:16,379
And displace this, so let's figure that out.

5
00:00:17,240 --> 00:00:20,350
We see here that we have index dot.

6
00:00:21,080 --> 00:00:23,380
This is the entry point of our app.

7
00:00:23,390 --> 00:00:28,940
This is the first file when we look at the a.m. page, says Div idea of route.

8
00:00:30,200 --> 00:00:36,580
The first thing that we're going to do when we build our React app is we're going to look at the index

9
00:00:36,590 --> 00:00:37,110
logs.

10
00:00:37,130 --> 00:00:40,010
This is the first thing that is read by the computer.

11
00:00:40,700 --> 00:00:44,210
And in here we see that we import react from react.

12
00:00:44,220 --> 00:00:48,200
So this is the React package that we need to.

13
00:00:48,240 --> 00:00:49,490
Well, right react.

14
00:00:49,970 --> 00:00:58,130
We have react, Dom, which what it does is connect the React package to the DOM.

15
00:00:58,490 --> 00:01:01,790
So that is the document object model of.

16
00:01:02,770 --> 00:01:03,430
Our browser.

17
00:01:04,290 --> 00:01:04,980
Of our page.

18
00:01:05,310 --> 00:01:10,770
And the reason they're separated into two is because react can be used with anything it doesn't have

19
00:01:10,770 --> 00:01:14,250
to be just for apps on the browser, it can be for mobile.

20
00:01:14,280 --> 00:01:18,600
That's why React Native is for it could be for VR and virtual reality.

21
00:01:18,930 --> 00:01:27,330
So based on where you using React, you need a package to essentially two packages for the main React

22
00:01:27,480 --> 00:01:30,060
library and whatever the connector is.

23
00:01:31,510 --> 00:01:40,120
We have indexed access, so that is where we add all our niceness, all our success for our app.

24
00:01:40,120 --> 00:01:44,080
So you can see here if I go to actually indexed access.

25
00:01:44,290 --> 00:01:49,360
This is the CSIS that applies to all or the entire page.

26
00:01:50,290 --> 00:01:53,290
And then we have important app from app.

27
00:01:54,330 --> 00:02:00,930
Now this is right here, and we're going to talk about what this exactly is.

28
00:02:01,680 --> 00:02:08,460
Later in the videos, but as you can see here, what we're doing is we're using React Dom, and we're

29
00:02:08,460 --> 00:02:13,770
saying, Hey, react to the thing that interacts with the document object model on the browser.

30
00:02:14,310 --> 00:02:18,000
Use this method that comes with React Dom and honestly with React Dom.

31
00:02:18,000 --> 00:02:20,250
We pretty much just use this render.

32
00:02:21,190 --> 00:02:24,280
And in here, I want you to render this.

33
00:02:24,880 --> 00:02:26,260
And what is this?

34
00:02:26,590 --> 00:02:29,960
The first parameter is I want you to render this.

35
00:02:29,980 --> 00:02:31,090
Put this on the page.

36
00:02:31,390 --> 00:02:32,830
The second line is this.

37
00:02:33,820 --> 00:02:41,140
Put the above on the page in here, which is document again, document is something that comes from

38
00:02:41,140 --> 00:02:44,440
the browser, so document get element by ID route.

39
00:02:44,770 --> 00:02:51,670
So all we're saying is this I want you to render inside of this div.

40
00:02:52,860 --> 00:02:53,860
And that's what we do.

41
00:02:53,880 --> 00:03:04,440
We grab the root and then react renders this part and what is this part, this app that we import?

42
00:03:04,800 --> 00:03:06,480
If we go to app, yes.

43
00:03:07,470 --> 00:03:09,360
Well, this is what it is.

44
00:03:09,360 --> 00:03:11,010
This is what we see on the screen.

45
00:03:11,610 --> 00:03:14,820
Remember the image, the logo that's spinning?

46
00:03:15,300 --> 00:03:17,130
Well, that's that's right here.

47
00:03:17,550 --> 00:03:20,310
Remember the edit source app and safe to reload?

48
00:03:24,140 --> 00:03:29,150
Remember the learn react if we change that to learning react.

49
00:03:29,960 --> 00:03:31,880
We see the change right away.

50
00:03:32,990 --> 00:03:38,270
So what we see on the screen is contained inside of this app component.

51
00:03:39,200 --> 00:03:41,790
Now, this looks really confusing.

52
00:03:41,810 --> 00:03:46,610
I know it's like a whole new world we've just entered, but we're just getting started.

53
00:03:47,060 --> 00:03:49,100
This is just a high level overview.

54
00:03:49,580 --> 00:03:51,860
We still got a lot more to learn.

55
00:03:52,250 --> 00:03:55,070
So for that, let's take a break and I'll see you in the next video.