1
00:00:00,150 --> 00:00:07,680
And before we go any further, let me just give you a brief overview of the folder structure and create

2
00:00:07,680 --> 00:00:15,780
react up, and I must warn you that throughout the video I'll probably zoom in and zoom out quite a

3
00:00:15,780 --> 00:00:16,380
few times.

4
00:00:16,680 --> 00:00:20,130
So up on the top, we have all the modules.

5
00:00:20,490 --> 00:00:23,240
Of course, this is where we have all our dependencies.

6
00:00:23,580 --> 00:00:29,430
So if you remember previously when we installed Bootstrap, we essentially had only one folder.

7
00:00:29,730 --> 00:00:36,990
Now, of course, since the dependencies that our project has have their own dependencies, well, our

8
00:00:36,990 --> 00:00:41,780
node modules folder, of course, is way, way bigger.

9
00:00:42,180 --> 00:00:48,560
And of course, this is why when we'll be setting up our source control, we will ignore this folder.

10
00:00:48,840 --> 00:00:55,740
Now, before we go any further, I just want to show you a cool thing, how the package works together.

11
00:00:55,900 --> 00:01:03,180
We know what modules please keep in mind that is not unique to create react app, but I think it's going

12
00:01:03,180 --> 00:01:04,840
to be a very useful info.

13
00:01:05,160 --> 00:01:11,280
So, for example, if I navigate two packages, we already know that, of course, this is going to

14
00:01:11,280 --> 00:01:12,600
be our manifest of all.

15
00:01:13,420 --> 00:01:20,230
And in here, as you can see, these are the dependencies that we are using in our project, and then

16
00:01:20,230 --> 00:01:24,740
of course, in order to start up our application, we will need to run and start.

17
00:01:25,210 --> 00:01:28,400
Now, what if I delete the node modules?

18
00:01:28,420 --> 00:01:32,120
What if I say, you know what, I don't need this particular folder?

19
00:01:32,440 --> 00:01:33,390
OK, I deleted.

20
00:01:33,610 --> 00:01:39,220
Now, in order to stop the server, the command that you're looking for is control and see.

21
00:01:39,620 --> 00:01:41,680
So that is going to stop the server.

22
00:01:41,690 --> 00:01:45,700
And of course, once I refresh notice, I'm going to get a big fat error.

23
00:01:46,160 --> 00:01:54,370
Now I'll try to run and start, but of course I should get a Y one because I don't have my dependencies

24
00:01:54,370 --> 00:01:54,700
anymore.

25
00:01:55,000 --> 00:01:59,530
So if I run and start, I will, of course get my big fat error.

26
00:01:59,830 --> 00:02:01,990
Now, do you think everything is lost?

27
00:02:02,380 --> 00:02:04,130
And of course the answer is no.

28
00:02:04,450 --> 00:02:07,650
What we would need to do is run, npm, install.

29
00:02:07,990 --> 00:02:12,060
So this of course, we'll just check that in the packages.

30
00:02:12,070 --> 00:02:19,270
And we have a list of our dependencies and it will just install for us and that the moment we are on

31
00:02:19,270 --> 00:02:22,540
NPM install, this will install all our dependencies.

32
00:02:22,750 --> 00:02:24,190
And again, we're good to go.

33
00:02:24,490 --> 00:02:30,550
And this is exactly what I was saying in the previous videos, where once we get our project from the

34
00:02:30,550 --> 00:02:37,750
GitHub, whether we clone it, whether we forget whether we are downloading, then of course we just

35
00:02:37,750 --> 00:02:42,630
need to run, NPM, install, because list of our dependencies are going to be there.

36
00:02:43,270 --> 00:02:50,200
So that's why, of course, we don't need to share our project, meaning we don't need to share the

37
00:02:50,260 --> 00:02:52,640
massive node modules folder.

38
00:02:52,870 --> 00:02:59,830
So in this case, what we could do is just npm start and everything will run exactly like we expect,

