In this video, let's explore the folder structure of React Project.
When you create a new React project, you will notice that there are few files and folders generated
by default.
Which are these ones?
So let's have a look at each and see what they are doing over here.
The first one is called the node underscore modules.
If you open it, you can see that we have bunch of subfolders in that.
So this folder contains all the external dependencies required by your React app.
And you shouldn't need to touch this folder very often.
And since I use React, I don't even touch this folder.
So what it means is that it contains all the dependencies that makes your React application run successfully.
So the next folder that we have is called the public, which is this folder.
So the public folder contains all the static assets of your app that need to be publicly visible.
For example, the index dot HTML is placed in here.
So any asset that you want to display to the user is being put inside this public folder.
And if we see that, if you open it for React, we only have one HTML.
All right.
That is crazy, right?
One HTML.
And we have some five account here.
And the logo, if I click on that, you see that I have the logo I need to download while it's open
here, I'm working my extension and we have don't worry about this manifestation for here.
This is for the purposes.
After you deploy application, you need to customize the colors and maybe the name of the applications
inside the manifest JSON file.
So if you look at the final one, sorry, my application I be using React.
If we see that, let's go home here you can see that I have this five account here.
It was being customized inside this folder, this file and the manufactured JSON file.
We have the CC of the image, which is this one file bitcoin here and the size of it and the type.
These are by default into customize the logo.
We can change this one by placing it inside this main public folder.
So anything that you want it to be public is being placed in here.
We see that we have the five icon for mine.
It is this one.
Is not is public.
Right.
And the next one is going to be the logo as well.
And the logo to this my logo here, I put them inside that.
So that is a public folder for you.
And if you open the index here, you're familiar with the HTML, Right.
And see, that is exactly the same as 18.
There are some few files here to me going on here that is crazy.
So that we have the head tag here and then we have the some metadata here I that.
And then in here you only have one day, which is give by ID and root.
So inside here is what React is going to inject or display a component inside this particular div.
We will talk more about this.
Just have a look at the folder structure of React project.
Right.
Cool.
So the next folder, let me collect the public folder here.
So here you can also put your custom images by create a folder called asset or images and place it in
here.
So the next one that I'm going to talk about is called the S.
I see that the source folder.
So this is where the majority of your development work will take place or the JavaScript code for your
app should go here.
So for this exercise, see, don't worry, we have app CSS.
So we also have going to read some CSS code is being put inside this zip folder and then we have up
the JS file that contains some files.
This a component you talk about very soon.
And then we have a follow up test.
If we do some test cases here, we need to use this one.
But for me, I've never used this one before.
And we also have some CSS folder called Index eight CSS and we have our JavaScript file that goes in
here inside the index JS file and we have the logo, the SVG report, web, vitals, the JS, and we
have set up some test cases here.
So here too we can put our custom JavaScript, see that it contains the JavaScript of our project and
we'll talk more about what these files are doing here.
We see that there are some naming conventions here.
these two files.
App and an index that forwards JavaScript right by one is being written as Uppercase A and one is written
as small or lowercase.
I indexed.
So what the difference is, any time you see uppercase with a basket like this one, maybe uppercase
in the file, it tells you that is a component.
And we talk about it more when you get back to the component section of this course, that's SLC folder
for you.
And then I think now that we have understood, understand some of the basic territory of our structure.
Let's take a look at some of the files inside.
The two most important files are index dot JS and app JS.
Like I said, we have these two files inside.
So what is the index?
That index, the GS file doing here?
If you open it, you see that there are a few files here.
So this is an entry point for your React application.
It is used to render the app G is in the root element.
Okay.
And then you see that we have it here.
And then if you look at the public folder here and index, I'm going to inject that one inside the dev
here.
So I can display it to the user.
That is the index dot JS.
And then the last one is the up cheese, which is the root of our application.
So don't worry about it right now.
So.
That is it.
But for the structure here, you have dot, dot, get ignore.
And these are folders that you don't want to push to get hub.
Right.
For example, the node modules here and then the other folders build and many more here.
All right.
Then we have the one file called package dot dash locked JSON file because this one was generated using
NPM because I have to, I mean to installer and PM and John.
So I have a locked or JSON file.
Yes, I can remove that one.
And now the most important one is called the package, the JSON file.
And this one contains our script tag.
If we want to run the application, we're going to use the script tag.
We have name here which contain the name of application.
We can rename it and the version of application and we have some dependencies here.
So dependency simply means that what our React application depends on, it depends on some of this one
react, the DOM, the script and the on.
And then if you come up here see that we have some of the important script that you need to be familiar
with.
We have start we use this one to start our React application and build is used to build application
and test and eject and these are just browser lists for me configuration here.
So we work mostly inside this one, not even work here.
You are just going to use this a.
Script core start to start our application.
So now that we we know the structure of that application, how are we going to start our display react
application?
And that is what you are going to do in the next video.