Project structure overview in React - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of the src folder in a React project?

The src folder holds all the source code files like components, styles, and utilities that make up the React app.

beginner

Why do React projects often have a public folder?

The public folder contains static files like the main HTML file and images that do not change and are served directly to the browser.

beginner

What is the role of package.json in a React project?

package.json lists the project dependencies, scripts, and metadata. It helps manage libraries and commands for the React app.

beginner

Where do you usually put reusable UI parts in a React project?

Reusable UI parts are usually placed inside a components folder within src to keep code organized and easy to maintain.

intermediate

What is the benefit of organizing files by feature or domain in a React project?

Organizing by feature groups related files together, making the project easier to understand and scale as it grows.

Which folder usually contains the main HTML file in a React project?

A src

B components

C public

D node_modules

The public folder holds static files like the main HTML file.

Where do you put React components in a typical project structure?

A src/public

B public/components

C node_modules/components

D src/components

React components are placed inside src/components for organization.

What file lists the dependencies and scripts for a React project?

A package.json

B index.html

C README.md

D webpack.config.js

package.json manages dependencies and scripts.

Why is the src folder important?

A It contains the source code of the app

B It holds static images

C It stores build files

D It contains node modules

src is where the app's source code lives.

What is a good reason to organize files by feature in React?

A Improves browser speed

B Makes the project easier to scale and understand

C Avoids using components

D Reduces the number of files

Organizing by feature groups related code, helping with scaling and clarity.

Describe the main folders and files you find in a React project and their roles.

Think about where code lives, where static files go, and how dependencies are managed.

Explain why organizing React project files by feature or domain can help in development.

Consider how grouping things by what they do helps teamwork and growth.