Introduction to Folder Structure in React

Introduction

In the previous article, we went through some basics of React.js. We saw how we can install React js and set up the environment. In this article, we will discuss the folder structure created during React app creation along with a simple demo.

Creating React applications

In order to create a React application, we will be using the create-react-app node_moduleprovided by React. This helps us by creating a consistent folder structure automatically so, that we don’t need to care about proper and valid folder structure. For this demo, I will be using Visual Studio Code.
Open Visual Studio Code > go to Terminal > open new terminal.
Folder Structure In React
Write the following command in Terminal and press Enter.
 
npx create-react-app ReactDemo

Folder Structure In React

After executing the command, it will take some time to create a React application and its related dependencies.

Folder Structure In React

Folder Structure In React

After successfully creating a React application, you can use the “cd reactdemo” command to navigate to the React application. To start running the React application, use the following command.
npm start

Folder Structure In React

After creating a React application, we will notice that in Terminal, it provides quick tips or commands that will help in executing the React application. For example –
  • npm start – This command will start the development server.
  • npm run build – Bundles the app into static files for production.
  • npm test – starts the test runner.
  • npm run object – Removes this tool and copies build dependencies, configuration files, and scripts into the app directory. If you do this, you can’t go back!

Folder Structure In React

After “npm start” command, it will open the application in a browser on port number 3000.

Folder Structure In React

Now, open App.js and change the code as “Hello world” and refresh the browser. It will display “Hello world” on the screen.

Folder Structure In React

Folder Structure In React

Folder Structure

The React application automatically creates required folders, as shown below.

Folder Structure In React

.gitignore – This file is the standard file which is used by source control tool git to identify which files and folders are need to be ignored while committing the code. Until and unless this file exists, the create-react-app command will not create a git repo in this folder.

Folder Structure In React

package.json – This file contains dependencies and scripts required for the project.

Folder Structure In React

This file contains all settings for React applications including:
  1. name – points to name of your app.
  2. version – refers to the current version that the application is using.
  3. “private”: true – is a foolproof setting which avoids accidentally publishing of your react app as a public package in npm ecosystem.
  4. Dependencies will contain all required node modules and versions required for the application. By default, 2 dependencies are added which include React and React-Dom that allow using JavaScript. In our demo, we are using React version 16.8.
  5. Scripts specify aliases that can be used to access some React command in a more efficient manner.
    • package-lock.json contain exact dependency tree to be installed in /node_modules. It helps while a team is working on private apps to ensure that they are working on the same version of dependencies and sub-dependencies. It also maintains a history of changes done in package.json so, that at any point of time, when required previous changes can be looked back in the package-lock.json file.
    • node_modules – This folder contains all dependencies and sub-dependencies specified in package.json used by React app. It contains more than 800 subfolders, this folder is automatically added in the .gitignore file.
    • public – This folder contains files which don’t require additional processing by webpack. The index.html file is considered as an entry point for the web application. Here, the favicon is a header icon and manifest.xml file contains configuration when your application is used for Android app.
    • src – This folder is the heart of React application as it contains JavaScript which needs to be processed by webpack. In this folder, there is a main component App.js, its related styles (App.css), test suite (App.test.js). index.js, and its style (index.css); which provide an entry point into the App. Lastly, it contains registerServiceWorker.js which takes care of caching and updating files for the end user. It helps in offline capability and faster page loading after the first visit.
After all this, we add /Component folder in src to add our custom component and its related files and /Views folder for adding React views and its related files.

Summary

In this article, we have learned to create a React application using create-react-app and its folder structure was created. In the next article, we are going to cover the basics of components and their types and usage in React applications.
Any question or feedback or suggestion, please do comment and let me know.

One comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s