⚛️ Introduction to React

🤔 What is React?

React is a JavaScript library for building user interfaces, created and maintained by Meta (formerly Facebook). It was released as open-source in 2013 and has since become one of the most popular tools for web development.

A Brief History

React was born at Facebook in 2011 when Jordan Walke, a software engineer, created FaxJS (the early prototype). The problem they were trying to solve was simple but challenging: how do you build a complex, interactive UI that stays in sync with constantly changing data?

Think about Facebook's news feed - new posts appear, likes update in real-time, comments load dynamically. Traditional approaches required a lot of manual DOM manipulation, which became messy and error-prone as applications grew. React offered a better way.

React is a Library, Not a Framework

It's important to understand that React is technically a library, not a full framework like Angular or Vue. This distinction matters:

Who Uses React?

React powers some of the world's most popular applications:

• Facebook - Where it all began (news feed, groups, marketplace)
• Instagram - The entire web interface
• Netflix - The streaming interface you know and love
• Airbnb - Search, booking, and host interfaces
• WhatsApp Web - The browser version of the messaging app
• Dropbox - File management and collaboration tools
• Discord - Real-time chat and community features

These aren't small projects - we're talking about applications serving billions of users! If React can handle that scale, it can definitely handle your projects. 💪

💎 Why React?

With so many options for building web applications, why has React become so dominant? Let's explore the key reasons developers love React.

1. Component-Based Architecture

React lets you break your UI into independent, reusable pieces called components. Instead of one massive file with all your HTML, CSS, and JavaScript mixed together, you create small, focused components that do one thing well.

2. Declarative Programming

React uses a declarative approach - you describe what you want the UI to look like, not how to change it. React handles the "how" for you.

// Imperative (vanilla JavaScript) - HOW to do it
const button = document.createElement('button');
button.textContent = 'Click me';
button.addEventListener('click', () => {
    const message = document.getElementById('message');
    message.textContent = 'Button clicked!';
});
document.body.appendChild(button);

// Declarative (React) - WHAT you want
function MyButton() {
    const [message, setMessage] = useState('');
    
    return (
        <>
            <button onClick={() => setMessage('Button clicked!')}>
                Click me
            </button>
            <p>{message}</p>
        </>
    );
}

Notice how the React version is easier to read and understand? You can see the structure of your UI at a glance. This is declarative programming in action!

3. Virtual DOM = Fast Updates

Directly manipulating the browser's DOM (Document Object Model) is slow. React uses a "virtual DOM" - a lightweight copy of the actual DOM in JavaScript. When data changes, React:

1. Updates the virtual DOM (fast)
2. Compares it with the previous virtual DOM (diffing)
3. Calculates the minimum changes needed (reconciliation)
4. Updates only what changed in the real DOM (efficient)

4. Rich Ecosystem

React has a massive ecosystem of tools, libraries, and resources:

• React Router - Navigation and routing
• Redux / Zustand - State management
• Next.js - Full-featured React framework with server-side rendering
• React Testing Library - Testing utilities
• Material-UI, Chakra UI, shadcn/ui - Component libraries
• React Native - Build mobile apps with React

5. Strong Community & Job Market

React has one of the largest developer communities in the world. This means:

• Tons of tutorials, courses, and learning resources
• Active forums and communities (Stack Overflow, Reddit, Discord)
• Regular updates and improvements
• Abundant job opportunities - React developers are in high demand!

6. Learn Once, Write Anywhere

The skills you learn with React transfer to multiple platforms:

• Web apps - With React DOM
• Mobile apps - With React Native (iOS & Android)
• Desktop apps - With Electron
• VR experiences - With React 360

🎯 Core Concepts

Before we start coding, let's understand the fundamental concepts that make React work. These are the building blocks of every React application.

Components: The Heart of React

Everything in React is a component. A component is a self-contained piece of UI that can be reused throughout your application. Components can be as simple as a button or as complex as an entire page.

There are two types of components:

