Folder structure best practices in React - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

How does this folder structure affect component imports?

Given this React folder structure:

src/
  components/
    Button/
      Button.jsx
      Button.css
    Header/
      Header.jsx
      Header.css
  App.jsx

What is the correct import statement for Button inside Header.jsx?

A import Button from '../Button.jsx';

B import Button from './Button.jsx';

C import Button from '../Button/Button.jsx';

D import Button from '../../Button/Button.jsx';

💡 Hint

Think about relative paths from Header folder to Button folder.

Since Header.jsx is inside Header/ and Button.jsx is inside sibling folder Button/, the relative path is ../Button/Button.jsx.

📝 Syntax

intermediate

Which folder structure supports scalable React features?

Which folder structure below best supports adding new features with isolated components and logic?

A

src/
  components/
    Button.jsx
    Header.jsx
  utils/
    helpers.js

B

src/
  components/
    Button/
      index.jsx
      styles.css
    Header/
      index.jsx
      styles.css

C

src/
  utils/
    api.js
    helpers.js
  components/
    Button.jsx
    Header.jsx

D

src/
  features/
    login/
      LoginForm.jsx
      loginSlice.js
    dashboard/
      Dashboard.jsx
      dashboardSlice.js

💡 Hint

Think about grouping by feature to keep related files together.

Option D groups code by feature, keeping components and state logic together, which helps scaling and maintenance.

🔧 Debug

advanced

Why does this import fail in this folder structure?

Given this folder structure:

src/
  components/
    common/
      Button.jsx
  pages/
    Home.jsx

Inside Home.jsx, this import is used:

import Button from '../../components/common/Button';

Why might this cause an error?

A The file extension .jsx must be included in the import.

B The relative path is incorrect; it should be '../components/common/Button'.

C Button.jsx is missing a default export.

D The components folder should be inside pages for this import to work.

💡 Hint

Check how many folders up Home.jsx is from components.

Home.jsx is inside pages/. To reach components/common/Button.jsx, you must go up one level: from pages/ to src/, then into components/common/. So the correct path is ../components/common/Button.

🧠 Conceptual

advanced

What is the main benefit of grouping by feature in React projects?

Why do many React projects organize folders by feature (e.g., login, dashboard) instead of by file type (e.g., components, utils)?

A It makes it easier to find and update all code related to a single feature.

B It reduces the total number of files in the project.

C It enforces using only functional components.

D It automatically improves app performance.

💡 Hint

Think about how developers work on features.

Grouping by feature keeps all related code together, making it simpler to maintain, test, and update features without hunting through many folders.

❓ state_output

expert

How does folder structure impact React state management clarity?

Consider a React app using Redux Toolkit with this folder structure:

src/
  features/
    cart/
      Cart.jsx
      cartSlice.js
    products/
      Products.jsx
      productsSlice.js
  app/
    store.js

What is the main advantage of this structure for understanding app state?

A Each feature folder contains its own state logic, making state changes easier to track and debug.

B All state logic is centralized in one file, reducing complexity.

C State is managed globally without separation, improving performance.

D State files are placed outside features to avoid coupling with UI components.

💡 Hint

Think about how grouping state with UI helps developers.

Keeping state logic (like slices) inside the feature folder groups UI and state together. This makes it easier to understand how state affects that feature and simplifies debugging.