Folder structure of ReactJS Application
After you run 'create-react-app' command, your folder structure should look like the following.
- node_modules Contains all the dependencies of the application
Contains static files like index.html, favicon.ico, manifest.json
- favicon.ico favicon of the application
- index.html HTML file in which application code is added and it is the start URL of application
- manifest.json provides information about application
- srcContains all the code.
- package.json JSON file which lists all the dependencies and other information about project
- package-lock.json Automatically generated JSON file
- README.md Used for the developer, write build process ane etc.
"node_modules" folder contains project dependencies and development dependencies.
Project dependencies and development dependencies are listed in package.json file.
Libraries like react and react-dom which are needed to create ReactJS application are added into node_modules. These libraries are imported into code and then used.
Code bundlers like Web pack find these dependencies and bundle them into deployable code.
Apart from libraries, you will need some other libraries or packages which are used to build the application, for unit testing.
You may be using grunt, Webpack, babel for building the application.
public folder contains the files which are not going included by Webpack ( bundler ) in a building process.
So in short, static files like favicon.ico, root URL HTML page (index.html) and manifest.json file.
index.html file is where ReactJS will inject code. It contains
title of ReactJS application.
It also contains root element
<div id="root"></div> in which HTML of components are added.
You can change the
id of the element but for that, you need to change the code also. We will see that.
It also contains link to manifest.json file and favicon. manifest.json and favicon.ico file are linked via
%PUBLIC_URL%. During the build,
%PUBLIC_URL% will be compiled to proper path.
manifest.json file provides the information about the application like name, short name, icon, etc. This is very useful when the user adds the web application to a mobile home screen.
src folder contains all the code of ReactJS application. That code will be built and deployed.
package.json file lists application dependencies and development dependencies.
package-lock.json file is generated automatically when you have npm version >= 5.x.x. package-lock.json file is very useful in maintaining versions of the dependencies.
README.md file contains all the information about a project which is useful to understand the project.
In this section, you learned about initial ReactJS application folder structure.
In the next section, you will learn about component in ReactJS.