Understanding Folder Structure For React Project

In my previous article, we learned how to create a React JS application. We have gone through some basic understanding of React JS and technical aspects to start with React JS.

In this article, we will understand and see the folder structure of basic react app.

Creating React applications

We will try to create react application using command line.

Step 1

Open command prompt and go to the directory where you want to create your first react js application using below command

cd <directoryName> (example cd Desktop) If you want to create app on desktop

Step 2

Create react project with below command. Hellowreact is the name of project/folder. It will install all dependencies as well.

npx create-react-app hellowreact

Once done you will see below information in terminal widow. It means your first project has been created and you are ready to use it.

Open project using code editor Visual Studio Code.

Click on Open folder and go to the folder where project got created.

Select the folder and it will open in VS Code editor.

How to run React JS project

Click on “Terminal” menu in VS code and go to “New Terminal” submenu.

Terminal -> New Terminal

A terminal will get open with project path.

Type “npm start” in command terminal and it will open browser with localhost://3000 port.

Folder Structure

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

node_modules

This folder will contain all react js dependencies.

.gitignore

This file is used by source control tool to identify which files and folders should be included or ignored during code commit

package.json

This file contains dependencies and scripts required for the project.

Src folder

src is one of the main folder in react project.

Index.js

index.js is the file that will be called once we will run the project.

App.js

App.js is a component that will get loaded under index.js file. If we do any change in app.js file HTML component and save it it will reflect in localhost://3000

Summary

In this article, we have learned how to create a React app using create-react-app and then see the folder structure of basic react app.

In next article will try to understand what is component and how we can use them.