Bài 1: Khởi tạo dự án & Giải mã cú pháp JSX

Chào mừng bạn đã đến với bài học đầu tiên trong Series Chinh phục ReactJS siêu tốc trong 15 phút! Đầu tiên, chúng ta sẽ cùng nhau setup môi trường và giải mã cú pháp cốt lõi của React ngay bây giờ.

Khởi tạo dự án

Để khởi tạo dự án, trước đây bạn sẽ dùng công cụ create-react-app do chính Meta (Facebook) phát triển từ 2016. Trải qua suốt nhiều năm, đến 03/2023, công cụ này chính thức bị ngừng hỗ trợ và khai tử. Lý do là vì nó quá nặng nề và chậm chạp.

Theo recommended của React Dev Team, để xây dựng 1 dự án React, bạn nên bắt đầu cùng một framework. Hiện tại năm 2026, Vite ⚡ đang là công cụ khởi tạo dự án tự động (CLI Scaffolding Tool) nhanh và phổ biến nhất thế giới. Bạn có thể tưởng tượng, Vite giống như cái “móng nhà” kiên cố và hiện đại và có thể dùng cho hầu hết các framework JS phổ biến hiện nay không chỉ riêng React như Vue.js, Preact, Svelte, SolidJS, VanillaJS.

Để khởi tạo dự án với Vite, trước tiên máy tính của bạn cần phải cài đặt Node.js (bản LTS mới nhất) tại trang nodejs.org và gõ lệnh sau để kiểm tra xem máy đã nhận Node.js chưa.

# Kiểm tra phiên bản Node.js
node -v

Sau đó, mở Terminal (Command Prompt) lên và chạy lệnh:

# Dùng -- --template react nếu bạn code trên Javascript
npm create vite@latest your-app-name -- --template react
# Hoặc -- --template react-ts template nếu bạn code với Typescript
npm create vite@latest your-app-name -- --template react-ts
cd your-app-name
npm install
npm run dev

Xuyên suốt series mình sẽ sử dụng npm để triển khai nhanh mã nguồn do nó được tích hợp sẵn trong Node.js. Nếu bạn dùng các trình quản lý thư viện khác (Package Managers) thì có thể tham khảo thêm tại trang hướng dẫn của Vite tại đây.

Kết quả: Dự án của bạn sẽ khởi chạy chỉ trong chưa đầy 1 giây tại địa chỉ http://localhost:5173. Hãy mở thư mục bằng VS Code, vào file src/App.jsx, xóa sạch code thừa bên trong hàm App() để chuẩn bị viết những dòng code đầu tiên.

Bên cạnh Vite, còn có nhiều công cụ khác cực mạnh mẽ theo từng nền tảng (framework) bạn chọn như:

• create-next-app là tool khởi tạo của Next.js – một fullstack React framework, do Vercel phát triển.
• create-react-router là tool khởi tạo của React Router – thư viện định tuyến phổ biến nhất dành cho React, có thể kết hợp cùng Vite để tạo fullstack React framework, được duy trì bởi Shopify.
• create-expo-app là tool khởi tạo của Expo – một React framework cho phép tạo ứng dụng đa nền tảng, do Expo Company phát triển.
• Tanstack Start (Đang phát triển) là fullstack React framework được cung cấp bởi TanStack Router.

Giải mã cú pháp JSX là gì?

Khi mở file .jsx (JavaScript XML) hay .tsx (TypeScript XML), bạn sẽ thấy một thứ trông rất “kỳ dị”: Code HTML được viết thẳng vào bên trong hàm của JavaScript. Đó chính là JSX (JavaScript XML).

Về bản chất, JSX không phải là HTML. Nó là một cú pháp mở rộng giúp bạn viết cấu trúc giao diện một cách trực quan hơn. Sau đó, React sẽ tự động “dịch” đống JSX này thành code JavaScript thuần để trình duyệt có thể hiểu được.

// Ví dụ: profile.jsx
function MyAvatar() {
  return (
    <img
      src="https://sample.com/avatar.jpg"
      alt="My name"
    />
  );
}

export default function ProfilePage() {
  return (
    <section>
      <h1>My Profile</h1>
      <MyAvatar />
    </section>
  );
}

Quy tắc vàng của JSX bắt buộc phải nằm lòng

Thừa kế một thẻ bọc duy nhất (Fragment)

Để tránh bị lỗi đỏ lòm màn hình khi gõ JSX, bạn chỉ cần nhớ kỹ 3 quy tắc “mì ăn liền” sau:

