React vs traditional JavaScript - Interactive 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'

A<h1>Hello, friend!</h1>

B{Hello, friend!}

C"Hello, friend!"

DHello, friend!

Attempts:

3 left

💡 Hint

Common Mistakes

Putting quotes around text, which displays the quotes

Wrapping simple text in curly braces

In React JSX, text inside tags is written directly without quotes.

2fill in blank

medium

Complete the code to update state using React's useState hook.

React

const [count, setCount] = React.useState(0);

function increment() {
  setCount([1]);
}

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

A++count

Bcount++

Ccount + 1

Dcount += 1

Attempts:

3 left

💡 Hint

Common Mistakes

Using count++ which mutates the variable

Trying to assign with += inside setState

React state updates should use new values, not mutate existing ones.

3fill in blank

hard

Fix the error in the React event handler to correctly log the button click.

React

<button onClick=[1]>Click me</button>

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

A() => console.log('Clicked!')

Bconsole.log('Clicked!')

Cconsole.log

Dfunction console.log('Clicked!')

Attempts:

3 left

💡 Hint

Common Mistakes

Passing console.log('Clicked!') directly which runs immediately

Using invalid function syntax

Event handlers need a function, so wrap the log in an arrow function.

4fill in blank

hard

Fill both blanks to create a React component that renders a list from an array.

React

function ItemList() {
  const items = ['apple', 'banana', 'cherry'];
  return (
    <ul>
      {items.[1](item => <li key={item}>[2]</li>)}
    </ul>
  );
}

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

Amap

BforEach

Citem

Ditem.toUpperCase()

Attempts:

3 left

💡 Hint

Common Mistakes

Using forEach which returns undefined

Trying to display the whole array instead of each item

Use map to create elements from an array and display the item text.

5fill in blank

hard

Fill all three blanks to create a controlled input component in React.

React

function NameInput() {
  const [name, setName] = React.useState('');
  return (
    <input
      type="text"
      value=[1]
      onChange={e => [2](e.target.[3])}
      aria-label="Name input"
    />
  );
}

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

Aname

BsetName

Cvalue

Dname.length

Attempts:

3 left

💡 Hint

Common Mistakes

Using e.target.name instead of e.target.value

Not updating state on change

Setting value to something other than the state variable

The input's value is controlled by state, and onChange updates that state with the input's current value.

Practice

1. What is a key difference between React and traditional JavaScript when building web pages?

easy

A. React requires writing HTML only, traditional JavaScript uses CSS only.

B. React uses components and JSX, while traditional JavaScript manipulates the DOM directly.

C. React cannot update the page dynamically, traditional JavaScript can.

D. React uses server-side rendering only, traditional JavaScript is client-side only.

Solution

1. Step 1: Understand React's approach

   React builds UI using components and JSX, which is a syntax that looks like HTML inside JavaScript.

2. Step 2: Understand traditional JavaScript approach

   Traditional JavaScript changes the page by directly manipulating the DOM elements, which can be more complex and error-prone.

3. Final Answer:

   React uses components and JSX, while traditional JavaScript manipulates the DOM directly. -> Option B

4. Quick Check:

   React uses components and JSX = A [OK]

Hint: React uses components; traditional JS changes DOM directly [OK]

Common Mistakes:

• Thinking React only uses HTML or CSS
• Believing React cannot update pages dynamically
• Confusing server-side and client-side rendering

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

easy

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

B. var MyComponent = Hello;

C. function MyComponent() { return Hello; }

D. function MyComponent() { document.write('Hello'); }

Solution

1. Step 1: Identify React functional component syntax

   A React functional component is a function returning JSX, like function MyComponent() { return <div>Hello</div>; }.

2. Step 2: Check other options for correctness

   var MyComponent =
   Hello; assigns JSX directly to a variable, not a function. class MyComponent extends React.Component { render() { return 'Hello'; } } is a class component, not functional. function MyComponent() { document.write('Hello'); } uses document.write, which is not React.

3. Final Answer:

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

4. Quick Check:

   Functional component returns JSX function = A [OK]

Hint: Functional components are functions returning JSX [OK]

Common Mistakes:

• Confusing class components with functional components
• Using document.write inside React components
• Assigning JSX to variables without functions

3. What will be the output on the page when this React component is rendered?

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

medium

A. Hello, Alice!

B. Hello, name!

C. <h1>Hello, {name}!</h1>

D. Error: name is not defined

Solution

1. Step 1: Understand JSX expression evaluation

   Inside JSX, curly braces {name} insert the value of the variable name, which is 'Alice'.

2. Step 2: Determine rendered output

   The component returns <h1>Hello, Alice!</h1>, so the page shows the text 'Hello, Alice!'.

3. Final Answer:

   Hello, Alice! -> Option A

4. Quick Check:

   JSX inserts variable value = C [OK]

Hint: JSX {variable} shows variable value, not text {variable} [OK]

Common Mistakes:

• Thinking JSX shows {name} literally
• Confusing variable name with string output
• Expecting an error due to variable usage

4. Identify the error in this React component code:

function Counter() {
  let count = 0;
  function increment() {
    count++;
  }
  return <button onClick={increment}>Count: {count}</button>;
}

medium

A. Using let instead of const for count

B. onClick should be written as onclick

C. Missing semicolon after count++

D. The increment function does not update the displayed count

Solution

1. Step 1: Understand React state behavior

   React components must use state (like useState) to update UI dynamically. Here, count is a normal variable and changes won't re-render the component.

2. Step 2: Identify why increment doesn't update UI

   Increment changes count variable but React does not know to re-render, so displayed count stays 0.

3. Final Answer:

   The increment function does not update the displayed count -> Option D

4. Quick Check:

   State needed to update UI = D [OK]

Hint: Use React state (useState) to update UI, not plain variables [OK]

Common Mistakes:

• Thinking let vs const affects UI update
• Ignoring React's re-render on state change
• Using wrong event attribute case

5. You want to build a dynamic list of items that updates when a user adds a new item. Which approach best uses React instead of traditional JavaScript?

hard

A. Use React's useState hook to store the list and update it, then render the list in JSX.

B. Use document.getElementById to find the list element and append new items manually.

C. Write a for loop to create HTML strings and set innerHTML of the list container.

D. Use React class components with componentDidMount to update the list directly.

Solution

1. Step 1: Understand React's dynamic UI approach

   React uses state (like useState) to hold data and re-renders UI automatically when state changes.

2. Step 2: Compare with traditional DOM manipulation

   Traditional JavaScript manipulates DOM directly (options A and C), which is harder to manage and less efficient.

3. Step 3: Consider React class components

   Use React class components with componentDidMount to update the list directly. uses class components and lifecycle methods, but modern React prefers functional components with hooks.

4. Final Answer:

   Use React's useState hook to store the list and update it, then render the list in JSX. -> Option A

5. Quick Check:

   React state and JSX rendering = B [OK]

Hint: Use useState hook for dynamic lists in React [OK]

Common Mistakes:

• Using direct DOM methods inside React components
• Relying on innerHTML string building
• Using outdated class components instead of hooks