Single Page Application concept in React - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a React component that returns a simple heading.

React

function Welcome() {
  return <h1>[1]</h1>;
}

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

AHello, SPA!

B<h1>Hello, SPA!</h1>

C{Hello, SPA!}

D"Hello, SPA!"

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting quotes around the string

Returning raw text without JSX tags

The component must return JSX with a string inside the <h1> tags. The string must be in quotes but without extra braces.

2fill in blank

medium

Complete the code to import React's useState hook for managing component state.

React

import React, [1] from 'react';

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

AuseEffect

BuseContext

CuseState

DuseRef

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing useState with useEffect

Forgetting to import the hook

useState is the hook used to add state to functional components in React.

3fill in blank

hard

Fix the error in the code to correctly update state on button click.

React

const [count, setCount] = useState(0);

function increment() {
  setCount([1]);
}

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

Acount + 1

Bcount++

C++count

Dcount += 1

Attempts:

3 left

💡 Hint

Common Mistakes

Using count++ which returns the old value

Trying to modify state directly

State updates must use the new value directly. Using count + 1 returns the incremented value correctly.

4fill in blank

hard

Fill both blanks to create a simple SPA navigation using React Router.

React

import { BrowserRouter as [1], Route, Routes } from 'react-router-dom';

function App() {
  return (
    <[2]>
      <Routes>
        <Route path="/" element={<Home />} />
      </Routes>
    </[2]>
  );
}

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

ARouter

BRouterProvider

CBrowserRouter

DSwitch

Attempts:

3 left

💡 Hint

Common Mistakes

Using Switch which is deprecated in React Router v6

Confusing Router with BrowserRouter

BrowserRouter is the component that enables SPA navigation in React Router v6.

5fill in blank

hard

Fill all three blanks to create a React component that fetches data on mount and shows loading state.

React

import { useState, [1] } from 'react';

function DataFetcher() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  [2](() => {
    fetch('/api/data')
      .then(res => res.json())
      .then(json => {
        setData(json);
        setLoading(false);
      });
  }, [3]);

  if (loading) return <p>Loading...</p>;
  return <pre>{JSON.stringify(data, null, 2)}</pre>;
}

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

AuseEffect

B[]

C[ ]

DuseMemo

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting to import useEffect

Passing no dependency array causing infinite loops

Using useMemo instead of useEffect

useEffect runs code on mount. The empty array [] as dependency means it runs only once.