Introduction to
React

Foundations

• What Is React?
• The Virtual DOM
• JSX — JavaScript XML
• Components
• Props & Data Flow

Key Properties

• Declarative rendering
• Component architecture
• Unidirectional data flow
• Virtual DOM diffing
• JSX syntax extension

Reconciliation Algorithm

• Elements of different types produce different trees — full subtree replacement
• Elements of the same type — React updates only changed attributes
• Children are compared using keys for efficient reordering
• O(n) heuristic diffing instead of O(n³) tree comparison

JSX Syntax

// JSX expression
const element = (
  <div className="greeting">
    <h1>Hello, {user.name}!</h1>
    <p>You have {unread} messages.</p>
  </div>
);

// Compiles to:
const element = React.createElement(
  'div',
  { className: 'greeting' },
  React.createElement('h1', null,
    'Hello, ', user.name, '!'),
  React.createElement('p', null,
    'You have ', unread, ' messages.')
);

Functional Component (Modern)

function UserCard({ name, role, avatar }) {
  return (
    <div className="user-card">
      <img src={avatar} alt={name} />
      <h2>{name}</h2>
      <span className="role">{role}</span>
    </div>
  );
}

// Arrow function variant
const Badge = ({ label, color }) => (
  <span style={{ background: color }}>
    {label}
  </span>
);

Basic useState

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(0)}>
        Reset
      </button>
    </div>
  );
}

Dependency Array Patterns

// Runs after EVERY render
useEffect(() => { /* ... */ });

// Runs ONCE on mount
useEffect(() => {
  fetchData();
}, []);

// Runs when `userId` changes
useEffect(() => {
  fetchUser(userId);
}, [userId]);

// Cleanup function (unmount / before re-run)
useEffect(() => {
  const ws = new WebSocket(url);
  ws.onmessage = handleMessage;
  return () => ws.close(); // cleanup
}, [url]);

Common Patterns

function SearchBar() {
  const [query, setQuery] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault(); // prevent form reload
    search(query);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Search..."
      />
      <button type="submit">Go</button>
    </form>
  );
}

Conditional Patterns

// Ternary operator
{isLoggedIn ? <Dashboard /> : <Login />}

// Logical AND (short-circuit)
{hasError && <ErrorBanner msg={error} />}

// Early return
function Page({ user }) {
  if (!user) return <Redirect to="/login" />;
  return <Profile user={user} />;
}

// Switch-like with object map
const STATUS_ICONS = {
  success: <CheckIcon />,
  error:   <AlertIcon />,
  loading: <Spinner />,
};
return STATUS_ICONS[status] ?? null;

Controlled Component

function SignupForm() {
  const [form, setForm] = useState({
    email: '', password: '', agree: false
  });
  const [errors, setErrors] = useState({});

  const handleChange = (e) => {
    const { name, value, type, checked } = e.target;
    setForm(prev => ({
      ...prev,
      [name]: type === 'checkbox' ? checked : value,
    }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    const errs = validate(form);
    if (Object.keys(errs).length) {
      setErrors(errs);
    } else {
      submitForm(form);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input name="email" value={form.email}
        onChange={handleChange} />
      {errors.email && <span>{errors.email}</span>}
      <input name="password" type="password"
        value={form.password}
        onChange={handleChange} />
      <label>
        <input name="agree" type="checkbox"
          checked={form.agree}
          onChange={handleChange} />
        I agree to terms
      </label>
      <button type="submit">Sign Up</button>
    </form>
  );
}

Creating & Providing

import { createContext, useState, useContext }
  from 'react';

const ThemeContext = createContext('light');

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');

  const toggle = () =>
    setTheme(t => t === 'light' ? 'dark' : 'light');

  return (
    <ThemeContext.Provider value={{ theme, toggle }}>
      {children}
    </ThemeContext.Provider>
  );
}

// Wrap your app
<ThemeProvider>
  <App />
</ThemeProvider>

Todo App with useReducer

const initialState = { todos: [], nextId: 1 };

function reducer(state, action) {
  switch (action.type) {
    case 'ADD':
      return {
        ...state,
        todos: [...state.todos, {
          id: state.nextId, text: action.text, done: false
        }],
        nextId: state.nextId + 1,
      };
    case 'TOGGLE':
      return {
        ...state,
        todos: state.todos.map(t =>
          t.id === action.id
            ? { ...t, done: !t.done } : t
        ),
      };
    case 'DELETE':
      return {
        ...state,
        todos: state.todos.filter(t => t.id !== action.id),
      };
    default:
      throw new Error(`Unknown action: ${action.type}`);
  }
}

useLocalStorage

function useLocalStorage(key, initialValue) {
  const [value, setValue] = useState(() => {
    try {
      const item = localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch {
      return initialValue;
    }
  });

  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  return [value, setValue];
}

// Usage
const [theme, setTheme] =
  useLocalStorage('theme', 'dark');

Basic Setup

import { BrowserRouter, Routes, Route, Link }
  from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
        <Link to="/users">Users</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/users" element={<Users />}>
          <Route path=":userId"
            element={<UserDetail />} />
        </Route>
        <Route path="*" element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  );
}

React.memo

// Skip re-render if props unchanged
const UserCard = React.memo(({ name, avatar }) => {
  return (
    <div className="card">
      <img src={avatar} alt={name} />
      <h3>{name}</h3>
    </div>
  );
});

// Custom comparator
const Chart = React.memo(ChartInner, (prev, next) =>
  prev.data.length === next.data.length &&
  prev.data.every((v, i) => v === next.data[i])
);

Unit Test with RTL + Jest

import { render, screen, fireEvent }
  from '@testing-library/react';
import Counter from './Counter';

test('increments counter on click', () => {
  render(<Counter />);

  const button = screen.getByRole('button',
    { name: /increment/i });
  const display = screen.getByText(/count: 0/i);

  fireEvent.click(button);

  expect(screen.getByText(/count: 1/i))
    .toBeInTheDocument();
});

test('resets to zero', () => {
  render(<Counter />);
  fireEvent.click(screen.getByText(/increment/i));
  fireEvent.click(screen.getByText(/reset/i));
  expect(screen.getByText(/count: 0/i))
    .toBeInTheDocument();
});

Frameworks

• Next.js — SSR, SSG, API routes, App Router
• Remix — full-stack with nested routes & loaders
• Gatsby — static site generation with GraphQL
• Astro — islands architecture, multi-framework

What We Covered

• React's component model and virtual DOM
• JSX syntax and expressions
• Props, one-way data flow, children
• Hooks: useState, useEffect, useReducer, useContext
• Event handling, forms, conditional rendering
• Custom hooks for reusable logic
• Routing, performance, testing, ecosystem