React JS

Understand The React Project Structure

Understand The React Project Structure

React Project Structure

If you look into the project structure, you'll see a /public and /src directory, along with the regular node_modules, .gitignore,, and package.json.


index.html is the page template, which is very similar to the static index.html
IMP: Only files inside public can be used from public/index.html

The /src directory will contain all our React code.
src/index.js is the JavaScript entry point.
IMP:Within src, subdirectories are permissible. Only the files in the src directory are handled by webpack to speed up rebuilds.
If you have any JS or CSS files, you must place them inside the src folder for webpack to recognise them.

/ Top Level Directories
But you can add extra top-level directories, out side publi and src.
You can use them for stuff like documentation because they won't be in the production build.

If your project is not a part of a bigger repository and you have Git installed, a new repository will be created and
a new top-level.git directory will be created.


node_modules is a folder that includes all of the dependency-related code that Create React App has installed.
You will never need to go into this folder.


.gitignore is a file that is used to exclude files and folders from being tracked by Git.
We don't want to include large folders such as the node_modules folder is a markdown file that includes a lot of helpful tips and links that can help you while learning to use Create React App.

manages our app dependencies and what is included in our node_modules folder for our project, plus the scripts we need to run our app.

Deepak Talwar

Deepak Talwar

Principal Software Engineer and Full Stack Developer with 12+ years of Professional Experience in Microsoft Technologies. Hands on experience with C#, ASP.NET, ASP.NET MVC, ASP.NET Core, WebAPI, Linq, Entity Framework, MS-SQL, NoSql, Javascript, Angular, jQuery, AWS, Azure, ReactJs, AngularJs, Laravel, Codeingiter, Serenity. VBA, Software Architecture, Web Design and Development.

Related Post


Create React App

October 19, 2022

About Us

Community of IT Professionals

A Complete IT knowledgebase for any kind of Software Language, Development, Programming, Coding, Designing, Networking, Hardware and Digital Marketing.