1
00:00:00,570 --> 00:00:01,170
Welcome back.

2
00:00:01,710 --> 00:00:09,150
So I'm back in my text editor and my terminal, we have the robot friends app and we haven't really

3
00:00:09,150 --> 00:00:12,450
done anything but install the Korea reactor.

4
00:00:13,500 --> 00:00:18,210
So let's go to package on JSON and just see what it actually did for us.

5
00:00:18,240 --> 00:00:19,860
Let me just make this a little bit smaller.

6
00:00:20,920 --> 00:00:28,960
So we have package that, Jason, that set up and the thing that we really care about is this scripts

7
00:00:29,260 --> 00:00:36,160
you see here that I have a couple comments the start, the build, the test, any checked script and

8
00:00:36,160 --> 00:00:41,650
all of these run the command, react scripts start or build or test or reject.

9
00:00:41,890 --> 00:00:43,750
So what is this?

10
00:00:44,170 --> 00:00:46,180
This is what create, React app is.

11
00:00:46,330 --> 00:00:49,390
Create, React app is this React scripts?

12
00:00:50,020 --> 00:00:56,770
And when we ran the command inside of our known modules, you'll see a ton of packages that installed

13
00:00:56,770 --> 00:00:57,250
for us.

14
00:00:57,580 --> 00:00:59,800
Actually, it's quite a lot, isn't it?

15
00:01:00,640 --> 00:01:02,740
So if I scroll all the way down?

16
00:01:04,330 --> 00:01:06,040
Holy Moly, that's a lot of packages.

17
00:01:06,250 --> 00:01:12,400
You see that I have a react scripts right here, and this is where the magic happens in.

18
00:01:12,400 --> 00:01:17,830
Here are the scripts like build eject units, start all these things.

19
00:01:18,460 --> 00:01:20,800
This massive file is being run.

20
00:01:22,060 --> 00:01:27,790
Through here and this is what Create React app provides, it provides us a couple of commands plus all

21
00:01:27,790 --> 00:01:33,580
these packages for us to use to have a really nice developer environment.

22
00:01:34,000 --> 00:01:43,990
So we're able to run things like npm test to test our project and you'll see here that it will run a

23
00:01:43,990 --> 00:01:44,770
test for us.

24
00:01:44,770 --> 00:01:51,850
So if I run a, it's going to test our app Dodge's file and look at that, we have one passing test.

25
00:01:51,880 --> 00:01:55,180
Again, we're not getting into testing, so we don't need to worry about that.

26
00:01:55,180 --> 00:01:58,420
But you see here that we have this out of the box.

27
00:01:58,900 --> 00:02:01,240
Another cool feature that we have out of the box.

28
00:02:01,810 --> 00:02:04,760
Again, let's not worry too much about what this is.

29
00:02:04,780 --> 00:02:10,389
I'm going to go over in detail what this file does, but let's say Abdul is where our app is.

30
00:02:10,840 --> 00:02:12,100
Maybe I messed something up.

31
00:02:12,130 --> 00:02:18,850
Maybe instead of return, I'll say we turn and I spell it wrong if I save this.

32
00:02:20,080 --> 00:02:21,880
And I do and p.m. start.

33
00:02:26,040 --> 00:02:26,760
Let's run.

34
00:02:27,800 --> 00:02:27,920
All.

35
00:02:28,820 --> 00:02:39,020
We get O Line five and App Dogs Return is not defined, and even in here, I get return is not defined

36
00:02:39,050 --> 00:02:40,600
line five and app tags.

37
00:02:40,640 --> 00:02:41,370
How cool is that?

38
00:02:41,390 --> 00:02:45,270
I get that out of the box, so let's say I fix that as soon as I save.

39
00:02:46,040 --> 00:02:47,480
OK, compile successfully.

40
00:02:47,480 --> 00:02:48,440
Everything is working.

41
00:02:48,770 --> 00:02:52,130
So as I'm working on this file, let's say I messed something up.

42
00:02:52,340 --> 00:02:53,750
I keep getting these errors.

43
00:02:53,750 --> 00:02:59,300
As long as I run npm start, it's constantly running, limiting and checking in the background for me.

44
00:02:59,630 --> 00:03:00,860
How cool is that?

45
00:03:01,400 --> 00:03:01,670
OK?

46
00:03:02,060 --> 00:03:04,040
Let's get back to what we're talking about.

47
00:03:04,340 --> 00:03:09,170
So we have packaged JSON, we have all these things that are happening for us.

48
00:03:09,410 --> 00:03:11,910
You see here that we have some dependencies.

49
00:03:11,930 --> 00:03:15,970
These are the things that were installed when we ran that NPC's command.

50
00:03:15,980 --> 00:03:17,390
So we have react.

51
00:03:18,970 --> 00:03:21,070
We have reactor, Don.

52
00:03:21,730 --> 00:03:27,520
We have reactor scripts, which is the Create React app and then something called web vitals.

53
00:03:27,670 --> 00:03:33,160
So it installed a bunch of dependencies for us, as well as some testing libraries.

54
00:03:33,790 --> 00:03:39,940
Now we also have package locked up JSON and this is automatically generated by the package that JSON

55
00:03:39,940 --> 00:03:40,390
file.

56
00:03:40,810 --> 00:03:46,420
And it makes sure that the versions that I'm using right now of our dependencies, every single thing

57
00:03:46,420 --> 00:03:54,250
that you see in node modules, it locks the version numbers so that if I sent this project to you across

58
00:03:54,250 --> 00:04:01,030
the sea, across the world, you open this file or this group of files, it's going to work the exact

