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
  • public 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

"node_modules" folder contains project dependencies and development dependencies.
Project dependencies and development dependencies are listed in package.json file.

Project dependencies

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.

Development Dependencies

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

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

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

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

src folder contains all the code of ReactJS application. That code will be built and deployed.

Other files

  • package.json

    package.json file lists application dependencies and development dependencies.

  • package-lock.json

    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

    README.md file contains all the information about a project which is useful to understand the project.

Conclusion

In this section, you learned about initial ReactJS application folder structure.
In the next section, you will learn about component in ReactJS.