React Master Course

// JSX + Component + Props + State + Events
import { useState } from 'react';

function Counter({ initialCount }) {       // Props
  const [count, setCount] = useState(initialCount); // State

  return (
    <div>
      {/* JSX — HTML in JavaScript */}
      <h1>Count: {count}</h1>

      {/* Event Handling */}
      <button onClick={() => setCount(count + 1)}>+1</button>

      {/* Conditional Rendering */}
      {count > 10 && <p>🎉 You passed 10!</p>}
    </div>
  );
}

// List Rendering with Keys
function UserList({ users }) {
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>  {/* Key! */}
      ))}
    </ul>
  );
}

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

// ── useEffect: fetch data on mount ──
function UserProfile({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch(`/api/users/${userId}`)
      .then(res => res.json())
      .then(data => setUser(data));
  }, [userId]);  // re-runs when userId changes

  if (!user) return <p>Loading...</p>;
  return <h1>{user.name}</h1>;
}

// ── useRef: focus input on mount ──
function SearchBar() {
  const inputRef = useRef(null);
  useEffect(() => { inputRef.current.focus(); }, []);
  return <input ref={inputRef} placeholder="Search..." />;
}

// ── Custom Hook: reusable logic ──
function useLocalStorage(key, initial) {
  const [value, setValue] = useState(
    () => JSON.parse(localStorage.getItem(key)) ?? initial
  );
  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);
  return [value, setValue];
}

import { memo, useMemo, useCallback } from 'react';

// React.memo — skip re-render if props didn't change
const ExpensiveList = memo(function ExpensiveList({ items }) {
  console.log("Rendering list...");
  return items.map(item => <div key={item.id}>{item.name}</div>);
});

// useMemo — cache expensive calculation
function Dashboard({ orders }) {
  const total = useMemo(() => {
    console.log("Calculating total...");
    return orders.reduce((sum, o) => sum + o.price, 0);
  }, [orders]);  // only recalculate when orders change

  return <h2>Total: ${total}</h2>;
}

// useCallback — stable function reference
function Parent() {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    console.log("Clicked!");
  }, []);  // same function reference across renders

  return <ExpensiveList onClick={handleClick} />;
}

import { lazy, Suspense } from 'react';
import { ErrorBoundary } from 'react-error-boundary';

// ── Lazy Loading + Code Splitting ──
const Dashboard = lazy(() => import('./Dashboard'));
const Settings  = lazy(() => import('./Settings'));

// ── Error Boundary ──
function App() {
  return (
    <ErrorBoundary fallback={<p>Something went wrong 💥</p>}>
      <Suspense fallback={<p>Loading...</p>}>
        <Dashboard />
      </Suspense>
    </ErrorBoundary>
  );
}

src/
 ├── components/       # Reusable UI components
 │    ├── Button.jsx
 │    ├── Header.jsx
 │    └── Footer.jsx
 ├── pages/            # Route-level components
 │    ├── Home.jsx
 │    └── About.jsx
 ├── App.jsx           # Main app component
 └── main.jsx          # Entry point

src/
 ├── features/            # Grouped by feature
 │    ├── auth/
 │    │     ├── components/    # Auth-specific UI
 │    │     ├── hooks/         # Auth hooks
 │    │     ├── services/      # Auth API calls
 │    │     └── authSlice.js   # Auth state
 │    ├── dashboard/
 │    │     ├── components/
 │    │     ├── hooks/
 │    │     └── dashboardSlice.js
 │    └── users/
 │
 ├── shared/              # Shared across features
 │    ├── components/      # Button, Modal, Input...
 │    ├── utils/           # formatDate, capitalize...
 │    └── hooks/           # useDebounce, useLocalStorage...
 │
 ├── routes/              # Route configuration
 ├── App.jsx
 └── main.jsx

src/
 ├── app/          # App initialization, providers
 ├── modules/      # Business logic modules
 ├── services/     # External service integrations
 ├── api/          # API client & endpoints
 ├── store/        # Global state management
 ├── layouts/      # Page layouts (DashboardLayout, AuthLayout)
 ├── constants/    # App-wide constants
 ├── config/       # Environment & feature configs
 ├── hooks/        # Global custom hooks
 ├── utils/        # Helper functions
 ├── types/        # TypeScript type definitions
 ├── routes/       # Route definitions & guards
 └── components/   # Shared UI components