Component React là gì? Hướng dẫn chi tiết cho người mới bắt đầu

Nếu bạn bắt đầu hành trình chinh phục React, có một khái niệm bạn sẽ gặp đi gặp lại, một ý tưởng nền tảng định hình nên toàn bộ kiến trúc của thư viện này. Đó chính là Component.

Hãy tưởng tượng bạn đang chơi với những khối LEGO. Thay vì xây dựng một lâu đài phức tạp từ một khối nhựa duy nhất, bạn lắp ráp nó từ hàng trăm viên gạch nhỏ hơn: tường, cửa sổ, tháp canh, cổng thành... Mỗi viên gạch này là một đơn vị độc lập, có chức năng riêng và có thể tái sử dụng.

Trong thế giới React, Component chính là những khối LEGO đó. Chúng là những khối xây dựng cơ bản, độc lập và có thể tái sử dụng để tạo nên giao diện người dùng (UI) cho ứng dụng của bạn. Từ một nút bấm đơn giản, một thanh tìm kiếm cho đến cả một trang web phức tạp, tất cả đều được cấu thành từ các Component.

Bài viết này sẽ giúp bạn hiểu rõ "Component React là gì", tại sao chúng lại quan trọng và làm thế nào để sử dụng chúng một cách hiệu quả nhất.

1. Định nghĩa "core": Component React là gì?

Về mặt kỹ thuật, một Component trong React là một function JavaScript hoặc một class nhận đầu vào là dữ liệu (gọi là props) và trả về một React element. Phần tử này mô tả những gì sẽ được hiển thị trên màn hình.

Nói một cách đơn giản hơn:

Component là một mẩu giao diện (UI) độc lập. Nó tự quản lý logic, trạng thái (state) và cấu trúc HTML của riêng mình. Bằng cách kết hợp nhiều Component lại với nhau, chúng ta tạo ra một ứng dụng hoàn chỉnh.

Ví dụ, một trang thông tin sản phẩm có thể được chia thành các Component:

• NavigationBar
• ProductImageGallery
• ProductDetails
• AddToCartButton
• CustomerReviews

2. Tại sao Component lại quan trọng đến vậy?

Sức mạnh của React không nằm ở việc hiển thị dữ liệu, mà nằm ở cách nó tổ chức và quản lý giao diện thông qua Component. Triết lý này mang lại những lợi ích khổng lồ:

• Tái sử dụng (Reusability): Bạn có thể viết một Component Button một lần và sử dụng nó ở 20 vị trí khác nhau trong ứng dụng của mình. Nếu cần thay đổi thiết kế của tất cả các nút, bạn chỉ cần sửa ở một nơi duy nhất. Điều này tuân thủ nguyên tắc DRY (Don't Repeat Yourself - Đừng lặp lại chính mình).
• Chia để trị (Divide and Conquer): Thay vì làm việc với một file HTML/JS khổng lồ, rối rắm, bạn chia nhỏ giao diện thành các Component đơn giản, dễ quản lý. Việc tìm lỗi (debug), bảo trì và nâng cấp trở nên dễ dàng hơn rất nhiều. Một lập trình viên có thể làm việc trên Component SearchBar trong khi một người khác tập trung vào UserProfile mà không ảnh hưởng lẫn nhau.
• Tư duy độc lập (Independent Thinking): Mỗi Component có thể có "bộ nhớ" riêng của nó (gọi là state). Ví dụ, Component SearchBar có thể tự quản lý văn bản người dùng đang gõ mà không cần làm phiền các phần khác của ứng dụng. Điều này giúp giảm thiểu sự phức tạp và các lỗi không mong muốn.

3. Hai loại Component chính trong React

Trong React, có hai cách chính để tạo ra một Component: Function Component và Class Component.

a. Class Component (Lối tiếp cận truyền thống)

Đây là cách tạo Component nguyên thủy trong React. Chúng là các class kế thừa từ React.Component và phải có một phương thức render() để trả về JSX (cú pháp trông giống HTML trong JavaScript).

Đặc điểm:

• Sử dụng class để định nghĩa.
• Quản lý state thông qua this.state.
• Truy cập props qua this.props.
• Sử dụng các phương thức vòng đời (lifecycle methods) như componentDidMount, componentDidUpdate.

Ví dụ về Class Component:

import React from 'react'

class WelcomeMessage extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      message: 'Chào mừng bạn đến với thế giới React!',
    }
  }

  render() {
    // Trả về JSX để hiển thị UI
    return <h1>{this.state.message}</h1>
  }
}

export default WelcomeMessage

b. Function Component (Lối tiếp cận hiện đại và được khuyên dùng)

Ban đầu, Function Component chỉ là những function đơn giản nhận props và trả về JSX (còn được gọi là "stateless functional components"). Tuy nhiên, với sự ra đời của React Hooks (từ phiên bản 16.8), chúng đã có thể quản lý state và các tính năng khác mà không cần dùng đến class.