39
00:03:00,130 --> 00:03:04,350
because of course, now, of course, we installed all our dependencies back.

40
00:03:04,690 --> 00:03:10,080
Now, after that, we have the public folder where we'll find Index Estima.

41
00:03:10,480 --> 00:03:15,310
Now, this is the index file that is displayed over here.

42
00:03:15,550 --> 00:03:19,450
So I can tell you right away that all of our work will do it in the source.

43
00:03:19,720 --> 00:03:26,110
But there are some few useful things that we can do in the index HMO, for example.

44
00:03:26,110 --> 00:03:27,860
We could change the title, correct.

45
00:03:28,180 --> 00:03:35,710
So at the moment I have racked up, but I could go with react online tutorial and don't be scared of

46
00:03:35,710 --> 00:03:41,110
this file is just like a regular HTML file that we have worked already before.

47
00:03:41,380 --> 00:03:47,590
And if you're looking at the syntax, it also resembles everything that we have seen already in the

48
00:03:47,860 --> 00:03:48,920
HDMI files.

49
00:03:49,060 --> 00:03:52,140
Now, what other useful things that we can do in the next schlemiel?

50
00:03:52,510 --> 00:03:59,470
Well, we could add Google fonts because like I just said, the syntax would be exactly the same, like

51
00:03:59,470 --> 00:04:07,210
we have been using already in the Schimel or the font, awesome icons or things of that nature.

52
00:04:07,570 --> 00:04:13,300
And then more importantly, we have over here this div with an ID of a road.

53
00:04:13,750 --> 00:04:21,280
And I know it sounds mind boggling at the moment, but this is where our whole JavaScript application

54
00:04:21,460 --> 00:04:23,390
eventually is going to live.

55
00:04:23,800 --> 00:04:28,600
I know sounds really mind boggling at the moment, but don't worry.

56
00:04:28,610 --> 00:04:35,760
Of course I will swing back to road when we cover some basics of the react setup.

57
00:04:36,010 --> 00:04:39,610
So that is going to be normal in our public.

58
00:04:40,430 --> 00:04:47,420
Then we have a folder that we currently don't see, and that is the built one, remember in the package

59
00:04:47,480 --> 00:04:49,450
that we had the command of start.

60
00:04:49,700 --> 00:04:52,960
So that, of course, started our servers and now let me stop it.

61
00:04:53,190 --> 00:05:00,620
But we also have a built on this command, essentially sets up a production already built.

62
00:05:00,920 --> 00:05:03,200
So let me run it and then, of course, I'll show you.

63
00:05:03,410 --> 00:05:05,450
So npm run, build.

64
00:05:05,720 --> 00:05:11,090
So we run this command and then of course, we'll see the build folder as well.

65
00:05:11,450 --> 00:05:18,640
Now it's going to be very hard to tell anything in that folder, meaning it will open up in HMO.

66
00:05:18,980 --> 00:05:22,250
You'll notice that everything has been nicely modified.

67
00:05:22,460 --> 00:05:27,150
And essentially what you can do with this folder, it's just static assets.

68
00:05:27,440 --> 00:05:35,000
So, for example, not you can just use for drag and drop option now, not LFI is, of course, the

69
00:05:35,000 --> 00:05:39,470
hosting provider that we will use throughout this tutorial.

70
00:05:39,680 --> 00:05:40,790
But of course you can do it.

71
00:05:40,790 --> 00:05:47,200
And the other place where you can just grab the static assets that you do it for to build folder.

72
00:05:47,630 --> 00:05:53,750
And up next, we have the source folder where we'll do most of our work and that's why we won't cover

73
00:05:53,750 --> 00:05:56,750
it in detail in this video.

74
00:05:57,100 --> 00:06:03,200
As far as the files we have, the access, that's where eventually there's going to be access for our

75
00:06:03,200 --> 00:06:03,820
application.

