Creating first React app - Practice Exercises

Challenge - 5 Problems

❓ component_behavior

intermediate

What will this React component display?

Consider this React functional component. What text will appear on the screen when it renders?

React

import React from 'react';

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

A Error: name is not defined

B Hello, Alex!

C Hello, name!

D Hello, {name}!

💡 Hint

Look at how JavaScript variables are used inside JSX with curly braces.

The component uses curly braces to insert the value of the name variable inside the JSX. So it shows 'Hello, Alex!'.

📝 Syntax

intermediate

Which option correctly defines a React functional component?

Choose the option that correctly defines a React functional component named Welcome that returns a <div> with text 'Welcome!'.

A const Welcome = () => <div>Welcome!</div>;

B function Welcome() { return <div>Welcome!</div>; }

C const Welcome = () => { <div>Welcome!</div> }

D function Welcome() { <div>Welcome!</div> }

💡 Hint

Remember that arrow functions need to return JSX explicitly or implicitly.

Option A uses an arrow function with implicit return of JSX, which is correct. Option A is valid JavaScript but lacks export or const, so less preferred. Options B and D miss return statements causing errors.

❓ state_output

advanced

What is the displayed count after clicking the button twice?

This React component uses state. What number will show after clicking the button two times?

React

import React, { useState } from 'react';

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

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

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

A Count: 3

B Count: 2

C Count: 0

D Count: 1

💡 Hint

Remember React state updates are asynchronous and batched.

In the increment function, both setCount(count + 1) calls capture the same current count value due to closure and batching. Thus, each button click increases the count by 1 only. After two clicks, the count is 2.

🔧 Debug

advanced

Why does this React component produce a console warning?

This component produces a console warning when rendered. What is the cause?

React

import React from 'react';

export default function List() {
  const items = ['a', 'b', 'c'];
  return (
    <ul>
      {items.map(item => <li>{item}</li>)}
    </ul>
  );
}

A Missing unique 'key' prop on list items

B Array 'items' is not defined

C JSX elements must be wrapped in a single parent element

D map function is not valid inside JSX

💡 Hint

React requires a special prop for lists to track items efficiently.

React needs a unique key prop on each list item to identify elements during updates. Missing keys cause warnings.

🧠 Conceptual

expert

What happens if you call a React hook conditionally inside a component?

Consider this code snippet inside a React functional component:

if (someCondition) {
  const [value, setValue] = useState(0);
}

What is the result of calling a hook conditionally like this?

A React automatically adjusts hook calls based on conditions

B The hook works fine only when someCondition is true

C React throws an error because hooks must be called unconditionally in the same order

D The hook is ignored when someCondition is false, no error occurs

💡 Hint

Hooks rely on consistent call order between renders.

React hooks must be called in the same order on every render. Calling them conditionally breaks this rule and causes errors.

Practice

1. What is the main purpose of the ReactDOM.createRoot method in a React app?

easy

A. It creates a new React component.

B. It tells React where to put the app in the HTML page.

C. It styles the React app automatically.

D. It fetches data from the server.

Solution

1. Step 1: Understand ReactDOM.createRoot usage

   This method is used to select the HTML element where the React app will appear, usually a div with id 'root'.

2. Step 2: Identify its role in rendering

   It creates a root for React to manage the app's UI inside that HTML element.

3. Final Answer:

   It tells React where to put the app in the HTML page. -> Option B

4. Quick Check:

   ReactDOM.createRoot sets the app's HTML container [OK]

Hint: ReactDOM.createRoot links React to HTML element [OK]

Common Mistakes:

• Thinking it creates components
• Confusing it with styling or data fetching
• Assuming it runs app logic

2. Which of the following is the correct way to define a simple React functional component named App?

easy

A. class App extends React.Component { render() { return 'Hello'; } }

B. const App = Hello;

C. function App() { return Hello; }

D. function App { return Hello; }

Solution

1. Step 1: Check function syntax for React component

   A React functional component is a function that returns JSX, so it needs parentheses after the name.

2. Step 2: Validate JSX return and syntax

   function App() { return
   Hello; } correctly defines a function named App that returns JSX inside a div.

3. Final Answer:

   function App() { return
   Hello
   ; } -> Option C

4. Quick Check:

   Functional component = function with () and JSX return [OK]

Hint: React components are functions returning JSX with () [OK]

Common Mistakes:

• Missing parentheses after function name
• Assigning JSX directly to a variable without function
• Using class syntax incorrectly for functional components

3. What will be displayed on the webpage after running this React code?

import React from 'react';
import ReactDOM from 'react-dom/client';

function App() {
  return 
Welcome to React!
;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

medium

A. undefined

B. App

C. Nothing, there is an error

D. Welcome to React!

Solution

1. Step 1: Understand what the App component returns

   The App function returns an <h1> element with the text 'Welcome to React!'.

2. Step 2: Check rendering process

   The root renders the App component inside the HTML element with id 'root', so the heading will appear on the page.

3. Final Answer:

   Welcome to React! -> Option D

4. Quick Check:

   App returns <h1>Welcome to React!</h1> [OK]

Hint: Component returns JSX shown on page [OK]

Common Mistakes:

• Thinking component name shows instead of its return
• Assuming error without checking code carefully
• Confusing JSX tags with plain text

4. Identify the error in this React app code:

import React from 'react';
import ReactDOM from 'react-dom/client';

function App() {
  return <h1>Hello World</h1>;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(App);

medium

A. App should be called as in render, not just App.

B. Missing import of ReactDOM.

C. Function App must return a string, not JSX.

D. document.getElementById('root') is incorrect.

Solution

1. Step 1: Check how render is called

   React expects a JSX element or component instance in render, so is correct, not just App.

2. Step 2: Understand difference between component and element

   App is a function, is JSX that creates an element from that function.

3. Final Answer:

   App should be called as <App /> in render, not just App. -> Option A

4. Quick Check:

   render needs JSX element like <App /> [OK]

Hint: Use to render component, not App alone [OK]

Common Mistakes:

• Passing function name instead of JSX element to render
• Confusing component function with element instance
• Ignoring JSX syntax rules

5. You want to create a React app that shows a greeting message inside a div with a class container. Which code correctly creates and renders this app?

hard

A. function App() { return Hello!; }
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render();

B. function App() { return Hello!; }
ReactDOM.render(, document.getElementById('root'));

C. const App = () => Hello!;
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(App);

D. function App() { return Hello!; }
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(App);

Solution

1. Step 1: Use correct JSX attribute for class

   In React, use className instead of class for CSS classes.

2. Step 2: Render the component as JSX element

   Use root.render(<App />) to render the component, not just the function name.

3. Final Answer:

   function App() { return <div className="container">Hello!</div>; } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<App />); -> Option A

4. Quick Check:

   Use className and render JSX element [OK]

Hint: Use className and render with [OK]

Common Mistakes:

• Using class instead of className in JSX
• Passing function name instead of JSX element to render
• Using old ReactDOM.render instead of createRoot