Giới thiệu Về React Component

Trong kiến trúc phát triển ứng dụng web sử dụng React, Component được xem như đơn vị cơ bản nhất. Chúng cho phép tách nhỏ giao diện thành các khối độc lập, dễ bảo trì và tái sử dụng. Về mặt ngữ pháp, có hai dạng Component chủ yếu đang được sử dụng rộng rãi trong cộng đồng là Function Component và Class Component.

Function Component (Hàm)

Dạng này hiện đang trở thành tiêu chuẩn vàng nhờ cú pháp gọn nhẹ. Một Function Component thực chất chỉ là một hàm JavaScript nhận vào tham số đối tượng props và trả về cấu trúc JSX (React Element).

// File: UserProfile.jsx
import React from 'react';

// Tham gia sử dụng ES6 Destructuring để trích xuất dữ liệu
function UserProfile({ fullName, role }) {
  return (
    <div className="card">
      <h2>Tên nhân viên: {fullName}</h2>
      <p>Vị trí: {role}</p>
    </div>
  );
}

export default UserProfile;

Sau khi định nghĩa, Component này có thể được nhúng vào điểm khởi tạo ứng dụng (Entry Point). Ví dụ tại file main.jsx:

import React from 'react';
import ReactDOM from 'react-dom/client';
import UserProfile from './UserProfile';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
  <UserProfile 
    fullName="Nguyễn Văn A" 
    role="Developer" 
  />
);

Class Component (Lớp)

Mặc dù ít phổ biến hơn trong các dự án mới bắt đầu, Class Component vẫn hữu ích khi cần quản lý trạng thái nội bộ phức tạp hoặc các Lifecycle Methods cũ. Cú pháp dựa trên ES6 Class.

// File: LegacyForm.jsx
import React, { Component } from 'react';

class LegacyForm extends Component {
  render() {
    const { username } = this.props;
    return (
      <form>
        <label htmlFor="input-email">Email:</label>
        <input id="input-email" type="text" defaultValue={username} />
      </form>
    );
  }
}

export default LegacyForm;

Xử Lý Thuộc Tính (Props)

Việc truyền dữ liệu từ cha sang con thông qua Props là cơ chế cốt lõi của React. Khi ánh xạ JSX, cần lưu ý một số quy tắc đặc biệt về tên thuộc tính:

• Từ khóa class trong CSS bị giới hạn bởi JavaScript, vì vậy trong JSX phải dùng className.
• Thuộc tính liên kết thẻ label phải viết là htmlFor thay vì for.

Các giá trị động luôn được đưa vào trong cặp dấu ngoặc nhọn {}, ví dụ: {user.name}.

Phối Hợp Component (Composition)

Khả năng kết hợp các Component lại với nhau giúp tạo nên cấu trúc giao diện hoàn chỉnh. Nguyên tắc chung là một Component chỉ được chứa tối đa một thẻ gốc (Single Root Element).

// File: DashboardLayout.jsx
import Header from './Header';
import MainContent from './MainContent';
import Sidebar from './Sidebar';

function DashboardLayout({ dashboardTitle }) {
  return (
    <div className="layout-wrapper">
      <Header title={dashboardTitle} />
      <div className="content-area">
        <Sidebar />
        <MainContent welcomeMessage="Chào mừng trở lại!" />
      </div>
    </div>
  );
}

Trong ví dụ trên, DashboardLayout không tự vẽ nội dung riêng mà đóng vai trò tập hợp và tổ chức lại các thành phần con Header, Sidebar và MainContent. Đây là cách tiếp cận linh hoạt giúp dễ dàng mở rộng giao diện mà không cần sửa đổi mã nguồn quá nhiều.