Bài 3: Kết nối REST API & Quản lý State

Trong bài này, chúng ta sẽ tìm hiểu cách gọi API từ Backend service và quản lý danh sách dữ liệu trong ứng dụng React thực tế.

---

1. Kết nối REST API với fetch / axios

Khi tương tác với hệ thống Server Swantech, chúng ta thường sử dụng fetch API hoặc thư viện axios để thực hiện yêu cầu HTTP.

import React, { useState, useEffect } from 'react';

function ProductList() {
  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchProducts() {
      try {
        setLoading(true);
        // Giả lập API gọi danh sách sản phẩm Swantech
        const response = await fetch('https://api.swantech.vn/v1/products');
        if (!response.ok) {
          throw new Error('Không thể tải dữ liệu từ máy chủ.');
        }
        const data = await response.json();
        setProducts(data);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    }

    fetchProducts();
  }, []);

  if (loading) return <div>Đang tải danh sách sản phẩm Swantech...</div>;
  if (error) return <div className="error-message">Lỗi: {error}</div>;

  return (
    <div className="product-grid">
      {products.map((item) => (
        <div key={item.id} className="product-card">
          <h4>{item.name}</h4>
          <p>{item.description}</p>
        </div>
      ))}
    </div>
  );
}

---

2. Best Practices khi lập trình React tại Swantech

1. Phân chia Component hợp lý: Giữ Component ngắn gọn (dưới 200 dòng mã), tách nhỏ UI thành các component nguyên tử (Atoms, Molecules).
2. Xử lý bất đồng bộ an toàn: Luôn thêm trạng thái loading và error khi thao tác với dữ liệu mạng.
3. Tối ưu re-render: Sử dụng useMemo và useCallback cho các phép tính hoặc hàm callback tốn chi phí hiệu năng.