Chuyển tới nội dung chính

Bài 1: Khái niệm Cơ bản về React & JSX

React là một thư viện JavaScript mã nguồn mở được phát triển bởi Meta, được thiết kế để xây dựng giao diện người dùng (UI) dựa trên các thành phần độc lập (Components).

1. Component trong React​

Trong React, giao diện ứng dụng được chia thành nhiều Component nhỏ, dễ tái sử dụng và quản lý. Có hai loại component chính:

  • Functional Component (Khuyên dùng): Sử dụng các hàm JavaScript thuần túy kết hợp với Hooks.
  • Class Component: Cú pháp cũ dựa trên ES6 Class.

Ví dụ về Functional Component:​

import React from 'react';

function HeaderTitle({ title }) {
  return (
    <header className="header-swantech">
      <h1>{title}</h1>
      <p>Giải pháp công nghệ Swantech</p>
    </header>
  );
}

export default HeaderTitle;

2. JSX là gì?​

JSX (JavaScript XML) là một cú pháp mở rộng cho phép viết HTML trực tiếp bên trong đoạn mã JavaScript.

Các quy tắc quan trọng trong JSX:​

  1. Một thẻ cha duy nhất: Mỗi component chỉ được trả về một phần tử cha (hoặc dùng <React.Fragment> / <>...</>).
  2. Thuộc tính theo cú pháp camelCase: Ví dụ class chuyển thành className, onclick chuyển thành onClick.
  3. Chèn biểu thức JavaScript: Sử dụng cặp dấu ngoặc nhọn { expression }.
const user = { name: 'Nguyễn Văn A', role: 'Lập trình viên Swantech' };

const UserProfile = () => (
  <div className="card">
    <h3>Xin chào, {user.name}!</h3>
    <p>Vai trò: {user.role}</p>
  </div>
);

3. Props và State​

  • Props (Properties): Dữ liệu được truyền từ Component cha xuống Component con. Props mang tính chất read-only (không thể thay đổi từ phía component con).
  • State: Trạng thái nội bộ của Component, cho phép lưu trữ và cập nhật dữ liệu khi người dùng tương tác.
import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Số lần bấm: {count}</p>
      <button onClick={() => setCount(count + 1)}>Tăng số đếm</button>
    </div>
  );
}