In my previous article, you learned how to install and
create a project in React. Now, whenever we create a React project, it automatically creates a lot of files and folders. So, in this article, I am going to explain what these files and folders are.
When we create a React project, our application's structure looks like this.
node_modules
The node_modules folder holds all the dependencies and sub-dependencies of our project. We only had React, React DOM and React scripts but React scripts have a lot of other dependencies which are present inside this folder.
Public folder
Basically, this folder contains 3 files as we have seen.
- favicon.ico - it is an icon file which contains an icon which displays on the browser.
- index.html - it is an important file. Due to this file, the public folder, known as “root folder”, gets served by the web server in the end. Index.html is a single HTML page present in this project.
- manifest.json - this file contains a lot of information related to our application like short_name, name, icons, start_url, display etc. We can also define other metadata about our application.
src folder
This folder contains actual source code for developers. This is the place where our React application is present. We can create our own subdirectory inside this directory. For faster rebuilds, files inside only this folder are processed by Webpack. However, this folder already contains the following files.
- App.css - this file gives some CSS classes or we can say some styling which is used by App.js file.
- App.js - App.js is a sample React component called “App” which we get for free when creating a new app.
- App.test.js - this is the test file which basically allows us to create the unit tests for different units or we can say for different components.
- index.css - it stores the base styling for our application.
- index.js - index.js stores our main Render call from ReactDOM (more on that later). It imports our App.js component that we start with and tells React where to render it (remember that div with an id of root?).
- logo.svg - this is Scalable Vector Graphics file which contains the logo of Reactjs. By this file, we are able to see ReactJS logo on the browser.
- registerServiceWorker.js - as its name applies, it is important for registering a service which is generated automatically and creates Progressive Web Apps which are necessary for mobile React Native apps.
Package.json
It is a standard file found in every project. It contains the information like the name of project, versions, dependencies etc. Whenever we install a third party library, it automatically gets registered into this file.
Example - content of package.json file
A point to be remembered at the time of working with React applications is that, for the project to build, these files must exist with exact filenames.
- public/index.html is the page template;
- src/index.js is the JavaScript entry point.
We can delete or rename the other files.
Conclusion
I hope you can understand how we can create a React application or by default, what kind of folders and files they provide to us for working. All your queries related to this article and sample project are always welcomed. Thanks for reading.