Phase 2: Hệ Sinh Thái React — Routing, State Management, Forms & Data Fetching

npm install react-router-dom

// main.jsx
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
 
createRoot(document.getElementById('root')).render(
  <StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </StrictMode>
);

// App.jsx
import { Routes, Route } from 'react-router-dom';
import Layout from './components/Layout';
import Home from './pages/Home';
import Blog from './pages/Blog';
import Post from './pages/Post';
import About from './pages/About';
import NotFound from './pages/NotFound';
 
export default function App() {
  return (
    <Routes>
      <Route path="/" element={<Layout />}>
        <Route index element={<Home />} />
        <Route path="blog" element={<Blog />} />
        <Route path="blog/:slug" element={<Post />} />
        <Route path="about" element={<About />} />
        <Route path="*" element={<NotFound />} />
      </Route>
    </Routes>
  );
}

import { Link, NavLink, useNavigate } from 'react-router-dom';
 
function Navigation() {
  const navigate = useNavigate();
 
  return (
    <nav>
      {/* Link — điều hướng cơ bản */}
      <Link to="/">Trang chủ</Link>
 
      {/* NavLink — thêm class 'active' khi route khớp */}
      <NavLink
        to="/blog"
        className={({ isActive }) => isActive ? 'nav-link active' : 'nav-link'}
      >
        Blog
      </NavLink>
 
      {/* Điều hướng theo chương trình */}
      <button onClick={() => navigate('/about')}>Giới thiệu</button>
      <button onClick={() => navigate(-1)}>Quay lại</button>
    </nav>
  );
}

// components/Layout.jsx
import { Outlet, Link } from 'react-router-dom';
 
export default function Layout() {
  return (
    <div>
      <header>
        <Link to="/">MyApp</Link>
        <nav>
          <Link to="/blog">Blog</Link>
          <Link to="/about">Giới thiệu</Link>
        </nav>
      </header>
 
      <main>
        <Outlet /> {/* Child route render ở đây */}
      </main>
 
      <footer>© 2026 MyApp</footer>
    </div>
  );
}

// pages/Blog.jsx — với nested routes
import { Outlet } from 'react-router-dom';
 
export default function Blog() {
  return (
    <div className="blog-layout">
      <aside>
        <h2>Danh mục</h2>
        {/* sidebar */}
      </aside>
      <div className="blog-content">
        <Outlet /> {/* PostList hoặc Post render ở đây */}
      </div>
    </div>
  );
}

import { useParams } from 'react-router-dom';
 
function Post() {
  const { slug } = useParams(); // Đọc :slug từ URL
 
  return <h1>Bài viết: {slug}</h1>;
}

import { Navigate, Outlet } from 'react-router-dom';
import { useAuth } from './hooks/useAuth';
 
function ProtectedRoute() {
  const { user, isLoading } = useAuth();
 
  if (isLoading) return <p>Đang tải...</p>;
  if (!user) return <Navigate to="/login" replace />;
 
  return <Outlet />;
}
 
// Trong App.jsx
<Route element={<ProtectedRoute />}>
  <Route path="/dashboard" element={<Dashboard />} />
  <Route path="/settings" element={<Settings />} />
</Route>

import { useSearchParams } from 'react-router-dom';
 
function BlogList() {
  const [searchParams, setSearchParams] = useSearchParams();
 
  const page = Number(searchParams.get('page') ?? '1');
  const tag = searchParams.get('tag') ?? '';
 
  return (
    <div>
      <input
        value={tag}
        onChange={e => setSearchParams({ tag: e.target.value, page: '1' })}
        placeholder="Lọc theo tag..."
      />
      <p>Trang {page} — Tag: {tag || 'tất cả'}</p>
    </div>
  );
}

import { createContext, useContext, useState } from 'react';
 
// 1. Tạo context
const ThemeContext = createContext(null);
 
// 2. Tạo provider component
export 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>
  );
}
 
// 3. Tạo custom hook để dùng sạch sẽ hơn
export function useTheme() {
  const context = useContext(ThemeContext);
  if (!context) throw new Error('useTheme phải được dùng bên trong ThemeProvider');
  return context;
}
 
