🎉 Everything is free here. Read more →
Tutorial
React Tutorial
Folder Structure

Structure of a React App

🎉

Read This on Github

This article is available on Github. You can read it there and contribute to it.
Github Link
Any Issue ?

⭐ Structure of a React App

Explanation

  1. First fire up your terminal and create a new react app using the following command.
npx create-react-app structure-explain-codexam
  1. This will create a new folder named structure-explain-codexam and will install all the dependencies required for a react app. Now redirect to the folder using the following command.
cd structure-explain-codexam
  1. For starting the development server, use the following command.
npm start
  1. If you want to stop the development server, press Ctrl+C in the terminal.
  • Now open the folder in your code editor and you will see the following structure.
structure-explain-codexam
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── reportWebVitals.js
    ├── setupTests.js
    └── logo.svg

⭐ Package.json

Explain

Then what is name: 😥❓

The name field specifies the name of the package. It must be a lowercase string, and can contain letters, numbers, and hyphens. In this example, the name of the package is "structure-explain-codexam".

package.json
{
    "name": "structure-explain-codexam",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
},
    "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
},
    "eslintConfig": {
    "extends": [
    "react-app",
    "react-app/jest"
    ]
},
    "browserslist": {
    "production": [
    ">0.2%",
    "not dead",
    "not op_mini all"
    ],
    "development": [
    "last 1 chrome version",
    "last 1 firefox version",
    "last 1 safari version"
    ]
}
}

⭐ Quick MCQs

Quick Question no 1

  1. What is the recommended file structure for a React application?

Answer

Answer: A. src/components, src/containers, src/actions, src/reducers Explanation: The recommended file structure for a React application is to separate components, containers, actions, and reducers into their own directories. This allows for easy organization and maintenance of the application's codebase.

Quick Question no 2

  1. Where should you store your application's global styles?

Answer

Answer: B. src/styles

Explanation: It is best practice to store your application's global styles in a separate directory, such as "src/styles", to keep them separate from your component-specific styles.

Quick Question no 3

  1. What is the purpose of the "src/actions" directory in a React application?

Answer

Answer: C. To store the application's action creators

Explanation: The "src/actions" directory is typically used to store the application's action creators, which are functions that create and return action objects that will be used to update the application's state.

Quick Question no 4

  1. What is the purpose of the "src/reducers" directory in a React application?

Answer

Answer: D. To store the application's reducers

Explanation: The "src/reducers" directory is typically used to store the application's reducers, which are functions that handle the application's state updates in response to actions.

Quick Question no 5

  1. What is the purpose of the "src/containers" directory in a React application?

Answer

Answer: B. To store the application's container components

Explanation: The "src/containers" directory is typically used to store the application's container components, which are responsible for connecting the application's state and actions to its presentational components.

Quick Question no 6

  1. What is the purpose of the "src/components" directory in a React application?

Answer

Answer: A. To store the application's presentational components

Explanation: The "src/components" directory is typically used to store the application's presentational components, which are responsible for rendering the UI of the application based on the provided props.

Quick Question no 7

  1. What is the main file in a React application?

Answer

Answer: A. index.js

Explanation: The main file in a React application is typically named "index.js" and is located in the "src" directory. This file is responsible for rendering the application's root component to the DOM.

Quick Question no 8

  1. What is the purpose of the "src/lib" directory in a React application?

Answer

Answer: B. To store the application's external libraries

Explanation: The "src/lib" directory is typically used to store any external libraries or modules that the application depends on, such as third-party packages or custom utility functions.

Quick Question no 9

  1. What is the purpose of the "src/utils" directory in a React application?

Answer

Answer: A. To store the application's utility functions

Explanation: The "src/utils" directory is typically used to store any utility functions that are used throughout the application, such as helper functions for formatting data or handling specific logic.

Quick Question no 10

  1. What is the purpose of the "src/assets" directory in a React application?

Answer

Answer: A. To store the application's static assets such as images, fonts, and media files

Explanation: The "src/assets" directory is typically used to store any static assets that the application uses, such as images, fonts, and media files. This allows for easy organization and management of these assets within the application.

Installationjsx