Folder structure best practices in React - Cheat Sheet & Quick Revision

Recall & Review

beginner

Why is having a clear folder structure important in React projects?

A clear folder structure helps keep code organized, makes it easier to find files, and improves teamwork by making the project easier to understand.

beginner

What is a common way to organize components in a React project?

Group components by feature or purpose inside a components/ folder, with each component in its own folder containing its code, styles, and tests.

beginner

What folders are typically included at the root of a React project?

Common root-level folders include src/ for source code and public/ for static files. Inside src/, common folders include components/ for UI parts, hooks/ for custom hooks, and assets/ for images and styles.

intermediate

How should styles be organized in a React project?

Styles can be kept close to components, inside their folders, or in a shared styles/ folder for global styles. Using CSS modules or styled-components helps keep styles scoped and manageable.

intermediate

What is the benefit of grouping files by feature instead of by file type?

Grouping by feature keeps all related files together, making it easier to work on one part of the app without jumping between folders for components, styles, and tests.

Which folder usually contains reusable UI parts in a React project?

A assets/

B hooks/

C components/

D public/

The components/ folder holds reusable UI parts like buttons or cards.

Where should static files like images and icons be placed?

A public/

B hooks/

C src/

D components/

Static files are usually placed in the public/ folder to be served directly.

What is a good practice for organizing styles in React?

A Put all styles in one big CSS file

B Avoid using styles

C Write styles inline only

D Keep styles inside each component folder or use a shared styles/ folder

Keeping styles close to components or in a shared folder helps maintainability.

Why group files by feature instead of by file type?

A It keeps related files together for easier development

B It makes the project look bigger

C It hides files from other developers

D It reduces the number of folders

Grouping by feature keeps all related files together, simplifying work on that feature.

Which folder is best for custom React hooks?

A components/

B hooks/

C assets/

D public/

Custom hooks are usually placed in a hooks/ folder for clarity.

Describe a simple folder structure for a React project and explain why it helps.

Think about where you put components, styles, and images.

Explain the benefits of grouping React project files by feature instead of by file type.

Imagine working on one part of an app and finding everything in one place.