What is React - Interactive Quiz & Practice

Practice - 5 Tasks

1fill in blank

easy

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

React

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

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

AHello, friend!

B{Hello, friend!}

C"Hello, friend!"

D<Hello, friend!>

Attempts:

3 left

💡 Hint

Common Mistakes

Using quotes (C) renders visible quotes.

Angle brackets (A) create invalid nested elements.

Braces without a valid expression (D) cause syntax errors.

In JSX, text content is placed directly between the opening and closing tags without quotes. Quotes would render as visible quotes in the output.

2fill in blank

medium

Complete the code to import React's useState hook.

React

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

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

AuseRef

BuseEffect

CuseContext

DuseState

Attempts:

3 left

💡 Hint

Common Mistakes

Importing useEffect instead of useState.

Forgetting to import the hook at all.

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

3fill in blank

hard

Fix the error in the React component by completing the return statement correctly.

React

function Welcome() {
  return [1];
}

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

A"Welcome to React!"

B<div>Welcome to React!</div>

CWelcome to React!

D{Welcome to React!}

Attempts:

3 left

💡 Hint

Common Mistakes

Returning plain text without JSX tags.

Returning a string literal without JSX.

React components must return JSX elements, which look like HTML tags. Returning just a string without JSX tags causes an error.

4fill in blank

hard

Fill both blanks to create a React component that uses useState to toggle text on button click.

React

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

function Toggle() {
  const [isOn, setIsOn] = [2](false);
  return (
    <button onClick={() => setIsOn(!isOn)}>
      {isOn ? 'ON' : 'OFF'}
    </button>
  );
}

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

AuseState

BuseEffect

CuseState()

DuseContext

Attempts:

3 left

💡 Hint

Common Mistakes

Importing the wrong hook.

Trying to use 'useState()' as if it were pre-called.

To use state in React, import useState and call it as a function to get the state and setter. Both blanks are filled with 'useState'.

5fill in blank

hard

Fill all three blanks to create a React component that displays a list of items using map.

React

function ItemList({ items }) {
  return (
    <ul>
      {items.[1](item => (
        <li key={item.[2]>{item.[3]</li>
      ))}
    </ul>
  );
}

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

Amap

Bid

Cname

Dfilter

Attempts:

3 left

💡 Hint

Common Mistakes

Using filter instead of map.

Using a non-unique key or missing key.

Displaying the wrong property.

Use the map method to loop over items. Use a unique key like id for each list item. Display the name property inside the list item.

Practice

1. What is React mainly used for?

easy

A. Writing server-side scripts

B. Managing databases

C. Building interactive user interfaces

D. Designing logos

Solution

1. Step 1: Understand React's purpose

   React is a tool to build parts of websites or apps that users interact with.

2. Step 2: Identify correct use case

   Among the options, only building interactive user interfaces matches React's main use.

3. Final Answer:

   Building interactive user interfaces -> Option C

4. Quick Check:

   React = interactive UI [OK]

Hint: React is for UI, not backend or design [OK]

Common Mistakes:

• Confusing React with backend frameworks
• Thinking React manages databases
• Assuming React is for graphic design

2. Which of the following is the correct way to define a React component?

easy

A. component MyComponent { return Hello; }

B. function MyComponent() { return Hello; }

C. def MyComponent(): return Hello

D. class MyComponent = () => Hello;

Solution

1. Step 1: Recall React component syntax

   React components can be functions returning JSX like function MyComponent() { return <div>Hello</div>; }.

2. Step 2: Check each option

   function MyComponent() { return
   Hello; } matches the correct function component syntax. Others use invalid or non-JS syntax.

3. Final Answer:

   function MyComponent() { return <div>Hello</div>; } -> Option B

4. Quick Check:

   Function component syntax = function MyComponent() { return
   Hello
   ; } [OK]

Hint: React components are functions returning JSX [OK]

Common Mistakes:

• Using Python or other language syntax
• Trying to declare components with 'component' keyword
• Incorrect arrow function syntax for components

3. What will this React component display?

function Greeting() {
  const name = 'Anna';
  return <h1>Hello, {name}!</h1>;
}

medium

A. Hello, Anna!

B. Hello, {name}!

C. Error: name is undefined

D. Hello, !

Solution

1. Step 1: Understand JSX expression usage

   The component uses curly braces {name} to insert the variable value 'Anna' inside the <h1> tag.

2. Step 2: Predict rendered output

   The output will be <h1>Hello, Anna!</h1> as the variable is correctly used.

3. Final Answer:

   <h1>Hello, Anna!</h1> -> Option A

4. Quick Check:

   JSX {variable} inserts value =

   Hello, Anna!

   [OK]

Hint: JSX uses { } to show variable values [OK]

Common Mistakes:

• Thinking JSX shows variable names literally
• Assuming variable is undefined
• Forgetting to use curly braces for variables

4. Find the error in this React component:

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

medium

A. Mismatched closing tag: </h2> instead of </h1>

B. Missing return statement

C. Function name should start with lowercase

D. JSX must be wrapped in a single tag

Solution

1. Step 1: Check JSX tags for correctness

   The opening tag is <h1> but the closing tag is </h2>, which is invalid in JSX.

2. Step 2: Confirm other parts are correct

   The return statement exists, function name is valid, and JSX is wrapped in a <div> tag.

3. Final Answer:

   Mismatched closing tag: </h2> instead of </h1> -> Option A

4. Quick Check:

   JSX tags must match exactly = Mismatched closing tag: </h2> instead of </h1> [OK]

Hint: Check opening and closing JSX tags match [OK]

Common Mistakes:

• Ignoring tag mismatch errors
• Thinking function names must be lowercase
• Missing that JSX needs one root element

5. You want to update a React component when data changes. Which React feature helps update the screen quickly?

hard

A. HTML forms

B. JSX syntax

C. CSS styling

D. Virtual DOM

Solution

1. Step 1: Understand React's update mechanism

   React uses a Virtual DOM to compare changes and update only what is needed on the screen.

2. Step 2: Identify the correct feature

   JSX is for describing UI, CSS styles appearance, HTML forms handle input, but Virtual DOM manages efficient updates.

3. Final Answer:

   Virtual DOM -> Option D

4. Quick Check:

   Fast updates = Virtual DOM [OK]

Hint: Virtual DOM speeds up UI updates [OK]

Common Mistakes:

• Confusing JSX with update mechanism
• Thinking CSS controls updates
• Assuming HTML forms handle UI refresh