JSX bắt buộc phải có một thẻ bọc duy nhất ở ngoài cùng. Nếu bạn viết 2 thẻ <h1> và <p> nằm song song mà không có thẻ bọc, React sẽ báo lỗi ngay.

• Mẹo: Thay vì dùng thẻ <div> làm thừa thãi cấu trúc HTML, hãy dùng thẻ trống <></> (React Fragment):

// Đúng chuẩn
<>
  <h1>TienDev Blog</h1>
  <p>Học ReactJS trong 15 phút</p>
</>

Tất cả các thẻ phải được đóng

Trong HTML thuần, bạn viết <img src="..."> hay <input> mà không đóng thẻ thì web vẫn chạy. Nhưng trong JSX, tất cả các thẻ (kể cả thẻ đơn) bắt buộc phải có dấu gạch chéo để đóng thẻ (/).

• Ví dụ:

<img src="..." />
<input type="text" />
<br />

Chuyển đổi tên các thuộc tính (Attribute) sang camelCase

Vì JSX chạy trên nền tảng JavaScript, nên một số từ khóa trùng với JS phải được thay đổi:

• class đổi thành className (Vì class trùng với Class trong JS).
• for đổi thành htmlFor.
• Các thuộc tính tiêu chuẩn của HTML khi viết trong React sẽ cần chuyển đổi sang camelCase, ngoại trừ các thuộc tính tùy chỉnh như data-*, và thuộc tính hỗ trợ tiếp cận như aria-* sẽ không đổi.

// Các thuộc tính tiêu chuẩn
<input id="color" type="color" hidden onChange={handleChange} />
<label htmlFor="color" className="btn btn-primary">Chọn màu</label>

// Các thuộc tính tùy chỉnh
<a data-profile-id="123" aria-label="Xem hồ sơ" href="/profile">View My Profile</a>

Quy tắc đặt tên biến, hàm và component

React là một thư viện Javascript (JS) cho nên việc đặt tên biến, hàm cũng mang phong cách của JS. Thông thường sẽ như sau:

• Tên biến, hàm: đặt theo quy tắc camelCase (Lower Camel Case). Ví dụ: myName, onClick, useState.
• Tên Component: chữ cái đầu tiên viết hoa và theo quy tắc CamelCase (Upper Camel Case). Ví dụ: App, MyProfile.

Lưu ý:

• Tên props: có thể đặt theo 2 kiểu trên tùy mục đích sử dụng. Ví dụ: value, showButton.
• Các thuộc tính CSS sử dụng khi style trong React sẽ đặt tên theo quy tắc camelCase và viết dưới dạng object { attrName1: value1, attrName2: value2 } thay vì dạng nối chuỗi “attr-name-1: value1; attr-name-2: value2” như trong HTML.

// component MyProfile
function MyProfile({ showButton = true }: { showButton: boolean }) { // prop showButton
  const myName = "TienDev"; // biến myName
  
  const handleClick = () => {
    alert("Hello! 👋");
  } // hàm handleClick

  return (
    <>
      // style object
      <p>My name is <span style={{ fontWeight: "bold", color: "blue", fontStyle: "italic" }}>{myName}</span></p> 
      {showButton && <button onClick={handleClick}>Click me!</button>}
    </>
  )
}

Đưa JavaScript vào trong JSX bằng cặp ngoặc nhọn {}

Muốn hiển thị một biến, một phép tính, hoặc gọi một hàm JavaScript ngay giữa giao diện? Hãy đặt nó vào trong cặp ngoặc nhọn {}.

function App() {
  const myName = "TienDev";
  const enjoying = true;

  return (
    <>
      <h1>Xin chào, {myName}!</h1>
      <p>1 + 1 bằng: {1 + 1}</p>
      <p>Trạng thái: {enjoying ? "Đang tận hưởng" : "Bình thường"}</p>
    </>
  );
}

Lời kết

Qua bài viết chúng ta đã tìm hiểu được:

• Các công cụ khởi tạo dự án, trong đó có Vite giúp tạo và chạy dự án React nhanh như chớp.
• Hiểu cú pháp của JSX giúp viết giao diện trực quan bằng cách mix giữa HTML và JS.
• Các quy tắc vàng nên nhớ: Phải có 1 thẻ bọc, phải đóng toàn bộ thẻ, và dùng {} để viết logic JS.

Ở bài tiếp theo, chúng ta sẽ học cách phân tách giao diện lớn thành các component nhỏ dễ quản lý qua bài: Bài 2: Component & Props – Chia nhỏ giao diện để tái sử dụng. Cùng chờ xem nhé!