59
00:04:01,030 --> 00:04:03,950
same way because these version numbers are locked.

60
00:04:03,970 --> 00:04:12,040
So this package to a lock makes sure that we can run this project anywhere in the world, and it's automatically

61
00:04:12,040 --> 00:04:14,620
generated every time we update package that JSON.

62
00:04:15,710 --> 00:04:20,600
We also have a Remmy, which is a nice Create React app, Remy, that you can read through some of the

63
00:04:20,600 --> 00:04:21,980
things that we can do.

64
00:04:22,850 --> 00:04:24,080
Again, I'll leave that up to you.

65
00:04:24,080 --> 00:04:24,890
It's not important.

66
00:04:25,280 --> 00:04:30,830
We have something called get ignore and has a dot in front of it, which means it's a dot file.

67
00:04:31,550 --> 00:04:38,660
What this means A dot file is a configuration file and get ignore tells whenever we run a get command.

68
00:04:38,660 --> 00:04:46,160
Let's say we're going to push this project to GitHub after we're done with it before our get commands,

69
00:04:46,170 --> 00:04:50,360
it's going to check this and say, Hey, I'm not going to commit, I'm not going to add, I'm going

70
00:04:50,360 --> 00:04:51,500
to completely ignore.

71
00:04:51,500 --> 00:04:56,180
I'm going to get ignore any files or folders that are in here.

72
00:04:56,210 --> 00:05:00,090
So for example, I'm going to ignore the node modules folder.

73
00:05:00,110 --> 00:05:03,960
Remember how I said, we don't want to push that onto GitHub?

74
00:05:03,980 --> 00:05:05,480
Well, it's going to ignore that.

75
00:05:05,750 --> 00:05:07,910
It's going to ignore any other things that we have.

76
00:05:08,000 --> 00:05:09,470
It's going to in our coverage.

77
00:05:09,470 --> 00:05:14,990
If there's a testing coverage, it's going to ignore any random files or folders.

78
00:05:15,140 --> 00:05:21,950
So these store is like a common Mac specific thing that people mistakenly upload to GitHub.

79
00:05:21,950 --> 00:05:25,240
So it just kind of has this niceness about it.

80
00:05:25,250 --> 00:05:29,450
So we can always add things in here that we don't want to push to get hub.

81
00:05:30,080 --> 00:05:34,850
We have the node modules folder, which is where all the third party libraries that we're using are.

82
00:05:35,060 --> 00:05:38,150
And then finally, we have these two important folders.

83
00:05:39,050 --> 00:05:40,820
One is public.

84
00:05:40,940 --> 00:05:43,370
This is where we have things like the favicon.

85
00:05:43,520 --> 00:05:46,310
So that is this little icon that you see here.

86
00:05:46,340 --> 00:05:47,420
That's the favicon.

87
00:05:48,310 --> 00:05:55,120
We have indexed HTML, so this is the HMO page that actually renders.

88
00:05:55,180 --> 00:05:57,310
So we see here you have racked up.

89
00:05:58,410 --> 00:06:02,610
So react to this is the Asian male page that gets rendered.

90
00:06:04,600 --> 00:06:06,700
We have some logos in here.

91
00:06:06,910 --> 00:06:13,300
We have manifest that, Jason, it's a special file that if now there's new features on the web where

92
00:06:13,330 --> 00:06:21,910
users can download or bookmark your website and put it on their home screen or put it on their desktop

93
00:06:21,910 --> 00:06:26,880
as an icon and kind of like a desktop icon, a ball, you can add those on here.

94
00:06:26,890 --> 00:06:28,300
We don't need to worry about that.

95
00:06:28,840 --> 00:06:30,370
We have robots that text.

96
00:06:31,440 --> 00:06:36,450
Just some nice niceness that they provided for us, we don't need to use all of them, all we really

97
00:06:36,450 --> 00:06:45,360
care about is this index that A.T.M. And the most important part is this this Div ID.

98
00:06:47,090 --> 00:06:48,230
Equals route.

99
00:06:49,160 --> 00:06:52,520
As you can see here, there's nothing inside of the body.

100
00:06:54,970 --> 00:07:01,930
Yet on the page, we see this reactor or at least some animation with some text.

101
00:07:03,250 --> 00:07:11,020
This Div ID of Root is actually where React grabs on to the HTML page.

102
00:07:11,680 --> 00:07:14,170
Now where is this happening?

103
00:07:14,500 --> 00:07:18,790
This is happening inside of our source folder.

104
00:07:19,150 --> 00:07:25,210
So the source folder contains our logic, our app as programmers.

105
00:07:25,240 --> 00:07:27,580
This is where we're going to work with our React app.

106
00:07:28,920 --> 00:07:36,630
Public simply has the index that H.M. files and some assets, but where the logic lives, where we build

107
00:07:36,630 --> 00:07:41,430
our React app is right here in the source folder and inside of the source folder.

108
00:07:41,430 --> 00:07:48,990
There's something called index dogs, and this index suggests if you see here might have something that

109
00:07:48,990 --> 00:07:54,060
you recognize, document, get element by ID Root.

110
00:07:55,610 --> 00:07:56,450
This route.

111
00:07:57,370 --> 00:08:00,460
Is exactly what we're grabbing here.

112
00:08:01,090 --> 00:08:07,150
That line says, grab this, and once we grab this, I want you to do something.

113
00:08:07,600 --> 00:08:08,560
What do you think that is?

114
00:08:09,340 --> 00:08:12,400
Let's take a cliffhanger break and I'll see you in the next video.

115
00:08:12,790 --> 00:08:13,180
Bye bye.