Chapter 6: React Fundamentals

Learn the building blocks of React — the most popular library for building user interfaces.

Note: React requires a build tool (like Vite or Create React App) to run, so the code examples in this chapter are read-only demonstrations. Study them carefully — in the next project chapter, you'll set up a real React app and write this code yourself!

What is React?

Components

JSX

Props

State

Events

Quiz

What is React?

Think of building a website like building with LEGO blocks. Without React, you'd build the entire model as one solid piece — if you wanted to change one part, you'd have to rebuild everything. With React, each part is a separate LEGO block (called a component). Want to change the roof? Just swap that one block!

React is a JavaScript library (created by Facebook/Meta) for building user interfaces. It's the most popular front-end library in the world.

Why React?

Component-based — Build reusable UI pieces (like LEGO blocks)
Declarative — You describe WHAT you want, React figures out HOW to update the page
Virtual DOM — React only updates what changed, making it fast
Huge ecosystem — Thousands of libraries, massive community, tons of jobs

How React Works (The Big Picture)

You write Components (JavaScript functions that return UI)
⬇️
React builds a Virtual DOM (a lightweight copy of the real page)
⬇️
When data changes, React compares old vs new Virtual DOM
⬇️
React updates ONLY what changed in the real page (super fast!)

Components

Components are the LEGO blocks of React. Just like a LEGO house is made of wall blocks, window blocks, and door blocks, a React app is made of Header components, Card components, Button components, etc. Each block is independent and reusable.

A React component is just a JavaScript function that returns HTML-like code (called JSX):

React — Your First Component (Read-Only)

// A component is just a function that returns JSX
function Welcome() {
    return (
        <div>
            <h1>Hello, World!</h1>
            <p>Welcome to my React app.</p>
        </div>
    );
}

// Using the component (like an HTML tag!)
function App() {
    return (
        <div>
            <Welcome />
            <Welcome />  {/* Reuse it as many times as you want! */}
            <Welcome />
        </div>
    );
}

Component rules:
1. Component names MUST start with a capital letter (Welcome, not welcome)
2. Components must return one parent element (wrap in a <div> or <>...</>)
3. Always close self-closing tags: <Welcome /> not <Welcome>

Building a Page with Components

React — Component Tree (Read-Only)

// Each part of the page is its own component
function Header() {
    return <header><h1>My Website</h1></header>;
}

function ProductCard() {
    return (
        <div className="card">
            <h2>Cool Product</h2>
            <p>$29.99</p>
            <button>Add to Cart</button>
        </div>
    );
}

function Footer() {
    return <footer><p>© 2026 My Store</p></footer>;
}

// App component assembles everything
function App() {
    return (
        <div>
            <Header />
            <ProductCard />
            <ProductCard />
            <ProductCard />
            <Footer />
        </div>
    );
}

JSX

JSX is like a bilingual person who speaks both JavaScript and HTML at the same time. It looks like HTML but lives inside JavaScript. Behind the scenes, it gets converted to regular JavaScript function calls.

JSX = JavaScript XML. It lets you write HTML-like syntax directly in your JavaScript:

React — JSX Syntax (Read-Only)

function UserProfile() {
    // Regular JavaScript variables
    const name = "Rahul";
    const age = 25;
    const isLoggedIn = true;
    const hobbies = ["Coding", "Gaming", "Reading"];

    return (
        <div>
            {/* Use curly braces {} to embed JavaScript in JSX */}
            <h1>Hello, {name}!</h1>
            <p>Age: {age}</p>
            <p>Next year you'll be {age + 1}</p>

            {/* Conditional rendering */}
            {isLoggedIn ? <p>Welcome back!</p> : <p>Please log in</p>}

            {/* Rendering a list */}
            <ul>
                {hobbies.map((hobby, index) => (
                    <li key={index}>{hobby}</li>
                ))}
            </ul>
        </div>
    );
}

JSX vs HTML Differences

HTML	JSX	Why?
`class="btn"`	`className="btn"`	"class" is a reserved word in JavaScript
`for="email"`	`htmlFor="email"`	"for" is a reserved word in JavaScript
`style="color: red"`	`style={{color: "red"}}`	Style takes an object in JSX
`<!-- comment -->`	`{/* comment */}`	JavaScript comments in curly braces
`<img>`	`<img />`	All tags must be closed in JSX

Props

Props are like sending a letter to a component. The parent writes data on the letter (props), seals it, and sends it to the child component. The child can READ the letter but cannot change it — props are read-only! If you want to send different data, send a different letter.

