1
00:00:00,900 --> 00:00:01,733
Instructor: In the last section,

2
00:00:01,733 --> 00:00:03,750
we created a couple of different files and folders

3
00:00:03,750 --> 00:00:05,520
to get our project started.

4
00:00:05,520 --> 00:00:08,550
We'll first begin inside of our App.js file.

5
00:00:08,550 --> 00:00:10,050
Inside of here, we're gonna put together

6
00:00:10,050 --> 00:00:12,300
just a little bit of boilerplate code

7
00:00:12,300 --> 00:00:14,400
and then we'll use our index.js file

8
00:00:14,400 --> 00:00:16,890
to make sure that it's visible on the screen.

9
00:00:16,890 --> 00:00:19,710
So inside of App.js, I'll first get started

10
00:00:19,710 --> 00:00:24,710
by importing React from react and then inside this component

11
00:00:25,860 --> 00:00:29,730
we're going to make a very simple functional component.

12
00:00:29,730 --> 00:00:34,730
So we'll say export default, we'll place an arrow function

13
00:00:34,770 --> 00:00:35,670
and then for right now,

14
00:00:35,670 --> 00:00:40,090
we'll say that this is going to return a div

15
00:00:41,460 --> 00:00:45,480
with the text on the I'm the app component.

16
00:00:45,480 --> 00:00:48,180
So very simple, very humble beginnings to get started.

17
00:00:49,110 --> 00:00:50,610
I'll then save this file

18
00:00:50,610 --> 00:00:54,120
and then we'll immediately flip over to our index.js file

19
00:00:54,120 --> 00:00:55,620
where we will import the app

20
00:00:55,620 --> 00:00:57,060
and make sure that we render it out

21
00:00:57,060 --> 00:00:59,460
to be visible on the screen.

22
00:00:59,460 --> 00:01:02,280
So inside of index.js, at the very top,

23
00:01:02,280 --> 00:01:05,102
we will import React from react.

24
00:01:06,030 --> 00:01:10,900
We will import ReactDOM from react-dom

25
00:01:11,790 --> 00:01:13,800
and then we'll also import the app component

26
00:01:13,800 --> 00:01:15,240
that we just created.

27
00:01:15,240 --> 00:01:19,263
So I'll import app from components/App.

28
00:01:20,580 --> 00:01:22,170
And then finally at the bottom of the file

29
00:01:22,170 --> 00:01:24,510
we're gonna make use of the ReactDOM library

30
00:01:24,510 --> 00:01:27,060
to render an instance of the app component

31
00:01:27,060 --> 00:01:28,620
out to the screen.

32
00:01:28,620 --> 00:01:31,140
So remember how we render a component out

33
00:01:31,140 --> 00:01:32,520
directly to the DOM?

34
00:01:32,520 --> 00:01:36,060
We call ReactDOM, with capitals on DOM right there.

35
00:01:36,060 --> 00:01:39,120
Don't forget that. We'll call render.

36
00:01:39,120 --> 00:01:41,460
We'll then pass in an instance of the component

37
00:01:41,460 --> 00:01:42,870
that we want to show on the screen.

38
00:01:42,870 --> 00:01:45,720
So in this case it's going to be our app component

39
00:01:45,720 --> 00:01:46,950
and then the second argument

40
00:01:46,950 --> 00:01:50,610
will be a reference to a DOM element on the page.

41
00:01:50,610 --> 00:01:53,040
Now anytime we make use of Create React app

42
00:01:53,040 --> 00:01:54,900
we get this public directory

43
00:01:54,900 --> 00:01:58,020
with an index.html file inside of it.

44
00:01:58,020 --> 00:02:00,450
Anytime a user visits our application,

45
00:02:00,450 --> 00:02:03,960
this index.html file will be loaded up

46
00:02:03,960 --> 00:02:06,450
and then that file will pull in all the JavaScript

47
00:02:06,450 --> 00:02:08,340
tied to our project.

48
00:02:08,340 --> 00:02:10,410
So if we open up this HTML document