76
00:06:04,160 --> 00:06:12,560
We have abcess where eventually all our components will meet our keep in mind that the name is optional.

77
00:06:12,950 --> 00:06:14,960
You can call this shake and bake.

78
00:06:14,960 --> 00:06:21,650
It doesn't really matter is just convention has to call this app G.S. and then we have the file for

79
00:06:21,650 --> 00:06:23,090
testing, which we don't care about.

80
00:06:23,330 --> 00:06:24,950
We have indexed access.

81
00:06:25,280 --> 00:06:29,930
And of course, in here, again, we have more success for our application.

82
00:06:30,170 --> 00:06:39,070
We have Index G.S. where we will start working starting from the next video, although technically NextRadio

83
00:06:39,290 --> 00:06:41,380
will just wipe out all the bar.

84
00:06:41,870 --> 00:06:47,360
So I guess more properly would be, say, in the video after that, we'll start working in the next

85
00:06:47,360 --> 00:06:47,690
year.

86
00:06:47,900 --> 00:06:54,440
And even though there is a lot of things already here, most importantly, what I would want you to

87
00:06:54,440 --> 00:06:59,120
notice is that we are targeting that route there.

88
00:06:59,450 --> 00:07:01,620
Remember I showed you in the index?

89
00:07:01,670 --> 00:07:07,530
Actually, I said that, of course, this is where all our application is going to live.

90
00:07:07,910 --> 00:07:12,800
So essentially, we have Index Jass, we're importing the app.

91
00:07:13,160 --> 00:07:20,060
So app, of course, is going to be a file where all our components eventually will meet and we'll place

92
00:07:20,060 --> 00:07:24,980
our app in the road in the dev with an ID offering.

93
00:07:25,260 --> 00:07:30,770
That's why I said that even though it looks a little bit mind boggling, put all our application will

94
00:07:30,770 --> 00:07:33,020
live in that one.

95
00:07:33,050 --> 00:07:35,660
Dev with an idea, of course.

96
00:07:35,660 --> 00:07:37,910
Then we have a logo self-explanatory.

97
00:07:37,910 --> 00:07:40,120
That is the logo that we see right now.

98
00:07:40,340 --> 00:07:43,160
And then of course the service worker as well as set up.

99
00:07:43,160 --> 00:07:50,090
That's which we won't cover in this particular course while we're still on a subject, we have get ignored.

100
00:07:50,240 --> 00:07:58,970
And like I said, this is a file that just specifies which files will be ignored by our social control.

101
00:07:59,190 --> 00:08:04,070
Of course, up on the top, you can see the node modules, which, like I mentioned previously, will

102
00:08:04,070 --> 00:08:08,690
be ignored because there's no point of adding them as well as the build.

103
00:08:08,930 --> 00:08:14,630
So build will also be ignored because either you'll do your own drag and drop.

104
00:08:15,050 --> 00:08:20,180
That's one of the options that you can do as far as your production build, or you'll use some kind

105
00:08:20,180 --> 00:08:27,410
of continuous deployment where essentially the provider, the hosting provider, does the build process

106
00:08:27,410 --> 00:08:27,800
for you.

107
00:08:28,040 --> 00:08:33,770
And then, of course, at the end, like I said, there is a package, Jaxson, where we have the manifest

108
00:08:33,770 --> 00:08:34,570
of our project.

109
00:08:34,820 --> 00:08:41,310
Most importantly, we care about the dependencies as well as the commands that we can run, start and

110
00:08:41,330 --> 00:08:44,300
build all the way at the bottom.

111
00:08:44,540 --> 00:08:52,520
We have read me, which is a markdown file that just contains information about our project that should

112
00:08:52,520 --> 00:08:55,040
do it for the folder structure.

113
00:08:55,400 --> 00:09:03,080
Next video, we'll clean up some of the boilerplate and then finally we'll start working on our first

114
00:09:03,080 --> 00:09:04,580
react component.