Props (short for "properties") let you pass data from a parent component to a child component:

React — Props (Read-Only)

// Child component receives props as a parameter
function UserCard({ name, age, role }) {
    return (
        <div style={{
            border: "1px solid #ddd",
            borderRadius: "8px",
            padding: "16px",
            margin: "8px"
        }}>
            <h2>{name}</h2>
            <p>Age: {age}</p>
            <p>Role: {role}</p>
        </div>
    );
}

// Parent component passes data via props (like HTML attributes)
function App() {
    return (
        <div>
            <h1>Our Team</h1>
            <UserCard name="Rahul" age={25} role="Developer" />
            <UserCard name="Priya" age={22} role="Designer" />
            <UserCard name="Amit" age={28} role="Manager" />
        </div>
    );
}

// Each UserCard gets DIFFERENT data but uses the SAME template!
// This is the power of reusable components + props.

Destructuring props: Instead of writing function UserCard(props) and then props.name, we use { name, age, role } to directly extract the values. This is called destructuring — a JavaScript feature you learned earlier!

Props are READ-ONLY! A child component should never try to modify its props. If you need data that changes, you need state (next section).

State

If props are like a letter (read-only, from someone else), then state is like a whiteboard in your room. You can write on it, erase it, and update it anytime. When you change what's on the whiteboard, React automatically re-renders (redraws) the component to show the new data.

State is data that belongs to a component and can change over time. When state changes, React re-renders the component:

React — useState Hook (Read-Only)

import { useState } from 'react';

function Counter() {
    // useState returns: [currentValue, setterFunction]
    // 0 is the initial value
    const [count, setCount] = useState(0);

    return (
        <div>
            <h1>Count: {count}</h1>
            <button onClick={() => setCount(count + 1)}>
                +1
            </button>
            <button onClick={() => setCount(count - 1)}>
                -1
            </button>
            <button onClick={() => setCount(0)}>
                Reset
            </button>
        </div>
    );
}

// When you click +1:
// 1. setCount(count + 1) is called
// 2. React updates the state to the new value
// 3. React RE-RENDERS the component with the new count
// 4. The <h1> now shows the updated number!

State vs Props

Feature	Props	State
Owned by	Parent component	The component itself
Can change?	No (read-only)	Yes (via setter function)
Analogy	Letter from parent	Whiteboard in your room
Triggers re-render?	Yes (when parent sends new props)	Yes (when setState is called)

Events

Events in React work like doorbell buttons. When someone presses the doorbell (the event), a specific action happens (the handler function runs). In React, you attach handler functions to elements, and they run when the user interacts with them.

React — Event Handling (Read-Only)

import { useState } from 'react';

function LoginForm() {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const [message, setMessage] = useState('');

    // Event handler for form submission
    function handleSubmit(event) {
        event.preventDefault(); // Prevent page reload
        if (email && password) {
            setMessage(`Welcome, ${email}!`);
        } else {
            setMessage('Please fill in all fields');
        }
    }

    return (
        <form onSubmit={handleSubmit}>
            <h2>Login</h2>
            <input
                type="email"
                placeholder="Email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
            />
            <input
                type="password"
                placeholder="Password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
            />
            <button type="submit">Log In</button>
            {message && <p>{message}</p>}
        </form>
    );
}

// Key differences from HTML events:
// HTML:  onclick="handleClick()"     (string, lowercase)
// React: onClick={handleClick}       (function, camelCase)

Common React Events

React Event	HTML Equivalent	When It Fires
`onClick`	onclick	User clicks an element
`onChange`	onchange	Input value changes
`onSubmit`	onsubmit	Form is submitted
`onMouseEnter`	onmouseenter	Mouse enters an element
`onKeyDown`	onkeydown	Key is pressed

Important pattern: In React, form inputs are "controlled" — their value comes from state, and onChange updates state. This means React is always the "single source of truth" for what the input shows.

📝 Chapter 6 Quiz

1. What is React?

A programming language

A CSS framework

A JavaScript library for building UIs

A database system

2. In JSX, what do you use instead of class?

cssClass

className

htmlClass

Class

3. Can a child component modify its props?

No — props are read-only

Yes — with this.props.set()

Yes — props are always writable

Only if the parent allows it

4. What does useState(0) return?

Just the value 0

An object with value and setter

A boolean

An array: [currentValue, setterFunction]

5. Which is the correct way to handle a click in React?

onclick="handleClick()"

onClick="handleClick()"

onClick={handleClick}

on-click={handleClick}

← Chapter 5: Async & Modern JS Chapter 7: React Hooks →