React Folder Structure
In this article we will talk about the folder structure of react application.If you want to know what is react and how to create react application go to my previous article React Introduction and Creating react app.
When we run the command in our terminal to create react application the following initial project structure get generated inside our project directory as shown below:
Now one by one we will talk about each file and directory our react project contains :
.gitignore
This is the standard file used by Git to determine which files and directories to ignore, before you make a commit.
A .gitignore file should be committed into your repository, in order to share the ignore rules with any other users that clone the repository.
package.json
This file defines all the settings for the React project.
- name is the name of your app.
- version is the current version.
- “private”: true is a failsafe setting to avoid accidentally publishing your app as a public package within the npm ecosystem.
- dependencies contains all the required node modules and versions required for the application. In the screenshot above, the react version specified is ^16.8.3. This means that npm will install the most recent major version matching 16.x.x.
- It contains bydefault three Third party packages, which allow us to use react , react-dom and react-scripts in our react project.
react : This package is used to build the UI of our application.
react-dom : This package is used by react for working with DOM.
react-scripts : It includes scripts and configuration for bable , webpack used by create react app.
- scripts specifies aliases that you can use to access some of the react-scripts commands in a more efficient manner. For example running npm test in your command line will run react-scripts test behind the scenes.There are few scripts that you can use :
start : Runs the app in the development mode.It is run by the “npm start” command.
build : Builds the app for production to the `build` folder. It correctly bundles React in production mode and optimizes the build for the best performance. It is run by the “npm run build” command.
test : Launches the test runner in the interactive watch mode.It is run by the “npm test” command.
eject : This script is only used when you want to customize react-scripts and go on with your own.It is run by the “npm run eject” command.
package-lock.json
This file contains the exact dependency tree installed in node_modules/.
This file is automatically generated by package.json.It makes sure that your version numbers of your dependencies are locked in so if I gave this project to anybody else anywhere around the world we make sure that the versions are correct so that it works 100 percent of the time.
It also contains a history of changes to package.json, so you can quickly look back at dependency changes.
README.md
This file contains just the information that you remember. When you put it on Github it will display in the project directory.
node_modules
This directory contains dependencies and sub-dependencies of packages used by the current React app, as specified by package.json. If you take a look, you may be surprised by how many there are.There is no need to share this folder on github that’s why this folder is automatically added to the .gitignore.
Now when we clone project from github ,Inside the project directory we have to run the command npm install and it will create node_modules directory inside your project directory and inside node_modules directory all the dependencies you have defined inside package.json get installed automatically.
public
This directory contains assets that will be served directly without additional processing by webpack.
index.html : provides the entry point for the web app.It consist of only one div element which we will grab in our src/index.js( javascript entry point) by its id and inside which we will render our main App javascript component ie, App.js. When we run our app ,what we see up on the browser is App.js component.
favicon.ico (header icon) : It contains icon that can you see in the tab of your browser.There are online tools available like favicon generator using which we can create our own favicon.ico by providing it icon image.
manifest.json : The manifest.json is a simple JSON file that tells the browser about your web application and how it should behave when ‘installed’ on the user’s mobile device or desktop.Here behave means if we talk about mobile devices then how it look like in mobile’s home screen, how the app is going to launch and how its going to look.
src
This is the heart of the React app. For faster rebuilds, only files inside src are processed by Webpack. You need to put any JS and CSS files inside src, otherwise Webpack won’t see them. Browsing this folder, you see the main App JavaScript component (App.js), its associated styles (App.css), and test suite (App.test.js). index.js and its styles (index.css) provide an entry into the App and also kicks off the serviceWorker.js. This service worker takes care of caching and updating files for the end-user. It allows for offline capability and faster page loads after the initial visit. More on this methodology is available here http://bit.ly/CRA-PWA.
As your React app grows,You may also create subdirectories inside src. it is common to add a components/ directory to organize components and component-related files and a views/ directory to organize React views and view-related files.
I hope now you have a clear understanding of your react application folder structure and also what exactly these files and folders contains when you create react application.