Bài 2. JSX và Component – Viết giao diện kiểu mới trong JavaScript

Sau khi bạn đã biết React là gì, lý do nó “quá hot” và cách tạo project đầu tiên, thì giờ là lúc chúng ta bắt tay vào viết code React thật sự!

---

Viết HTML trong JavaScript? Có thật không?

Nếu bạn đã quen với việc viết HTML trong file .html và JavaScript trong file .js thì khi mới học React, bạn sẽ thấy hơi “sốc” vì React cho phép bạn viết HTML ngay bên trong JavaScript!

Thật đó! Và cú pháp “lạ lạ mà quen quen” này có tên là: JSX.

Trong bài học hôm nay, bạn sẽ:

• Làm quen với cú pháp JSX – cách viết HTML trong JavaScript
• Hiểu và tạo được Component – khối xây dựng cơ bản của React
• Biết cách dùng Component như những “mảnh Lego” trong giao diện
• Bắt đầu cảm thấy… nghiện React vì nó quá mượt 😎

---

1. JSX là gì?

JSX (JavaScript XML) là cú pháp cho phép bạn viết HTML ngay trong JavaScript, dùng để mô tả giao diện React.

Ví dụ:

📋 Copyconst element = <h1>Xin chào các bạn!</h1>;

JSX không phải HTML thuần, mà là một cú pháp mở rộng của JavaScript, được biên dịch thành các lệnh gọi React.createElement() đằng sau hậu trường.

---

Một số lưu ý khi dùng JSX

• Chỉ return về một phần tử gốc duy nhất

📋 Copyreturn (
  <div>
    <h1>Tiêu đề</h1>
    <p>Đoạn mô tả</p>
  </div>
);

• Dùng className thay vì class

📋 Copy<p className="gioi-thieu">Chào bạn</p>

• Dùng {} để nhúng JavaScript vào giao diện

📋 Copyconst name = "Tuấn";

return <h2>Xin chào, {name}!</h2>;

---

2. Component là gì?

Component là “trái tim” của React. Mỗi component là một khối giao diện riêng biệt, có thể:

• Tái sử dụng nhiều lần
• Nhận dữ liệu từ ngoài (qua props)
• Có trạng thái riêng (với state)
• Xử lý hành vi tương tác (event)

Bạn có thể hình dung giao diện là một tổ hợp của nhiều “mảnh Lego” – chính là các component.

---

Có 2 loại component:

1. Functional Component – kiểu hiện đại

📋 Copyfunction Hello() {
  return <h1>Xin chào từ React!</h1>;
}

Hoặc viết dạng arrow function:

📋 Copyconst Hello = () => <h1>Hello bạn!</h1>;

2. Class Component – kiểu cũ, ít dùng dần

📋 Copyclass Hello extends React.Component {
  render() {
    return <h1>Hello từ class!</h1>;
  }
}

Trong khóa học này, mình sẽ hướng dẫn bạn theo Functional Component + Hooks – đây là chuẩn hiện tại của React.

---

3. Cách sử dụng Component

Giả sử bạn đã tạo 1 component tên Hello, bạn có thể dùng nó trong App như sau:

📋 Copyfunction App() {
  return (
    <div>
      <Hello />
      <Hello />
    </div>
  );
}

Component viết hoa chữ cái đầu
Mỗi lần dùng giống như dùng thẻ HTML mới (custom tag)

---

4. Ví dụ thực tế: trang chào mừng

Bước 1: Tạo component Greeting.js

📋 Copyfunction Greeting() {
  const name = "Minh";
  return <h2>Chào bạn, {name}!</h2>;
}

export default Greeting;

Bước 2: Import vào App.js

📋 Copyimport Greeting from './Greeting';

function App() {
  return (
    <div>
      <h1>Trang React đầu tiên</h1>
      <Greeting />
    </div>
  );
}

export default App;

Kết quả: hiện ra cả tiêu đề và lời chào “Chào bạn, Minh!”

---

5. Bài tập thực hành

Tạo project React mới (nếu chưa có)

📋 Copynpx create-react-app bai2-jsx-component
cd bai2-jsx-component
npm start

Tạo 3 component:

• Header.js: chứa tiêu đề trang
• UserCard.js: hiển thị tên và mô tả người dùng
• Footer.js: chứa dòng chữ “Học React vui ghê!”

App.js sẽ import và hiển thị các component theo thứ tự:

📋 Copy<Header />
<UserCard />
<Footer />

Bonus:

• Dùng biến để hiển thị thông tin người dùng (const user = {...})
• Nhúng giá trị vào JSX bằng {}

---

6. Kết bài – JSX + Component = Combo chiến thần

Bạn thấy đấy, từ giờ bạn sẽ viết giao diện bằng JSX và chia nhỏ code thành các component tái sử dụng – giúp cho project của bạn vừa gọn gàng, dễ hiểu, dễ mở rộng, mà nhìn cũng rất “sạch sẽ”.

Trong bài tiếp theo, chúng ta sẽ đi sâu hơn vào truyền dữ liệu giữa các component qua Props, và cách component quản lý dữ liệu bên trong nó bằng State.

Hẹn bạn ở Bài 3: Props & State – Giao tiếp và quản lý dữ liệu trong React