ReactJS Directory Structure and Workflow of React App
Table of Contents
- ReactJS Directory Structure
- Directory Structure of React App | React JS Project Directory Structure | React JS Tutorial
- Test your knowledge with a quick quiz:
- Workflow of React App
- The Workflow of React App - How the react app works | Full Information
- It’s Quiz Time!
ReactJS Directory Structure
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.
-
The assets contain media files like images, videos, JSON files, and more.
-
Components contain the presentational and stateless components.
-
Containers include the stateful components.
Directory Structure of React App | React JS Project Directory Structure | React JS Tutorial
Directory Structure of React App | React JS Project Directory Structure | React JS Tutorial
Test your knowledge with a quick quiz:
Which file holds the details of all the installed dependencies in React?
Select the correct answer
Workflow of React App
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
The Workflow of React App - How the react app works | Full Information
It’s Quiz Time!
