ReactJS Directory Structure and Workflow of React App

Once you have created the ReactJS app, open its folders in the Sublime Text Editor. Here is how the directory structure or fold structure of the React app looks in the editor.

• package.json file

This file holds the dependencies. Whatever you install within the app project, it is stored in this file. You can explore all the dependencies in the package.json file. 

• node_modules

This folder holds the packages and libraries to make the development process easier. For instance, you can make use of some predefined functions from here instead of writing code from scratch. It is an auto-generated folder, and you are not supposed to make changes to it.

• public 

This folder holds a number of different files, including the index.html file. The index.html file is the only file used in the ReactJS project. This works as a unified page for all sorts of other HTML files. 

manifest.json

This file is used for the development of PWAs or Progressive Web Applications. If you want to create a PWA app, then this file plays a significant role. 

logo192.png

When you begin a new project in ReactJS using the create-react-app, this logo file gets loaded in your project. 

• src folder in React

index.js file

The index.js files are there to provide easy entry points for components. Even though they add noise, they simplify imports

app.css file 

The role of the app.css file in the ReactJS project is to style the app and components. 

• Other important files and folders

The other files and folders in the ReactJS directory include some assets, components, and containers.

1. The assets contain media files like images, videos, JSON files, and more.

2. Components contain the presentational and stateless components.

3. Containers include the stateful components. 

Directory Structure of React App | React JS Project Directory Structure | React JS Tutorial

Once you have created an app or project using create-react-app, you can view it in the browser. The development server shows up your app on localhost:3000. 

Here is how the app looks on the browser:

Now, let’s understand how a React app works. 

• Content Fetching

The content in the app is fetched from the App.js file which is located in the src folder. You can make changes to the app from the App.js file. 

Let’s try to modify the code in the App.js file and see how it works.

For example, remove the paragraph (p) and hyperlink (a) html tags from the above file and use h1 and h2 heading tags.

H1: I am a React App

H2: WsCube Tech

After making the changes, save the updated file using Command/Ctrl + S. The page in the browser will get updated. It will now look like this:

You can further make changes to the other classes for changing font size, colors, alignment, and more. On saving, these changes will be replicated automatically on the browser without needing refresh operation from your end.

• Working of React App

You can understand the workflow of your React application by visiting the index.js file. The ReactDOM package renders the components of the app. It attaches the components to HTML elements with an id value of root, as shown in the screenshot below.

This element can be found in the index.html file located in the public folder. Your app is completely attached to this file. The index.html uses div along with the id of the root.

You don’t need to modify the body tags. If needed, you can make changes to the heading or meta tags for search engine purposes. The meta tags include the tags for title, description, favicon, headings, etc. 

These changes will become applicable to your app once you save the updates.

The Workflow of React App - How the react app works | Full Information