49
00:02:10,410 --> 00:02:12,160
and scroll down towards the bottom,

50
00:02:13,290 --> 00:02:17,250
you'll find a div right here with an ID of root.

51
00:02:17,250 --> 00:02:19,530
So this is intended to be the root div

52
00:02:19,530 --> 00:02:22,110
of the entire React application.

53
00:02:22,110 --> 00:02:24,150
So we're going to write a query selector

54
00:02:24,150 --> 00:02:27,063
that's going to attempt to find this div element.

55
00:02:28,170 --> 00:02:30,900
Back inside of our index.js file,

56
00:02:30,900 --> 00:02:33,570
we'll do a document.querySelector,

57
00:02:35,250 --> 00:02:39,360
and then to select that div, we'll enter in a string.

58
00:02:39,360 --> 00:02:41,190
And let's new line this very quickly

59
00:02:41,190 --> 00:02:43,380
just so we can see the whole line.

60
00:02:43,380 --> 00:02:44,850
There we go.

61
00:02:44,850 --> 00:02:47,910
So we're gonna do pound root like so.

62
00:02:47,910 --> 00:02:49,680
So that's going to attempt to find that div

63
00:02:49,680 --> 00:02:51,870
with an ID of root.

64
00:02:51,870 --> 00:02:53,310
I'll then save this file

65
00:02:53,310 --> 00:02:56,460
and then we'll test out this inside the browser.

66
00:02:56,460 --> 00:02:58,620
We'll need to first make sure that we start up

67
00:02:58,620 --> 00:03:01,230
the development server for Create React app.

68
00:03:01,230 --> 00:03:04,320
So to do so, I'm gonna go back over to my terminal

69
00:03:04,320 --> 00:03:06,060
and inside of my project directory,

70
00:03:06,060 --> 00:03:09,270
I'll run the command npm run serve...

71
00:03:09,270 --> 00:03:11,193
Excuse me, not serve. We want start.

72
00:03:12,150 --> 00:03:13,680
So we'll run that

73
00:03:13,680 --> 00:03:15,540
and that will start up our development server

74
00:03:15,540 --> 00:03:18,600
that's going to try to bundle those three different files

75
00:03:18,600 --> 00:03:20,370
that we just created together

76
00:03:20,370 --> 00:03:22,470
and then serve them up inside the browser.

77
00:03:23,520 --> 00:03:25,590
Now when I start npm run start right here,

78
00:03:25,590 --> 00:03:27,780
it's gonna take me just a minute to load stuff up,

79
00:03:27,780 --> 00:03:29,280
simply because when I'm running

80
00:03:29,280 --> 00:03:32,220
this desktop recording software on my computer,

81
00:03:32,220 --> 00:03:34,740
well, it tends to bog things down just a little.

82
00:03:34,740 --> 00:03:36,960
So after a very brief pause here

83
00:03:36,960 --> 00:03:39,330
or maybe in my case not that brief,

84
00:03:39,330 --> 00:03:42,000
I will see my application up here on the screen.

85
00:03:42,000 --> 00:03:42,833
And at this point

86
00:03:42,833 --> 00:03:44,940
all I'm really expecting is to see the output

87
00:03:44,940 --> 00:03:46,320
of that app component,

88
00:03:46,320 --> 00:03:49,800
which says simply, right over here,

89
00:03:49,800 --> 00:03:52,530
just the I'm the app component, and nothing else.

90
00:03:52,530 --> 00:03:54,960
That's all we really expect right now.

91
00:03:54,960 --> 00:03:57,240
So if I go back over, you know what, this is taking too long

92
00:03:57,240 --> 00:03:59,610
but I'm sure you've already seen output on yours.

93
00:03:59,610 --> 00:04:01,170
So let's take a quick pause right here.

94
00:04:01,170 --> 00:04:02,520
When we come back to the next section,

95
00:04:02,520 --> 00:04:05,130
we will wire up our comment list and comment box

96
00:04:05,130 --> 00:04:06,453
to the app component.