Project structure overview in React - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the main React library.

React

import [1] from 'react';

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

AReact

BreactDOM

CComponent

DuseState

Attempts:

3 left

💡 Hint

Common Mistakes

Using reactDOM instead of React

Importing useState directly here

The main React library is imported using React.

2fill in blank

medium

Complete the code to create a functional component named App.

React

function [1]() {
  return <div>Hello World</div>;
}

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

AComponent

BMain

CApp

DRoot

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'Main' or 'Root' instead of 'App'

The main component is usually named App in React projects.

3fill in blank

hard

Fix the error in the import statement for a component named Header.

React

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

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

Aheader

BHeader

CheaderComponent

DheaderComp

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase names for components

Misspelling the component name

Component names in React must start with a capital letter, so Header is correct.

4fill in blank

hard

Fill both blanks to export the App component as default and import React.

React

[1] React from 'react';

function App() {
  return <div>Welcome</div>;
}

export [2] App;

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

Aimport

Bdefault

Cexport

DReact

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'export' instead of 'import' for React

Not using 'default' in export

We import React with import and export the component as default.

5fill in blank

hard

Fill all three blanks to create a React component that uses useState to toggle text.

React

import React, [1] from 'react';

function Toggle() {
  const [isOn, setIsOn] = [2](false);

  return (
    <button onClick={() => setIsOn(!isOn)}>
      { [3] ? 'ON' : 'OFF' }
    </button>
  );
}

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

AuseState

BuseEffect

CisOn

DuseRef

Attempts:

3 left

💡 Hint

Common Mistakes

Using useEffect or useRef instead of useState

Using wrong variable name in JSX

We import useState, call it to create state, and use the state variable isOn to show text.

Practice

1. Which folder in a React project usually contains reusable UI pieces like buttons or headers?

easy

A. pages/

B. components/

C. styles/

D. public/

Solution

1. Step 1: Understand folder purposes

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

2. Step 2: Compare with other folders

   public/ holds static files, styles/ holds CSS, and pages/ holds full page components.

3. Final Answer:

   components/ -> Option B

4. Quick Check:

   Reusable UI pieces = components/ [OK]

Hint: Reusable UI parts go in components/ folder [OK]

Common Mistakes:

• Confusing public/ with components/
• Putting styles in components/
• Using pages/ for small UI parts

2. Which file is typically found inside the public/ folder in a React project?

easy

A. index.html

B. Button.jsx

C. App.js

D. styles.css

Solution

1. Step 1: Identify public folder role

   The public/ folder holds static files served directly, like index.html.

2. Step 2: Match files to folders

   App.js and Button.jsx are source code files, styles.css is usually in styles/.

3. Final Answer:

   index.html -> Option A

4. Quick Check:

   Static files like index.html = public/ [OK]

Hint: index.html is always in public/ folder [OK]

Common Mistakes:

• Putting App.js in public/
• Confusing styles.css location
• Thinking Button.jsx is static file

3. Given this React project structure inside src/:

src/
  components/
    Header.jsx
  pages/
    Home.jsx
  styles/
    main.css

Where should you import Header to use it on the home page?

medium

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

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

C. import Header from '../pages/Header';

D. import Header from './Header';

Solution

1. Step 1: Locate Home.jsx and Header.jsx relative paths

   Home.jsx is inside pages/, Header.jsx is inside components/ at the same src level.

2. Step 2: Determine correct import path

   From pages/Home.jsx, since pages/ and components/ are sibling folders under src/, go up one level with '..' to src/ then into components/: '../components/Header'.

3. Step 3: Check options carefully

   import Header from './components/Header'; uses './components/Header' which assumes components inside pages/, which is incorrect. import Header from '../components/Header'; uses '../components/Header' which is correct.

4. Final Answer:

   import Header from '../components/Header'; -> Option A

5. Quick Check:

   Relative import from pages to components = ../components/Header [OK]

Hint: Use ../ to go up one folder from pages to src [OK]

Common Mistakes:

• Using ./components from pages/
• Importing from pages/ folder
• Forgetting relative path syntax

4. You see this import in a React file:
import styles from './styles.css';
But the styles folder is inside src/, at the same level as components/, and the file is inside src/components/. What is wrong?

medium

A. The import should be './styles/styles.css' instead

B. You cannot import CSS files in React

C. The import path should be '../styles/styles.css' to go up one folder

D. The styles folder should be inside components/

Solution

1. Step 1: Understand folder locations

   The file is in src/components/, styles folder is in src/. To import styles.css inside styles/, you must go up one level from components/.

2. Step 2: Fix import path

   Using './styles.css' looks for styles.css inside components/, which is wrong. The correct path is '../styles/styles.css'.

3. Step 3: Check options

   The import path should be '../styles/styles.css' to go up one folder correctly identifies the need to go up one folder into the styles folder. You cannot import CSS files in React is false (CSS can be imported). The import should be './styles/styles.css' instead looks inside components/. The styles folder should be inside components/ suggests wrong folder placement.

4. Final Answer:

   The import path should be '../styles/styles.css' to go up one folder -> Option C

5. Quick Check:

   Go up one folder to access styles folder [OK]

Hint: Use ../ to go up from components to src for styles [OK]

Common Mistakes:

• Using ./ without going up folder
• Thinking CSS can't be imported
• Wrong folder nesting assumptions

5. You want to organize a React project with these goals:
- Keep reusable UI parts separate
- Have full pages grouped
- Store CSS files in one place
- Serve static files like images and index.html

Which folder structure best fits these goals inside src/ and public/?

hard

A. src/ui/, src/screens/, src/css/, public/assets/

B. src/, public/components/, public/pages/, public/styles/

C. src/components/, src/pages/, public/styles/, public/

D. src/components/, src/pages/, src/styles/, public/

Solution

1. Step 1: Match goals to folder roles

   Reusable UI parts go in components/, full pages in pages/, CSS in styles/, static files like images and index.html in public/.

2. Step 2: Evaluate options

   src/components/, src/pages/, src/styles/, public/ matches exactly: src/components/, src/pages/, src/styles/, public/. src/ui/, src/screens/, src/css/, public/assets/ uses non-standard folder names and puts static files in public/assets/ only. src/components/, src/pages/, public/styles/, public/ puts styles in public/, which is not typical. src/, public/components/, public/pages/, public/styles/ puts components and pages in public/, which is incorrect.

3. Final Answer:

   src/components/, src/pages/, src/styles/, public/ -> Option D

4. Quick Check:

   Standard React folders = components, pages, styles, public [OK]

Hint: Use components, pages, styles in src and public for static files [OK]

Common Mistakes:

• Putting CSS in public/
• Using non-standard folder names
• Mixing src and public roles