Đặc điểm:

• Là một function JavaScript thông thường.
• Cú pháp ngắn gọn, dễ đọc và dễ viết hơn.
• Sử dụng Hook useState để quản lý state.
• Sử dụng Hook useEffect để xử lý các side effect (thay thế cho các phương thức vòng đời).
• Đây là cách tiếp cận được khuyến khích cho các dự án React mới.

Ví dụ về Function Component tương đương:

import React, { useState } from 'react'

function WelcomeMessage(props) {
  // Sử dụng Hook useState để tạo và quản lý state
  const [message, setMessage] = useState(
    'Chào mừng bạn đến với thế giới React!',
  )

  // Trả về JSX để hiển thị UI
  return <h1>{message}</h1>
}

export default WelcomeMessage

Nên dùng loại nào? > Hãy dùng Function Component với Hooks. Cộng đồng React đã và đang dịch chuyển mạnh mẽ sang hướng này vì sự đơn giản, hiệu quả và khả năng tái sử dụng logic tốt hơn. Bạn chỉ nên tìm hiểu Class Component để có thể đọc và bảo trì các dự án cũ.

4. "Giao tiếp" giữa các Component React: props và state

Nếu Component là những tòa nhà, thì props và state là hệ thống điện và nước, giúp chúng hoạt động và tương tác với nhau.

a. Props

Props (viết tắt của properties) là cách để truyền dữ liệu từ Component cha xuống Component con. Hãy nghĩ về chúng như những tham số của một function.

• Dữ liệu chảy theo một chiều: từ trên xuống dưới (one-way data flow).
• Props là bất biến (immutable): Component con chỉ có thể đọc props chứ không thể thay đổi chúng.

// Component cha: App.js
function App() {
  return (
    <div>
      {/* Truyền prop 'name' cho Component con 'UserProfile' */}
      <UserProfile name="Alice" age={28} />
      <UserProfile name="Bob" age={32} />
    </div>
  )
}

// Component con: UserProfile.js
function UserProfile(props) {
  // Nhận và sử dụng props từ cha
  return (
    <div className="user-profile">
      <h2>Tên: {props.name}</h2>
      <p>Tuổi: {props.age}</p>
    </div>
  )
}

b. State

State là dữ liệu do chính Component đó quản lý và có thể thay đổi theo thời gian (ví dụ: thao tác của người dùng). Khi state thay đổi, React sẽ tự động render lại Component đó để cập nhật giao diện.

• State là private và được kiểm soát hoàn toàn bởi Component đó.
• Nó là "bộ nhớ" của Component.

// Một Component đồng hồ đếm ngược
import React, { useState, useEffect } from 'react'

function CountdownTimer() {
  // Khởi tạo state 'seconds' với giá trị ban đầu là 60
  const [seconds, setSeconds] = useState(60)

  useEffect(() => {
    // Nếu 'seconds' lớn hơn 0, thiết lập một bộ đếm thời gian
    if (seconds > 0) {
      const timerId = setTimeout(() => {
        // Cập nhật state, làm cho Component re-render
        setSeconds(seconds - 1)
      }, 1000)
      // Dọn dẹp timer khi component bị hủy
      return () => clearTimeout(timerId)
    }
  }, [seconds]) // useEffect sẽ chạy lại mỗi khi 'seconds' thay đổi

  return (
    <div>
      <h1>Thời gian còn lại: {seconds} giây</h1>
    </div>
  )
}

Trong ví dụ này, mỗi giây state seconds được cập nhật, khiến cho thẻ <h1> hiển thị lại giá trị mới.

Tổng kết: Nắm vững Component là chìa khóa chinh phục React

Hiểu rõ về Component không chỉ là học một phần của React, mà là nắm bắt được triết lý cốt lõi của nó.

• Component là gì? Là những khối xây dựng UI độc lập, có thể tái sử dụng, được viết dưới dạng Class hoặc Function.
• Tại sao lại dùng? Vì chúng giúp ứng dụng dễ phát triển, dễ bảo trì và dễ mở rộng.
• Làm sao chúng tương tác? Thông qua props (truyền dữ liệu từ cha xuống con) và state (dữ liệu nội tại của Component).
• Nên bắt đầu từ đâu? Hãy tập trung vào Function Component và học cách sử dụng các Hooks cơ bản như useState và useEffect.

Khi bạn bắt đầu nhìn mọi giao diện web dưới dạng một cây các Component lồng vào nhau, đó là lúc bạn thực sự bắt đầu "tư duy theo kiểu React". Và từ đó, việc xây dựng những ứng dụng web hiện đại, mạnh mẽ và linh hoạt sẽ nằm trong tầm tay bạn.

Chúc bạn thành công trên hành trình chinh phục React!