Managing large applications in React - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import a component from a separate file.

React

import [1] from './Header';

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

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

AHeader

Bheader

CAppHeader

DheaderComponent

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase names for components in import statements.

Mismatching the component name with the exported name.

React components are imported by their exact exported name, which is usually capitalized.

2fill in blank

medium

Complete the code to create a context for sharing data across components.

React

import { createContext } from 'react';

const UserContext = [1]();

export default UserContext;

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

AuseContext

BuseEffect

CuseState

DcreateContext

Attempts:

3 left

💡 Hint

Common Mistakes

Using useContext instead of createContext to create a context.

Confusing hooks with context creation functions.

createContext() is used to create a new context object in React.

3fill in blank

hard

Fix the error in the code to properly provide context to child components.

React

import UserContext from './UserContext';

function App() {
  const user = { name: 'Alice' };

  return (
    <UserContext.[1] value={user}>
      <Dashboard />
    </UserContext.[1]>
  );
}

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

AConsumer

BProvider

CContext

DWrapper

Attempts:

3 left

💡 Hint

Common Mistakes

Using Consumer instead of Provider to supply context.

Using incorrect component names like Context or Wrapper.

The Provider component is used to supply context values to child components.

4fill in blank

hard

Fill both blanks to correctly use React.lazy and Suspense for code splitting.

React

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

const LazyComponent = [2](() => import('./LazyComponent'));

function App() {
  return (
    <React.Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </React.Suspense>
  );
}

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

Alazy

BuseState

CuseEffect

Dmemo

Attempts:

3 left

💡 Hint

Common Mistakes

Using useState or useEffect instead of lazy for code splitting.

Not importing lazy from React.

React.lazy is used to load components lazily, and it must be imported from React.

5fill in blank

hard

Fill all three blanks to create a custom hook that manages a counter state.

React

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

function useCounter(initialValue) {
  const [count, setCount] = [3](initialValue);

  const increment = () => setCount(count + 1);

  return { count, increment };
}

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

AuseState

BuseEffect

DuseReducer

Attempts:

3 left

💡 Hint

Common Mistakes

Using useEffect instead of useState for state management.

Not importing useState correctly.

useState is imported and used to create state in a custom hook. useEffect is often imported but not used here, so it's a distractor.