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.