// 4. Dùng trong bất kỳ component nào
function ThemeToggle() {
  const { theme, toggle } = useTheme();
  return (
    <button onClick={toggle}>
      Theme hiện tại: {theme}
    </button>
  );
}
 
// 5. Bọc app của bạn
function App() {
  return (
    <ThemeProvider>
      <Router>
        {/* ... */}
      </Router>
    </ThemeProvider>
  );
}

npm install zustand

import { create } from 'zustand';
 
// Định nghĩa store
const useCartStore = create((set, get) => ({
  items: [],
 
  addItem: (product) => set(state => ({
    items: [...state.items, { ...product, quantity: 1 }],
  })),
 
  removeItem: (id) => set(state => ({
    items: state.items.filter(item => item.id !== id),
  })),
 
  updateQuantity: (id, quantity) => set(state => ({
    items: state.items.map(item =>
      item.id === id ? { ...item, quantity } : item
    ),
  })),
 
  clearCart: () => set({ items: [] }),
 
  // Giá trị tính toán qua getters
  get totalItems() {
    return get().items.reduce((sum, item) => sum + item.quantity, 0);
  },
 
  get totalPrice() {
    return get().items.reduce((sum, item) => sum + item.price * item.quantity, 0);
  },
}));
 
// Dùng ở bất kỳ đâu — không cần Provider!
function CartIcon() {
  const totalItems = useCartStore(state => state.totalItems);
  return <span>Giỏ hàng ({totalItems})</span>;
}
 
function ProductCard({ product }) {
  const addItem = useCartStore(state => state.addItem);
  return (
    <div>
      <h3>{product.name}</h3>
      <button onClick={() => addItem(product)}>Thêm vào giỏ</button>
    </div>
  );
}
 
function Cart() {
  const { items, removeItem, clearCart, totalPrice } = useCartStore();
  return (
    <div>
      {items.map(item => (
        <div key={item.id}>
          <span>{item.name} × {item.quantity}</span>
          <button onClick={() => removeItem(item.id)}>Xóa</button>
        </div>
      ))}
      <p>Tổng: {totalPrice.toLocaleString('vi-VN')}đ</p>
      <button onClick={clearCart}>Xóa giỏ hàng</button>
    </div>
  );
}

npm install react-hook-form zod @hookform/resolvers

import { useForm } from 'react-hook-form';
import { z } from 'zod';
import { zodResolver } from '@hookform/resolvers/zod';
 
// 1. Định nghĩa schema
const schema = z.object({
  email: z.string().email('Vui lòng nhập email hợp lệ'),
  password: z.string().min(8, 'Mật khẩu phải có ít nhất 8 ký tự'),
  confirmPassword: z.string(),
}).refine(data => data.password === data.confirmPassword, {
  message: 'Mật khẩu không khớp',
  path: ['confirmPassword'],
});
 
function SignupForm() {
  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting },
    reset,
  } = useForm({
    resolver: zodResolver(schema),
  });
 
  const onSubmit = async (data) => {
    try {
      await fetch('/api/signup', {
        method: 'POST',
        body: JSON.stringify(data),
      });
      reset();
      alert('Tạo tài khoản thành công!');
    } catch (err) {
      console.error(err);
    }
  };
 
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label htmlFor="email">Email</label>
        <input
          id="email"
          type="email"
          {...register('email')}
        />
        {errors.email && <p className="error">{errors.email.message}</p>}
      </div>
 
      <div>
        <label htmlFor="password">Mật khẩu</label>
        <input
          id="password"
          type="password"
          {...register('password')}
        />
        {errors.password && <p className="error">{errors.password.message}</p>}
      </div>
 
      <div>
        <label htmlFor="confirmPassword">Xác nhận mật khẩu</label>
        <input
          id="confirmPassword"
          type="password"
          {...register('confirmPassword')}
        />
        {errors.confirmPassword && (
          <p className="error">{errors.confirmPassword.message}</p>
        )}
      </div>
 
      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? 'Đang tạo tài khoản...' : 'Đăng ký'}
      </button>
    </form>
  );
}

