1
00:00:00,330 --> 00:00:08,970
In this video, let's explore the folder structure of React Project.

2
00:00:10,880 --> 00:00:19,730
When you create a new React project, you will notice that there are few files and folders generated

3
00:00:19,730 --> 00:00:21,110
by default.

4
00:00:21,110 --> 00:00:23,450
Which are these ones?

5
00:00:24,420 --> 00:00:30,270
So let's have a look at each and see what they are doing over here.

6
00:00:31,080 --> 00:00:35,640
The first one is called the node underscore modules.

7
00:00:35,970 --> 00:00:42,540
If you open it, you can see that we have bunch of subfolders in that.

8
00:00:43,270 --> 00:00:52,900
So this folder contains all the external dependencies required by your React app.

9
00:00:53,830 --> 00:00:58,150
And you shouldn't need to touch this folder very often.

10
00:00:58,630 --> 00:01:05,110
And since I use React, I don't even touch this folder.

11
00:01:05,140 --> 00:01:14,680
So what it means is that it contains all the dependencies that makes your React application run successfully.

12
00:01:15,590 --> 00:01:21,680
So the next folder that we have is called the public, which is this folder.

13
00:01:22,850 --> 00:01:33,750
So the public folder contains all the static assets of your app that need to be publicly visible.

14
00:01:33,770 --> 00:01:37,970
For example, the index dot HTML is placed in here.

15
00:01:38,450 --> 00:01:46,790
So any asset that you want to display to the user is being put inside this public folder.

16
00:01:47,270 --> 00:01:53,240
And if we see that, if you open it for React, we only have one HTML.

17
00:01:53,990 --> 00:01:54,350
All right.

18
00:01:54,350 --> 00:01:55,670
That is crazy, right?

19
00:01:55,760 --> 00:01:57,080
One HTML.

20
00:01:57,110 --> 00:01:59,030
And we have some five account here.

21
00:01:59,030 --> 00:02:05,330
And the logo, if I click on that, you see that I have the logo I need to download while it's open

22
00:02:05,330 --> 00:02:11,260
here, I'm working my extension and we have don't worry about this manifestation for here.

23
00:02:11,270 --> 00:02:15,590
This is for the purposes.

24
00:02:15,890 --> 00:02:21,710
After you deploy application, you need to customize the colors and maybe the name of the applications

25
00:02:21,710 --> 00:02:24,170
inside the manifest JSON file.

26
00:02:24,470 --> 00:02:28,640
So if you look at the final one, sorry, my application I be using React.

27
00:02:28,640 --> 00:02:33,980
If we see that, let's go home here you can see that I have this five account here.

28
00:02:33,980 --> 00:02:39,950
It was being customized inside this folder, this file and the manufactured JSON file.

29
00:02:40,250 --> 00:02:47,150
We have the CC of the image, which is this one file bitcoin here and the size of it and the type.

30
00:02:47,360 --> 00:02:49,590
These are by default into customize the logo.

31
00:02:49,590 --> 00:02:53,960
We can change this one by placing it inside this main public folder.

32
00:02:54,110 --> 00:02:58,010
So anything that you want it to be public is being placed in here.

33
00:02:58,010 --> 00:03:00,980
We see that we have the five icon for mine.

34
00:03:00,980 --> 00:03:02,180
It is this one.

35
00:03:03,170 --> 00:03:04,220
Is not is public.

36
00:03:04,220 --> 00:03:04,790
Right.

37
00:03:04,790 --> 00:03:09,200
And the next one is going to be the logo as well.

38
00:03:09,200 --> 00:03:13,820
And the logo to this my logo here, I put them inside that.

39
00:03:13,820 --> 00:03:16,460
So that is a public folder for you.

40
00:03:17,210 --> 00:03:22,430
And if you open the index here, you're familiar with the HTML, Right.

41
00:03:22,460 --> 00:03:25,850
And see, that is exactly the same as 18.

42
00:03:26,060 --> 00:03:30,290
There are some few files here to me going on here that is crazy.

43
00:03:30,290 --> 00:03:37,460
So that we have the head tag here and then we have the some metadata here I that.

44
00:03:37,550 --> 00:03:43,130
And then in here you only have one day, which is give by ID and root.

45
00:03:43,130 --> 00:03:51,500
So inside here is what React is going to inject or display a component inside this particular div.

46
00:03:51,740 --> 00:03:53,140
We will talk more about this.

47
00:03:53,150 --> 00:03:57,410
Just have a look at the folder structure of React project.

48
00:03:57,860 --> 00:03:58,100
Right.

49
00:03:58,100 --> 00:03:58,520
Cool.

50
00:03:59,810 --> 00:04:03,290
So the next folder, let me collect the public folder here.

51
00:04:03,290 --> 00:04:10,880
So here you can also put your custom images by create a folder called asset or images and place it in

52
00:04:10,880 --> 00:04:11,510
here.

53
00:04:12,080 --> 00:04:15,970
So the next one that I'm going to talk about is called the S.

54
00:04:15,980 --> 00:04:18,230
I see that the source folder.

55
00:04:18,230 --> 00:04:27,440
So this is where the majority of your development work will take place or the JavaScript code for your

56
00:04:27,440 --> 00:04:29,840
app should go here.

57
00:04:30,260 --> 00:04:35,090
So for this exercise, see, don't worry, we have app CSS.

58
00:04:35,300 --> 00:04:42,350
So we also have going to read some CSS code is being put inside this zip folder and then we have up

59
00:04:42,350 --> 00:04:45,140
the JS file that contains some files.

60
00:04:45,140 --> 00:04:47,840
This a component you talk about very soon.

