Chapter 5: Pick a Framework (Intro to React)

You've done it. You've mastered HTML, CSS, and JavaScript. But as your app gets bigger, managing it with just `document.getElementById` becomes a nightmare. This is where frameworks come in. Think of React as a set of powerful, pre-built **Lego blocks** for your website. Instead of building every tiny piece from scratch, React gives you smart blocks (called **Components**) that manage themselves.

What is React, Really?

React is a JavaScript library for building user interfaces. Its main idea is simple: **"Your UI is a reflection of your data."**

You *don't* tell the website "change this text." You just tell React, "Hey, the number of likes is now 101." React then automatically figures out *what* to change on the screen. This is called **declarative programming**.

Core Concept #1: Components (The Reusable Legos)

Everything in React is a component. A component is just a piece of your UI. A component is just a JavaScript function that returns what looks like HTML. By convention, component names **always start with a capital letter**.

// This is a component!
function WelcomeMessage() {
    return (
        <h1>Hello, world! This is my first component.</h1>
    );
}

Core Concept #2: JSX (JavaScript + XML)

JSX is a syntax extension that lets you write HTML-like code directly in your JavaScript. This is the *best* part of React. It lets you see exactly what your component will look like, right next to the logic that controls it.

Just remember two simple rules:

1. You must use `className` instead of `class`.
2. To use a JavaScript variable inside JSX, you put it in curly braces `{}`.

function GreetUser() {
    const userName = "MSMAXPRO";
    
    return (
        <h1 className="main-title">
            Welcome back, {userName}!
        </h1>
    );
}

Core Concept #3: Props (Passing Data)

Props (short for properties) are how you pass data from a parent component down to a child component. Think of them as settings for your component.

Child Component (`GreetUser.js`):

// This component now receives 'props' as an argument
function GreetUser(props) {
    return (
        <h1 className="main-title">
            Welcome back, {props.username}!
        </h1>
    );
}

Parent Component (`App.js`):

function App() {
    return (
        <> {/* This is a Fragment */}
            <GreetUser username="MSMAXPRO" />
            <GreetUser username="Priya" />
        </>
    );
}

Core Concept #4: State (A Component's "Memory")

What if a component needs to *remember* something? Props are data from the *outside* (parent). **State** is data from the *inside* (the component's own memory). To use state, we use a **Hook** called `useState`.

Let's build a "Like" button that remembers if it's been liked.

import React, { useState } from 'react'; // First, import useState

function LikeButton() {
    // 1. Create a piece of state
    const [isLiked, setIsLiked] = useState(false);

    // 2. Create an event handler
    function handleClick() {
        setIsLiked(!isLiked);
    }

    // 3. Render the UI based on the state
    if (isLiked) {
        return <button onClick={handleClick}>You liked this! 👍</button>;
    } else {
        return <button onClick={handleClick}>Like This Post</button>;
    }
}

When you click the button, `handleClick` runs. It calls `setIsLiked()`. React then **automatically re-runs** the `LikeButton` component with the new state, showing the new UI. No `getElementById` needed!

How Do I Even *Run* This?

You *cannot* just save this code in an `.html` file and open it in the browser. You need a "build process" to compile your React code. The easiest way to start a real React project is with a tool called **Vite**.

You'll open your terminal and run:

# This command creates a new project
npm create vite@latest

Then, just follow the instructions on screen (choose "React").

Conclusion: Thinking in React

You now understand the "big ideas" of React. The workflow is:

1. Break your UI into small, reusable **Components**.
2. Write the UI for those components using **JSX**.
3. Pass data *down* from parents to children using **Props**.
4. Give your components their own *memory* using **State**.