const { register, watch, handleSubmit } = useForm();
 
const role = watch('role'); // Reactive — re-render khi 'role' thay đổi
 
return (
  <form onSubmit={handleSubmit(onSubmit)}>
    <select {...register('role')}>
      <option value="user">Người dùng</option>
      <option value="admin">Admin</option>
    </select>
 
    {role === 'admin' && (
      <input
        {...register('adminCode')}
        placeholder="Mã truy cập admin"
      />
    )}
  </form>
);

import { useFieldArray, useForm } from 'react-hook-form';
 
function InvoiceForm() {
  const { register, control, handleSubmit } = useForm({
    defaultValues: { items: [{ name: '', price: 0, qty: 1 }] },
  });
 
  const { fields, append, remove } = useFieldArray({
    control,
    name: 'items',
  });
 
  return (
    <form onSubmit={handleSubmit(console.log)}>
      {fields.map((field, index) => (
        <div key={field.id}>
          <input {...register(`items.${index}.name`)} placeholder="Tên sản phẩm" />
          <input {...register(`items.${index}.price`)} type="number" placeholder="Giá" />
          <input {...register(`items.${index}.qty`)} type="number" placeholder="Số lượng" />
          <button type="button" onClick={() => remove(index)}>Xóa</button>
        </div>
      ))}
      <button type="button" onClick={() => append({ name: '', price: 0, qty: 1 })}>
        Thêm sản phẩm
      </button>
      <button type="submit">Gửi</button>
    </form>
  );
}

npm install @tanstack/react-query

// main.jsx
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 1000 * 60, // 1 phút — không refetch nếu dữ liệu còn mới
      retry: 2,             // Thử lại 2 lần khi request thất bại
    },
  },
});
 
createRoot(document.getElementById('root')).render(
  <QueryClientProvider client={queryClient}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </QueryClientProvider>
);

import { useQuery } from '@tanstack/react-query';
 
async function fetchUser(userId) {
  const res = await fetch(`/api/users/${userId}`);
  if (!res.ok) throw new Error('Không thể tải thông tin người dùng');
  return res.json();
}
 
function UserProfile({ userId }) {
  const { data: user, isLoading, isError, error } = useQuery({
    queryKey: ['user', userId],  // Cache key duy nhất
    queryFn: () => fetchUser(userId),
  });
 
  if (isLoading) return <p>Đang tải...</p>;
  if (isError) return <p>Lỗi: {error.message}</p>;
 
  return (
    <div>
      <h2>{user.name}</h2>
      <p>{user.email}</p>
    </div>
  );
}

import { useMutation, useQueryClient } from '@tanstack/react-query';
 
function CreatePost() {
  const queryClient = useQueryClient();
 
  const mutation = useMutation({
    mutationFn: (newPost) =>
      fetch('/api/posts', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(newPost),
      }).then(res => res.json()),
 
    onSuccess: () => {
      // Invalidate danh sách posts để refetch với bài mới
      queryClient.invalidateQueries({ queryKey: ['posts'] });
    },
  });
 
  const handleSubmit = (e) => {
    e.preventDefault();
    const form = e.target;
    mutation.mutate({
      title: form.title.value,
      body: form.body.value,
    });
  };
 
  return (
    <form onSubmit={handleSubmit}>
      <input name="title" placeholder="Tiêu đề" />
      <textarea name="body" placeholder="Nội dung" />
      <button type="submit" disabled={mutation.isPending}>
        {mutation.isPending ? 'Đang tạo...' : 'Tạo bài viết'}
      </button>
      {mutation.isError && <p>Lỗi: {mutation.error.message}</p>}
      {mutation.isSuccess && <p>Tạo bài viết thành công!</p>}
    </form>
  );
}

import { useState } from 'react';
import { useQuery } from '@tanstack/react-query';
 
