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.