61
00:04:48,080 --> 00:04:51,170
And then we have a follow up test.

62
00:04:51,170 --> 00:04:54,290
If we do some test cases here, we need to use this one.

63
00:04:54,290 --> 00:04:57,140
But for me, I've never used this one before.

64
00:04:57,800 --> 00:05:07,220
And we also have some CSS folder called Index eight CSS and we have our JavaScript file that goes in

65
00:05:07,220 --> 00:05:15,500
here inside the index JS file and we have the logo, the SVG report, web, vitals, the JS, and we

66
00:05:15,500 --> 00:05:17,600
have set up some test cases here.

67
00:05:17,990 --> 00:05:25,250
So here too we can put our custom JavaScript, see that it contains the JavaScript of our project and

68
00:05:25,250 --> 00:05:28,940
we'll talk more about what these files are doing here.

69
00:05:29,180 --> 00:05:31,520
We see that there are some naming conventions here.

70
00:05:32,090 --> 00:05:33,530
these two files.

71
00:05:34,600 --> 00:05:41,560
App and an index that forwards JavaScript right by one is being written as Uppercase A and one is written

72
00:05:41,560 --> 00:05:43,420
as small or lowercase.

73
00:05:43,420 --> 00:05:44,500
I indexed.

74
00:05:44,680 --> 00:05:51,100
So what the difference is, any time you see uppercase with a basket like this one, maybe uppercase

75
00:05:51,160 --> 00:05:53,740
in the file, it tells you that is a component.

76
00:05:53,740 --> 00:05:59,650
And we talk about it more when you get back to the component section of this course, that's SLC folder

77
00:05:59,650 --> 00:06:00,250
for you.

78
00:06:00,910 --> 00:06:09,130
And then I think now that we have understood, understand some of the basic territory of our structure.

79
00:06:09,220 --> 00:06:12,700
Let's take a look at some of the files inside.

80
00:06:13,030 --> 00:06:19,030
The two most important files are index dot JS and app JS.

81
00:06:19,060 --> 00:06:21,730
Like I said, we have these two files inside.

82
00:06:22,360 --> 00:06:24,370
So what is the index?

83
00:06:24,370 --> 00:06:26,950
That index, the GS file doing here?

84
00:06:26,950 --> 00:06:30,250
If you open it, you see that there are a few files here.

85
00:06:30,520 --> 00:06:35,380
So this is an entry point for your React application.

86
00:06:35,800 --> 00:06:41,020
It is used to render the app G is in the root element.

87
00:06:41,290 --> 00:06:41,890
Okay.

88
00:06:42,040 --> 00:06:43,870
And then you see that we have it here.

89
00:06:43,870 --> 00:06:53,350
And then if you look at the public folder here and index, I'm going to inject that one inside the dev

90
00:06:53,350 --> 00:06:53,740
here.

91
00:06:54,400 --> 00:06:56,530
So I can display it to the user.

92
00:06:56,560 --> 00:06:58,870
That is the index dot JS.

93
00:06:59,580 --> 00:07:06,030
And then the last one is the up cheese, which is the root of our application.

94
00:07:06,030 --> 00:07:08,370
So don't worry about it right now.

95
00:07:08,550 --> 00:07:09,420
So.

96
00:07:10,490 --> 00:07:11,210
That is it.

97
00:07:11,300 --> 00:07:15,280
But for the structure here, you have dot, dot, get ignore.

98
00:07:15,290 --> 00:07:19,190
And these are folders that you don't want to push to get hub.

99
00:07:19,190 --> 00:07:19,390
Right.

100
00:07:19,400 --> 00:07:25,190
For example, the node modules here and then the other folders build and many more here.

101
00:07:25,820 --> 00:07:26,270
All right.

102
00:07:26,270 --> 00:07:36,200
Then we have the one file called package dot dash locked JSON file because this one was generated using

103
00:07:36,200 --> 00:07:41,700
NPM because I have to, I mean to installer and PM and John.

104
00:07:41,720 --> 00:07:43,820
So I have a locked or JSON file.

105
00:07:43,850 --> 00:07:45,410
Yes, I can remove that one.

106
00:07:45,980 --> 00:07:50,690
And now the most important one is called the package, the JSON file.

107
00:07:50,810 --> 00:07:55,820
And this one contains our script tag.

108
00:07:55,850 --> 00:07:59,380
If we want to run the application, we're going to use the script tag.

109
00:07:59,480 --> 00:08:03,890
We have name here which contain the name of application.

110
00:08:03,890 --> 00:08:09,380
We can rename it and the version of application and we have some dependencies here.

111
00:08:09,890 --> 00:08:16,040
So dependency simply means that what our React application depends on, it depends on some of this one

112
00:08:16,040 --> 00:08:18,950
react, the DOM, the script and the on.

113
00:08:19,640 --> 00:08:24,830
And then if you come up here see that we have some of the important script that you need to be familiar

114
00:08:24,830 --> 00:08:25,490
with.

115
00:08:25,490 --> 00:08:34,520
We have start we use this one to start our React application and build is used to build application

116
00:08:34,520 --> 00:08:41,600
and test and eject and these are just browser lists for me configuration here.

117
00:08:41,870 --> 00:08:45,530
So we work mostly inside this one, not even work here.

118
00:08:45,530 --> 00:08:47,810
You are just going to use this a.

119
00:08:49,140 --> 00:08:52,410
Script core start to start our application.

120
00:08:52,830 --> 00:09:01,110
So now that we we know the structure of that application, how are we going to start our display react

121
00:09:01,110 --> 00:09:02,010
application?

122
00:09:02,190 --> 00:09:05,760
And that is what you are going to do in the next video.