1. Function Components (What We'll Use)

// A simple function component
function Welcome() {
    return <h1>Hello, World!</h1>;
}

// Function component with TypeScript and props
interface GreetingProps {
    name: string;
}

function Greeting({ name }: GreetingProps) {
    return <h1>Hello, {name}!</h1>;
}

2. Class Components (Legacy, But You'll See Them)

// Class component (older style)
class Welcome extends React.Component {
    render() {
        return <h1>Hello, World!</h1>;
    }
}

JSX/TSX: HTML in JavaScript

JSX (JavaScript XML) is a syntax extension that lets you write HTML-like code in your JavaScript files. When you use TypeScript with React, it's called TSX.

// This looks like HTML, but it's JSX/TSX
const element = (
    <div className="welcome">
        <h1>Hello, World!</h1>
        <p>Welcome to React with TypeScript!</p>
    </div>
);

Under the hood, JSX gets transformed into regular JavaScript function calls:

// The JSX above becomes something like this:
const element = React.createElement(
    'div',
    { className: 'welcome' },
    React.createElement('h1', null, 'Hello, World!'),
    React.createElement('p', null, 'Welcome to React with TypeScript!')
);

JSX makes your code much more readable! You'll learn all about JSX/TSX in the next lesson.

Props: Passing Data to Components

Props (short for "properties") are how you pass data from a parent component to a child component. They're like function arguments, but for components.

// Define the props interface
interface UserCardProps {
    name: string;
    age: number;
    email: string;
}

// Component that receives props
function UserCard({ name, age, email }: UserCardProps) {
    return (
        <div className="user-card">
            <h2>{name}</h2>
            <p>Age: {age}</p>
            <p>Email: {email}</p>
        </div>
    );
}

// Using the component with props
function App() {
    return (
        <div>
            <UserCard name="Alice" age={30} email="alice@example.com" />
            <UserCard name="Bob" age={25} email="bob@example.com" />
        </div>
    );
}

State: Data That Changes

While props are read-only data passed from parents, state is data that belongs to a component and can change over time. When state changes, React re-renders the component to reflect the new data.

import { useState } from 'react';

function Counter() {
    // useState returns [current value, function to update it]
    const [count, setCount] = useState(0);
    
    return (
        <div>
            <p>You clicked {count} times</p>
            <button onClick={() => setCount(count + 1)}>
                Click me
            </button>
        </div>
    );
}

The Component Tree

React applications are structured as a tree of components. At the top is your root component (usually called App), and it contains child components, which may contain their own children, and so on.

This tree structure makes it easy to reason about your application and manage data flow.

⚖️ React vs Vanilla JavaScript

To really appreciate what React does for us, let's compare building the same feature with and without React. We'll create a simple counter that increments when you click a button.

Vanilla JavaScript Approach

<!-- HTML -->
<div id="app">
    <p>Count: <span id="count">0</span></p>
    <button id="increment">Increment</button>
    <button id="decrement">Decrement</button>
    <button id="reset">Reset</button>
</div>

<script>
    // JavaScript
    let count = 0;
    const countElement = document.getElementById('count');
    const incrementBtn = document.getElementById('increment');
    const decrementBtn = document.getElementById('decrement');
    const resetBtn = document.getElementById('reset');

    function updateDisplay() {
        countElement.textContent = count;
        // Maybe update button states based on count
        // Maybe update styles
        // Getting complex already!
    }

    incrementBtn.addEventListener('click', () => {
        count++;
        updateDisplay();
    });

    decrementBtn.addEventListener('click', () => {
        count--;
        updateDisplay();
    });

    resetBtn.addEventListener('click', () => {
        count = 0;
        updateDisplay();
    });
</script>

React Approach

import { useState } from 'react';

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

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

Let's Add More Features...

Now imagine we want to add:

• Display the count in multiple places
• Show a message when count is positive/negative
• Disable buttons based on count value
• Add a count history
• Animate the changes

With vanilla JavaScript: You'd need to manually update every element, manage multiple event listeners, keep track of which elements need updating, handle edge cases... It gets messy fast! 😰

With React: You just update the state, and React handles updating everything else. The complexity doesn't grow as dramatically. 🎉

🛠️ Setting Up Your Environment

Let's get your development environment ready for React! We'll use Vite - a modern, fast build tool that's perfect for React development.

Prerequisites

Before we start, make sure you have:

• Node.js (version 18 or higher) - Download here
• npm or yarn (comes with Node.js)
• A code editor - We recommend VS Code

Option 1: Create a New React App with Vite (Recommended)

Vite is lightning fast and provides a great developer experience. Let's create our first React + TypeScript project!

# Create a new project
npm create vite@latest my-react-app -- --template react-ts

# Navigate into the project
cd my-react-app

# Install dependencies
npm install

# Start the development server
npm run dev

After running npm run dev, you'll see something like:

  VITE v5.0.0  ready in 500 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

Open http://localhost:5173/ in your browser, and you'll see your React app running! 🎉

Understanding the Project Structure

Let's explore what Vite created for us:

my-react-app/
├── node_modules/       # Dependencies (don't touch this!)
├── public/             # Static assets (images, fonts, etc.)
├── src/                # Your React code lives here
│   ├── App.tsx        # Main App component
│   ├── App.css        # Styles for App
│   ├── main.tsx       # Entry point
│   └── index.css      # Global styles
├── index.html         # HTML template
├── package.json       # Project config and dependencies
├── tsconfig.json      # TypeScript configuration
└── vite.config.ts     # Vite configuration

Key Files Explained

index.html - The Entry Point

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React + TS</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

Notice the <div id="root"></div>? This is where your entire React application will be mounted!

src/main.tsx - The JavaScript Entry Point

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.css'

// This is where React takes over!
ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

This file:

1. Imports React and ReactDOM
2. Imports your App component
3. Finds the root div in index.html
4. Renders your App component inside it

Option 2: Online Playground (For Quick Experiments)

Don't want to set up a local environment yet? Try these online tools:

• CodeSandbox - Full-featured online IDE
• StackBlitz - VS Code in the browser
• PlayCode - Simple and fast

Recommended VS Code Extensions

If you're using VS Code, install these extensions for a better experience:

• ES7+ React/Redux/React-Native snippets - Code snippets
• ESLint - Code quality checks
• Prettier - Code formatting
• Auto Rename Tag - Rename paired JSX tags

🎨 Your First React Component

Now that your environment is set up, let's create your first component from scratch! We'll build a simple greeting card component.

Step 1: Create a New Component File

In your src folder, create a new file called Greeting.tsx:

// src/Greeting.tsx

// Define the props interface
interface GreetingProps {
    name: string;
    age?: number; // Optional prop
}

// Create the component
function Greeting({ name, age }: GreetingProps) {
    return (
        <div className="greeting-card">
            <h2>Hello, {name}!</h2>
            {age && <p>You are {age} years old.</p>}
            <p>Welcome to React with TypeScript!</p>
        </div>
    );
}

// Export the component so others can use it
export default Greeting;

Let's break down what's happening here:

• Interface: We define the shape of our props with TypeScript
• Function: Our component is a regular function that returns JSX
• JSX: We write HTML-like syntax inside JavaScript
• Curly Braces: {name} lets us embed JavaScript expressions
• Conditional: {age && ...} only shows the age if it's provided
• Export: Makes the component available to import elsewhere

Step 2: Add Some Styles

Create a CSS file Greeting.css:

/* src/Greeting.css */
.greeting-card {
    padding: 2rem;
    border: 2px solid #667eea;
    border-radius: 8px;
    background: linear-gradient(135deg, #667eea15 0%, #764ba215 100%);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    max-width: 400px;
    margin: 2rem auto;
}

.greeting-card h2 {
    color: #667eea;
    margin-bottom: 1rem;
}

.greeting-card p {
    color: #555;
    line-height: 1.6;
}

Now import the CSS in your component:

// src/Greeting.tsx
import './Greeting.css'; // Add this line at the top

interface GreetingProps {
    name: string;
    age?: number;
}

function Greeting({ name, age }: GreetingProps) {
    // ... rest of the component
}

Step 3: Use Your Component

Open src/App.tsx and use your new component:

// src/App.tsx
import Greeting from './Greeting'
import './App.css'

function App() {
    return (
        <div className="App">
            <h1>My First React App</h1>
            
            <Greeting name="Alice" age={30} />
            <Greeting name="Bob" />
            <Greeting name="Charlie" age={25} />
        </div>
    )
}

export default App

Save all files, and your browser will automatically reload (hot reload) showing your greeting cards! 🎉

Adding Interactivity

Let's make our component interactive by adding a button:

// src/Greeting.tsx
import { useState } from 'react'; // Import useState
import './Greeting.css';

interface GreetingProps {
    name: string;
    age?: number;
}

function Greeting({ name, age }: GreetingProps) {
    // Add state for click count
    const [clicks, setClicks] = useState(0);

    return (
        <div className="greeting-card">
            <h2>Hello, {name}!</h2>
            {age && <p>You are {age} years old.</p>}
            <p>Welcome to React with TypeScript!</p>
            
            <button onClick={() => setClicks(clicks + 1)}>
                Clicked {clicks} times
            </button>
        </div>
    );
}

export default Greeting;

Now each greeting card has its own independent click counter! This demonstrates component state - each instance of the Greeting component maintains its own separate state. 🎯

⚙️ How React Works Under the Hood

Now that you've created your first component, let's understand what React is actually doing behind the scenes. Understanding this will help you write better React code!

The Component Lifecycle

Every React component goes through a lifecycle with three main phases:

1. Mounting - Component is created and inserted into the DOM
2. Updating - Component re-renders when props or state change
3. Unmounting - Component is removed from the DOM

The Rendering Process

When a component renders, here's what happens:

1. React calls your component function - Gets the JSX you return
2. Converts JSX to React elements - JavaScript objects describing the UI
3. Creates/updates the virtual DOM - A lightweight copy of the real DOM
4. Compares with previous virtual DOM (reconciliation)
5. Calculates minimal changes needed (diffing algorithm)
6. Updates only changed parts of the real DOM (commit phase)

// When you write this:
function Counter() {
    const [count, setCount] = useState(0);
    return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

// React creates this (simplified):
{
    type: 'button',
    props: {
        onClick: () => setCount(count + 1),
        children: count
    }
}

When Does React Re-render?

React re-renders a component when:

• State changes - You call a state setter function
• Props change - Parent passes new props
• Parent re-renders - Child components re-render too
• Context changes - Using React Context (we'll learn this later)

One-Way Data Flow

React enforces a one-way data flow (also called "unidirectional data flow"):

• Data flows down from parent to child via props
• Events flow up from child to parent via callbacks
• This makes data changes predictable and easier to debug

// Parent passes data down and receives events up
function Parent() {
    const [message, setMessage] = useState('');

    // Event handler passed as prop
    const handleChildClick = (childData: string) => {
        setMessage(childData);
    };

    return (
        <div>
            <p>Message from child: {message}</p>
            {/* Data flows down via props */}
            <Child onButtonClick={handleChildClick} />
        </div>
    );
}

function Child({ onButtonClick }: { onButtonClick: (data: string) => void }) {
    return (
        <button onClick={() => onButtonClick('Hello from child!')}>
            Click me
        </button>
    );
}

React Fiber Architecture

Under the hood, React uses an architecture called "Fiber" (introduced in React 16). You don't need to know the details, but here's what it does:

• Breaks rendering into chunks - Can pause and resume work
• Prioritizes updates - User interactions get priority over background updates
• Concurrent rendering - Can prepare multiple versions of the UI

This is why React stays responsive even when rendering large component trees! 🚀

🏋️ Hands-on Practice

// src/ProfileCard.tsx
import { useState } from 'react';
import './ProfileCard.css';

interface ProfileCardProps {
    // TODO: Define your props interface
}

function ProfileCard(/* TODO: Add props */) {
    // TODO: Add state for showing/hiding email
    
    return (
        <div className="profile-card">
            {/* TODO: Implement your component */}
        </div>
    );
}

export default ProfileCard;

// src/ProfileCard.tsx
import { useState } from 'react';
import './ProfileCard.css';

interface ProfileCardProps {
    name: string;
    title: string;
    email: string;
    imageUrl?: string;
}

function ProfileCard({ name, title, email, imageUrl }: ProfileCardProps) {
    const [showEmail, setShowEmail] = useState(false);
    
    // Get initials if no image
    const initials = name
        .split(' ')
        .map(n => n[0])
        .join('')
        .toUpperCase();
    
    return (
        <div className="profile-card">
            <div className="profile-image">
                {imageUrl ? (
                    <img src={imageUrl} alt={name} />
                ) : (
                    <div className="initials">{initials}</div>
                )}
            </div>
            
            <h3>{name}</h3>
            <p className="title">{title}</p>
            
            {showEmail && (
                <p className="email">{email}</p>
            )}
            
            <button onClick={() => setShowEmail(!showEmail)}>
                {showEmail ? 'Hide' : 'Show'} Contact
            </button>
        </div>
    );
}

export default ProfileCard;

/* src/ProfileCard.css */
.profile-card {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 1.5rem;
    max-width: 300px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.profile-image {
    width: 100px;
    height: 100px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    overflow: hidden;
}

.profile-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.initials {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #667eea;
    color: white;
    font-size: 2rem;
    font-weight: bold;
}

.profile-card h3 {
    margin: 0.5rem 0;
    color: #333;
}

.title {
    color: #666;
    margin: 0.5rem 0;
}

.email {
    color: #667eea;
    margin: 1rem 0;
}

.profile-card button {
    background: #667eea;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
}

.profile-card button:hover {
    background: #5568d3;
}

// src/ToggleSwitch.tsx
import { useState } from 'react';
import './ToggleSwitch.css';

interface ToggleSwitchProps {
    label: string;
    defaultChecked?: boolean;
    onChange?: (checked: boolean) => void;
}

function ToggleSwitch({ label, defaultChecked = false, onChange }: ToggleSwitchProps) {
    const [checked, setChecked] = useState(defaultChecked);
    
    const handleChange = () => {
        const newValue = !checked;
        setChecked(newValue);
        if (onChange) {
            onChange(newValue);
        }
    };
    
    return (
        <div className="toggle-switch">
            <label>
                <input
                    type="checkbox"
                    checked={checked}
                    onChange={handleChange}
                />
                <span className="slider"></span>
                <span className="label">{label}</span>
            </label>
        </div>
    );
}

export default ToggleSwitch;

🏆 Best Practices

✅ Do's

• Keep components small and focused - Each component should do one thing well. If it's getting large, break it into smaller components.
• Use TypeScript interfaces for props - Type safety prevents bugs and makes your code self-documenting.
• Name components with PascalCase - MyComponent, not myComponent or my-component.
• Co-locate related files - Keep component, styles, and tests together in the same folder.
• Use meaningful prop names - userName is better than data or x.
• Extract reusable components - If you're copying code, it should probably be a component.
• Follow the single responsibility principle - One component, one job.

❌ Don'ts

• Don't mutate props - Props are read-only. Never modify them directly.
• Don't modify state directly - Always use the setter function from useState.
• Don't nest components inside other components - Define components at the top level of your file.
• Don't forget to add keys to list items - React needs keys to efficiently update lists (we'll cover this soon).
• Don't use indexes as keys - When mapping arrays, use stable IDs, not array indexes.
• Don't create components with too many props - If you have 10+ props, consider splitting the component.

💡 Pro Tips

• Use React DevTools - Install the browser extension to inspect your component tree and debug issues.
• Destructure props in the parameter - ({ name, age }) instead of (props) makes your code cleaner.
• Use optional chaining - user?.name safely accesses properties that might not exist.
• Learn the ESLint rules - React has helpful ESLint plugins that catch common mistakes.
• Start with function components - Modern React uses function components almost exclusively.
• Think in components - Before coding, sketch out your UI and identify the component boundaries.

Component Organization

A well-organized component file follows this structure:

// 1. Imports (libraries first, then components, then styles)
import { useState } from 'react';
import SomeComponent from './SomeComponent';
import './MyComponent.css';

// 2. Types and interfaces
interface MyComponentProps {
    title: string;
    count: number;
}

// 3. Component definition
function MyComponent({ title, count }: MyComponentProps) {
    // 4. Hooks (useState, useEffect, etc.)
    const [active, setActive] = useState(false);
    
    // 5. Event handlers
    const handleClick = () => {
        setActive(!active);
    };
    
    // 6. Helper functions (if any)
    const formatTitle = (text: string) => {
        return text.toUpperCase();
    };
    
    // 7. Render logic
    return (
        <div>
            <h2>{formatTitle(title)}</h2>
            <p>Count: {count}</p>
            <button onClick={handleClick}>
                {active ? 'Active' : 'Inactive'}
            </button>
        </div>
    );
}

// 8. Export
export default MyComponent;

📝 Summary

📚 Additional Resources

• Official React Documentation - The best place to learn
• Thinking in React - Essential guide to the React mindset
• React TypeScript Cheatsheet - Quick reference
• Vite Documentation - Learn about your build tool

🚀 What's Next?

In the next lesson, we'll dive deep into JSX and TSX. You'll learn:

• How JSX/TSX works in detail
• Embedding expressions and using JavaScript in JSX
• Conditional rendering techniques
• Rendering lists and handling keys
• JSX gotchas and best practices

Get ready to master the syntax that makes React so expressive and powerful! 💪