Login

React cho người mới: component, JSX và props

  • author-image

    Nguyễn Đình Cường

  • blog-tag
  • blog-comment 0 comment
  • created-date 09 Nov, 2026
blog-thumbnail

React là thư viện JavaScript để xây dựng giao diện người dùng, do một công ty công nghệ lớn phát triển và hiện được dùng rộng rãi. Ý tưởng cốt lõi rất đơn giản: chia giao diện thành các thành phần (component) nhỏ, mỗi component nhận dữ liệu vào và trả về giao diện tương ứng.

Tạo dự án thử nghiệm

Cách phổ biến hiện nay là dùng Vite để tạo nhanh một dự án React:

npm create vite@latest hoc-react -- --template react
cd hoc-react
npm install
npm run dev

Lệnh cuối khởi động máy chủ phát triển, thường ở cổng 5173, tự nạp lại trang mỗi khi bạn lưu file. Bạn cần cài sẵn Node.js.

JSX: HTML trong JavaScript

JSX là cú pháp trông giống HTML nhưng nằm trong JavaScript, được công cụ build chuyển thành lời gọi hàm. Một vài khác biệt so với HTML thuần:

  • Dùng className thay vì class, và htmlFor thay vì for.
  • Thuộc tính viết kiểu camelCase, như onClick.
  • Mọi thẻ phải đóng, kể cả <img /> và <input />.
  • Một component chỉ trả về một phần tử gốc; dùng thẻ rỗng <>...</> (fragment) để bọc nhiều phần tử.
  • Chèn biểu thức JavaScript bằng cặp ngoặc nhọn.

Function component đầu tiên

function LoiChao() {
  const ten = 'Lan';
  return (
    <div className='loi-chao'>
      <h2>Xin chào, {ten}!</h2>
      <p>Hôm nay là {new Date().toLocaleDateString('vi-VN')}</p>
    </div>
  );
}

export default LoiChao;

Tên component bắt buộc viết hoa chữ cái đầu để React phân biệt với thẻ HTML thường. Bạn dùng nó như một thẻ: <LoiChao />.

Props: truyền dữ liệu vào component

Props (properties) là đối số của component, truyền từ cha xuống con:

function TheKhoaHoc({ ten, giaoVien, gia, mienPhi = false }) {
  return (
    <article className='the'>
      <h3>{ten}</h3>
      <p>Giảng viên: {giaoVien}</p>
      <strong>{mienPhi ? 'Miễn phí' : gia.toLocaleString('vi-VN') + ' đ'}</strong>
    </article>
  );
}

function App() {
  return (
    <div>
      <TheKhoaHoc ten='HTML cơ bản' giaoVien='Nam' gia={200000} />
      <TheKhoaHoc ten='Nhập môn lập trình' giaoVien='Mai' gia={0} mienPhi />
    </div>
  );
}

Chuỗi truyền trong dấu nháy, còn số, boolean, mảng hay object truyền trong ngoặc nhọn. Quy tắc quan trọng: props chỉ đọc. Component không được sửa props của mình, dữ liệu chảy một chiều từ cha xuống con.

children: nội dung lồng bên trong

function Khung({ tieuDe, children }) {
  return (
    <section>
      <h2>{tieuDe}</h2>
      {children}
    </section>
  );
}

// sử dụng
<Khung tieuDe='Giới thiệu'>
  <p>Nội dung bên trong khung.</p>
</Khung>

Prop đặc biệt children cho phép bạn tạo các component bố cục như khung, thẻ, hộp thoại có thể chứa bất kỳ nội dung nào.

Hiển thị có điều kiện và danh sách

{dangTai && <p>Đang tải...</p>}
{loi ? <p>Có lỗi</p> : <DanhSach />}

<ul>
  {khoaHoc.map(k => (
    <li key={k.id}>{k.ten}</li>
  ))}
</ul>

Khi render danh sách bằng map, mỗi phần tử cần thuộc tính key duy nhất và ổn định, thường là id từ dữ liệu, để React cập nhật hiệu quả.

Tư duy React

  1. Chia giao diện thành component, mỗi component làm một việc.
  2. Giao diện là hàm của dữ liệu: bạn không tự thay đổi DOM, chỉ thay đổi dữ liệu và để React cập nhật giao diện.
  3. Dữ liệu chảy một chiều: từ cha xuống con qua props.
  4. Giữ component nhỏ và thuần: cùng props thì cho ra cùng giao diện.

Ví dụ: ghép các component thành một trang

Hãy xem cách các mảnh ghép nối với nhau thành trang danh sách khóa học nhỏ, với dữ liệu nằm ở component cha và được chuyển xuống qua props:

const DU_LIEU = [
  { id: 1, ten: 'HTML cơ bản', giaoVien: 'Nam', gia: 200000 },
  { id: 2, ten: 'CSS thực chiến', giaoVien: 'Mai', gia: 300000 },
  { id: 3, ten: 'React nhập môn', giaoVien: 'Lan', gia: 0 },
];

function App() {
  return (
    <main>
      <h1>Khóa học nổi bật</h1>
      <div className='luoi'>
        {DU_LIEU.map(k => (
          <TheKhoaHoc
            key={k.id}
            ten={k.ten}
            giaoVien={k.giaoVien}
            gia={k.gia}
            mienPhi={k.gia === 0}
          />
        ))}
      </div>
    </main>
  );
}

Chú ý vài điểm: dữ liệu là mảng thông thường, mỗi phần tử biến thành một component nhờ map; thuộc tính key lấy từ id; và toàn bộ trang được mô tả khai báo, bạn không viết lệnh nào để tạo hay chèn phần tử DOM. Đây chính là điểm khác biệt lớn nhất so với cách làm thủ công bằng createElement.

Cấu trúc thư mục gợi ý

Khi dự án có nhiều component, mỗi component nên nằm trong file riêng, đặt tên file trùng tên component, ví dụ TheKhoaHoc.jsx. Bạn có thể gom các file liên quan vào thư mục components. Đừng cầu kỳ quá sớm: hãy bắt đầu đơn giản, tách file khi thấy một file bắt đầu dài hoặc một component được dùng ở nhiều nơi.

Kết luận

Bạn đã nắm JSX, component, props, children, hiển thị có điều kiện và danh sách. Bước tiếp theo là cho component có trạng thái riêng bằng Hook useState, sẽ làm giao diện thay đổi theo tương tác của người dùng.

Nếu muốn xây dựng ứng dụng React hoàn chỉnh theo từng bước, hãy xem thêm các khóa học trên codebem.com.

author_photo
Nguyễn Đình Cường

0 comment