Folder structure best practices in React - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import a component from the correct folder.

React

import Header from './[1]/Header';

Drag options to blanks, or click blank then click option'

Ahooks

Bcomponents

Cassets

Dutils

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'utils' or 'hooks' folder for components.

Importing from 'assets' which is for images or styles.

The components folder is the best place to keep React components like Header.

2fill in blank

medium

Complete the code to export a component as default from its file.

React

export default [1];

Drag options to blanks, or click blank then click option'

AReact

BuseEffect

CHeader

Dindex

Attempts:

3 left

💡 Hint

Common Mistakes

Exporting React or hooks instead of the component.

Using 'index' which is usually a file name, not a component.

The component name Header should be exported as default to be imported elsewhere easily.

3fill in blank

hard

Fix the error in the import statement to follow folder structure best practices.

React

import [1] from '../[1]/utils';

Drag options to blanks, or click blank then click option'

Ahooks

Bcomponents

Cassets

Dhelpers

Attempts:

3 left

💡 Hint

Common Mistakes

Importing utils from components folder.

Using assets folder for code imports.

The helpers or utils folder is the right place for utility functions, not components or assets.

4fill in blank

hard

Fill both blanks to create a folder structure for a feature with components and hooks.

React

src/[1]/[2]/useFeatureHook.js

Drag options to blanks, or click blank then click option'

Afeatures

Bcomponents

Chooks

Dutils

Attempts:

3 left

💡 Hint

Common Mistakes

Placing hooks directly under components folder.

Using utils folder for feature hooks.

Feature-specific hooks go inside the hooks folder within the features folder.

5fill in blank

hard

Fill all three blanks to create an index file exporting components from a folder.

React

export { default as [1] } from './[2]';
export { default as [3] } from './[3]';

Drag options to blanks, or click blank then click option'

AHeader

CFooter

DInput

Attempts:

3 left

💡 Hint

Common Mistakes

Mismatching export names and paths.

Exporting components not present in the folder.

The index file exports components by name and path. Here, Header and Footer are exported correctly.