8. Các thành phần của React JS

Trong React JS, các thành phần (components) là một phần quan trọng để tạo giao diện người dùng. Các thành phần cho phép bạn tái sử dụng mã, chia nhỏ ứng dụng thành các phần nhỏ hơn và quản lý trạng thái của giao diện. Có hai loại chính của thành phần trong React:

1. Thành phần hàm (Function Components): Đây là các hàm JavaScript thông thường, chấp nhận một số tham số đầu vào (gọi là props) và trả về JSX để mô tả giao diện.

Ví dụ:

jsx

import React from 'react';

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

export default Welcome;

2. Thành phần lớp (Class Components): Đây là các lớp JavaScript mở rộng từ lớp React.Component. Chúng định nghĩa các phương thức như render() để trả về JSX và quản lý trạng thái của ứng dụng.

Ví dụ:

jsx

import React, { Component } from 'react';

class Welcome extends Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

export default Welcome;

Các thành phần có thể nhận các thuộc tính (props) từ bên ngoài, giúp bạn truyền dữ liệu từ thành phần cha xuống thành phần con. Các thành phần cũng có thể có trạng thái (state), cho phép bạn lưu trữ và quản lý các thông tin mà có thể thay đổi trong quá trình hoạt động của ứng dụng.

Để sử dụng các thành phần trong ứng dụng React, bạn có thể nhập và kết xuất chúng trong các thành phần khác hoặc trong giao diện tổng thể của ứng dụng.

Ví dụ về cách sử dụng thành phần trong một ứng dụng:

jsx

import React from 'react';
import Welcome from './Welcome';

function App() {
  return (
    <div>
      <Welcome name="Alice" />
      <Welcome name="Bob" />
    </div>
  );
}

export default App;

Trong ví dụ này, chúng ta sử dụng thành phần Welcome trong thành phần App và truyền các giá trị khác nhau cho thuộc tính name.