function PostList() {
  const [page, setPage] = useState(1);
 
  const { data, isLoading, isPlaceholderData } = useQuery({
    queryKey: ['posts', page],
    queryFn: () => fetch(`/api/posts?page=${page}&limit=10`).then(r => r.json()),
    placeholderData: (prev) => prev, // Giữ dữ liệu trang cũ khi tải trang mới
  });
 
  return (
    <div>
      {isLoading ? (
        <p>Đang tải...</p>
      ) : (
        <ul>
          {data.posts.map(post => (
            <li key={post.id}>{post.title}</li>
          ))}
        </ul>
      )}
 
      <div className="pagination">
        <button
          onClick={() => setPage(p => p - 1)}
          disabled={page === 1}
        >
          Trước
        </button>
        <span>Trang {page}</span>
        <button
          onClick={() => setPage(p => p + 1)}
          disabled={!data?.hasNextPage || isPlaceholderData}
        >
          Tiếp
        </button>
      </div>
    </div>
  );
}

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

// Không cần CSS tùy chỉnh
function Button({ children, variant = 'primary' }) {
  const base = 'px-4 py-2 rounded-md font-medium transition-colors';
  const variants = {
    primary: 'bg-blue-600 text-white hover:bg-blue-700',
    secondary: 'bg-gray-100 text-gray-900 hover:bg-gray-200',
    danger: 'bg-red-600 text-white hover:bg-red-700',
  };
 
  return (
    <button className={`${base} ${variants[variant]}`}>
      {children}
    </button>
  );
}
 
function Card({ title, description, imageUrl }) {
  return (
    <div className="rounded-xl border border-gray-200 overflow-hidden shadow-sm hover:shadow-md transition-shadow">
      <img src={imageUrl} alt={title} className="w-full h-48 object-cover" />
      <div className="p-4">
        <h3 className="text-lg font-semibold text-gray-900">{title}</h3>
        <p className="mt-1 text-sm text-gray-500">{description}</p>
      </div>
    </div>
  );
}

npx shadcn@latest init
npx shadcn@latest add button input dialog card

import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@/components/ui/dialog';
 
function LoginDialog() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button variant="outline">Đăng nhập</Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Đăng nhập</DialogTitle>
        </DialogHeader>
        <form className="space-y-4">
          <Input type="email" placeholder="Email" />
          <Input type="password" placeholder="Mật khẩu" />
          <Button type="submit" className="w-full">Đăng nhập</Button>
        </form>
      </DialogContent>
    </Dialog>
  );
}

function PostList() {
  const { data: posts, isLoading, isError, error } = useQuery({
    queryKey: ['posts'],
    queryFn: () => fetch('/api/posts').then(r => r.json()),
  });
 
  // Loading
  if (isLoading) {
    return (
      <div className="space-y-4">
        {Array.from({ length: 3 }).map((_, i) => (
          <div key={i} className="h-24 bg-gray-200 rounded-lg animate-pulse" />
        ))}
      </div>
    );
  }
 
  // Lỗi
  if (isError) {
    return (
      <div className="rounded-lg bg-red-50 border border-red-200 p-4">
        <p className="text-red-800">Không thể tải bài viết: {error.message}</p>
        <button className="mt-2 text-red-600 underline">Thử lại</button>
      </div>
    );
  }
 
  // Rỗng
  if (posts.length === 0) {
    return (
      <div className="text-center py-12">
        <p className="text-gray-500">Chưa có bài viết nào.</p>
        <a href="/new" className="mt-4 text-blue-600">Viết bài đầu tiên →</a>
      </div>
    );
  }
 
  // Thành công
  return (
    <ul className="space-y-4">
      {posts.map(post => (
        <li key={post.id}>
          <a href={`/blog/${post.slug}`}>{post.title}</a>
        </li>
      ))}
    </ul>
  );
}

src/
├── components/
│   ├── ui/            # shadcn/ui components
│   ├── Layout.jsx
│   └── ProtectedRoute.jsx
├── pages/
│   ├── Home.jsx
│   ├── Blog.jsx
│   ├── Post.jsx
│   └── Dashboard.jsx
├── hooks/
│   ├── useAuth.js
│   └── usePosts.js    # Bọc TanStack Query
├── stores/
│   └── cartStore.js   # Zustand store
├── lib/
│   └── queryClient.js # TanStack Query client
├── App.jsx
└── main.jsx