Project structure overview in React - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding React project folder roles

In a typical React project, which folder usually contains reusable UI components like buttons and headers?

A public

B src/components

C node_modules

D src/assets

💡 Hint

Think about where you keep pieces you use many times in your app.

The src/components folder holds reusable UI parts like buttons and headers. The public folder is for static files, node_modules stores installed packages, and src/assets holds images or styles.

❓ component_behavior

intermediate

Effect of placing files in public folder

What happens if you put an image file inside the public folder and reference it in your React app?

A The image will cause a build error.

B The image is bundled and optimized by React automatically.

C The image cannot be accessed by the app at all.

D The image is served as a static file and can be accessed via a URL path.

💡 Hint

Think about how static files are handled in web projects.

Files in the public folder are served directly as static assets. They are not processed by React but can be accessed via URL paths.

📝 Syntax

advanced

Correct import path for a component

Given a React project with this structure:

src/
  components/
    Button.jsx
  App.jsx

Which import statement correctly imports Button into App.jsx?

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

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

C import Button from './Button';

D import Button from 'components/Button';

💡 Hint

Consider the relative path from App.jsx to Button.jsx.

Since App.jsx and components are both inside src, the correct relative path is ./components/Button.

🔧 Debug

advanced

Why does this React app fail to find a CSS file?

A developer places styles.css inside src/assets but imports it in App.jsx as:

import '../assets/styles.css';

Why does this cause an error?

A The file extension must be .module.css to import CSS.

B CSS files cannot be imported in React components.

C The import path is incorrect because <code>App.jsx</code> is inside <code>src</code>, so '../assets' goes outside <code>src</code> which doesn't exist.

D The assets folder must be inside public to import CSS.

💡 Hint

Check the relative path carefully from App.jsx location.

Since App.jsx is inside src, using ../assets tries to go outside src, which is invalid. The correct path is ./assets/styles.css.

❓ state_output

expert

Effect of moving stateful logic to a separate folder

In a React project, a developer moves all custom hooks managing state from src/components to src/hooks. What is the main benefit of this change?

A It improves code organization by separating UI components from state logic, making the project easier to maintain.

B It automatically optimizes the app performance by React.

C It prevents components from re-rendering unnecessarily.

D It causes the app to break because hooks must be inside components.

💡 Hint

Think about how separating concerns helps in bigger projects.

Moving custom hooks to a dedicated src/hooks folder helps keep UI components focused on display, while hooks handle state logic. This separation makes the code cleaner and easier to maintain.