Bài 2: Component & Props – Chia nhỏ giao diện để tái sử dụng

Chào mừng bạn quay trở lại với Series Chinh phục ReactJS siêu tốc trong 15 phút. Ở bài trước, chúng ta đã khởi tạo thành công dự án với Vite và tìm hiểu về cú pháp JSX. Hôm nay, chúng ta sẽ bước sang hai khái niệm quan trọng nhất, quyết định cách bạn tư duy và xây dựng giao diện trong React: Component và Props.

Tư duy “Lego” trong lập trình giao diện

Hãy tưởng tượng bạn đang xây dựng giao diện danh sách bài viết cho một trang blog. Mỗi bài viết sẽ gồm có: ảnh bìa, tiêu đề, ngày đăng và nút “Xem thêm”. Nếu trang chủ hiển thị 10 bài viết, cách làm truyền thống nếu chỉ code với HTML là bạn phải copy-paste đoạn code đó 10 lần. Hệ quả là file code của bạn sẽ dài hàng nghìn dòng, cực kỳ rối mắt và khi cần sửa một chi tiết nhỏ, bạn phải sửa ở cả 10 chỗ.

React giải quyết bài toán này bằng tư duy Component. Bạn chỉ cần tạo ra một chiếc “khuôn” duy nhất cho bài viết. Sau đó, bạn tái sử dụng chiếc khuôn này ở bất kỳ đâu bạn muốn. Trong React, giao diện được lắp ghép từ nhiều mảnh nhỏ độc lập giống như những viên gạch Lego vậy.

Tạo và sử dụng Component đầu tiên

Để thực hành, bạn hãy mở dự án Vite từ bài 1 bằng Code editor bất kỳ, ở đây mình sẽ dùng VS Code. Chúng ta sẽ tạo ra một component tên là PostCard (Thẻ bài viết).

Bước 1: Tạo file Component mới

Trong thư mục src, bạn tạo một file mới tên là PostCard.jsx và viết đoạn code sau:

JavaScript

// src/PostCard.jsx
function PostCard() {
  return (
    <div style={{ border: '1px solid #ccc', padding: '15px', borderRadius: '8px', margin: '10px 0' }}>
      <h3>Bài 1: Khởi tạo dự án & Giải mã cú pháp JSX</h3>
      <p>Ngày đăng: 23/06/2026</p>
      <button>Xem thêm</button>
    </div>
  );
}

export default PostCard;

⚠️ Quy tắc vàng: Tên của Component bắt buộc phải viết hoa chữ cái đầu tiên (PostCard chứ không phải postCard). Nếu bạn viết thường, React sẽ hiểu nhầm đó là một thẻ HTML mặc định (như <div>, <p>) và code sẽ bị lỗi.

Bước 2: Gọi Component vào sử dụng

Bây giờ, hãy mở file src/App.jsx, dọn dẹp các đoạn code cũ, tiến hành import và gọi component PostCard vừa tạo ra:

// src/App.jsx
import PostCard from './PostCard';

function App() {
  return (
    <div style={{ padding: '20px', maxWidth: '600px', margin: '0 auto' }}>
      <h1>TienDev Blog</h1>
      <p>Bài viết</p>
      
      {/* Tái sử dụng Component nhiều lần */}
      <PostCard />
      <PostCard />
      <PostCard />
    </div>
  );
}

export default App;

Kiểm tra trên trình duyệt, bạn sẽ thấy 3 chiếc thẻ bài viết xuất hiện. Tuy nhiên, có một vấn đề: Cả 3 thẻ đều hiển thị nội dung y hệt nhau! Làm sao để mỗi thẻ hiển thị một tiêu đề và ngày đăng khác nhau? Đó là lúc chúng ta cần đến Props.

“Thổi hồn” cho Component với Props

Nếu Component là chiếc khuôn bánh, thì Props (viết tắt của Properties) chính là nguyên liệu bạn đổ vào khuôn để tạo ra những chiếc bánh có hương vị khác nhau. Props là cách để Component Cha (App.jsx) truyền dữ liệu xuống cho Component Con (PostCard.jsx).

Bước 1: Truyền dữ liệu từ Component Cha (App.jsx)

Bạn có thể truyền dữ liệu vào Component tương tự như cách viết attribute trong HTML:

// src/App.jsx
import PostCard from './PostCard';

function App() {
  return (
    <div style={{ padding: '20px', maxWidth: '600px', margin: '0 auto' }}>
      <h1>TienDev Blog</h1>
      
      <PostCard title="Bài 1: Khởi tạo dự án & Giải mã cú pháp JSX" date="23/06/2026" />
      <PostCard title="Bài 2: Component & Props - Chia nhỏ giao diện" date="24/06/2026" />
      <PostCard title="Bài 3: State & Sự kiện - Làm chủ dòng dữ liệu" date="25/06/2026" />
    </div>
  );
}

export default App;

Bước 2: Nhận dữ liệu tại Component Con (PostCard.jsx)

React sẽ gom tất cả dữ liệu được truyền vào thành một object và gửi nó làm tham số đầu vào của hàm Component. Chúng ta sẽ dùng cú pháp Destructuring của JavaScript để lấy trực tiếp dữ liệu ra và đưa vào cấu trúc JSX bằng cặp dấu ngoặc nhọn {}:

// src/PostCard.jsx
function PostCard({ title, date }) {
  return (
    <div style={{ border: '1px solid #ccc', padding: '15px', borderRadius: '8px', margin: '10px 0' }}>
      <h3>{title}</h3>
      <p>Ngày đăng: {date}</p>
      <button>Xem thêm</button>
    </div>
  );
}

export default PostCard;

Quay lại trình duyệt, bạn sẽ thấy 3 thẻ bài viết bây giờ đã hiển thị thông tin hoàn toàn riêng biệt và chính xác!

Đặc tính quan trọng của Props: Read-Only (Chỉ đọc)

Có một quy tắc bất di bất dịch trong React mà bạn phải luôn ghi nhớ: Props là dữ liệu chỉ đọc (Immutable) hay dịch ra là bất biến. Component con nhận dữ liệu từ cha và chỉ có nhiệm vụ hiển thị nó ra, tuyệt đối không được phép tự ý sửa đổi giá trị của props.

Ví dụ: Bạn không được phép gán lại title = "Tiêu đề mới" ngay bên trong hàm PostCard. Nếu muốn thay đổi, dữ liệu đó phải được thay đổi từ chính Component Cha, hoặc sử dụng một cơ chế quản lý dữ liệu nội bộ khác gọi là State.

Lời kết

Qua bài viết, bạn đã nắm trọn vẹn:

• Cách tư duy chia nhỏ giao diện thành các Component độc lập để dễ quản lý và tái sử dụng.
• Cách truyền và nhận dữ liệu động giữa các component thông qua Props.

Nếu Props là dữ liệu cố định từ bên ngoài truyền vào và không thể sửa đổi, vậy khi người dùng click vào nút “Like” trên thẻ bài viết và bạn muốn số lượt thích tự động tăng lên ngay trên màn hình thì phải làm sao?

Cùng đón xem Bài 3: State & Event – Kiểm soát trạng thái & Xử lý sự kiện nhé!