What is React - Practice Questions & Exercises

Challenge - 5 Problems

🧠 Conceptual

intermediate

What is React primarily used for?

React is a popular tool in web development. What is its main purpose?

A Building user interfaces with reusable components

B Managing databases and server-side logic

C Styling web pages with CSS

D Writing backend APIs

💡 Hint

Think about what you see and interact with on websites.

React helps developers create parts of a website that users see and interact with. These parts are called components and can be reused.

❓ component_behavior

intermediate

What will this React component display?

Look at this React component code and choose what it shows on the screen.

React

import React from 'react';

function Greeting() {
  return <h1>Hello, friend!</h1>;
}

export default Greeting;

A A paragraph with the text 'Hello, friend!'

B An empty page with no text

C A button labeled 'Hello, friend!'

D A heading with the text 'Hello, friend!'

💡 Hint

Look at the HTML tag used inside the return statement.

The component returns an <h1> element with the text 'Hello, friend!'. This will show as a large heading on the page.

❓ state_output

advanced

What is the output after clicking the button twice?

Consider this React component. What number will it show after clicking the button two times?

React

import React, { useState } from 'react';

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

  function increment() {
    setCount(count + 1);
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Add</button>
    </div>
  );
}

export default Counter;

A Count: 1

B Count: 2

C Count: 0

D Count: NaN

💡 Hint

Each click increases the count by one.

The state starts at 0. Each button click adds 1. After two clicks, the count is 2.

📝 Syntax

advanced

Which option correctly defines a React functional component?

Choose the code that correctly defines a React functional component named Welcome that returns a greeting.

A function Welcome() { return <h2>Welcome!</h2>; }

B const Welcome = () => <h2>Welcome!</h2>;

C function Welcome() { <h2>Welcome!</h2> }

D const Welcome = () => { <h2>Welcome!</h2> }

💡 Hint

Look for the arrow function with an implicit return.

Option B uses an arrow function with an implicit return of JSX, which is valid. Option A is also valid. Option D lacks a return statement. Option C lacks a return statement.

❓ lifecycle

expert

What happens when the dependency array in useEffect is empty?

In React, what is the behavior of a useEffect hook with an empty dependency array?

React

import React, { useEffect } from 'react';

function Example() {
  useEffect(() => {
    console.log('Effect ran');
  }, []);

  return <div>Check console</div>;
}

export default Example;

A The effect runs only once after the component mounts

B The effect runs after every render

C The effect never runs

D The effect runs only when the component unmounts

💡 Hint

Think about when React runs effects with empty dependencies.

An empty dependency array means the effect runs once after the component appears on screen (mount). It does not run on updates or unmount.

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