What is React - Why It Matters

The Big Idea

What if your website could update itself instantly without you lifting a finger?

The Scenario

Imagine building a website where every time you click a button, you have to manually find the right part of the page and change its content by hand.

The Problem

Manually updating the page is slow, easy to mess up, and hard to keep track of what changed. It feels like fixing a puzzle every time something updates.

The Solution

React lets you write small pieces called components that automatically update the page when data changes, so you don't have to fix everything yourself.

Before vs After

✗ Before

document.getElementById('count').innerText = 'Clicked 1 times';

✓ After

const [count, setCount] = React.useState(0);
<button onClick={() => setCount(count + 1)}>Clicked {count} times</button>

What It Enables

React makes building interactive, fast, and easy-to-update user interfaces possible without the headache of manual page updates.

Real Life Example

Think of a social media feed that updates new posts instantly without reloading the whole page -- React helps build that smooth experience.

Key Takeaways

Manual page updates are slow and error-prone.

React automates UI updates with components and state.

This leads to faster, easier, and more reliable web apps.

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