9. Cách dùng React Class

React Class Components (hoặc React Class) là một phần quan trọng trong việc xây dựng các ứng dụng React. Chúng cho phép bạn quản lý trạng thái (state) của các thành phần và tạo các phương thức để thực hiện các hành động và xử lý sự kiện.

Dưới đây là cách tạo và sử dụng một React Class Component:

jsx

import React, { Component } from 'react';

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <h1>Counter: {this.state.count}</h1>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

export default Counter;

Trong ví dụ này:

1. Chúng ta import Component từ react để kế thừa từ lớp cơ sở React.Component.
2. Chúng ta định nghĩa một lớp Counter mở rộng từ Component.
3. Trong phương thức constructor, chúng ta gọi super(props) và định nghĩa trạng thái ban đầu của thành phần, trong trường hợp này là biến count.
4. Chúng ta định nghĩa phương thức increment sử dụng phương thức setState để tăng giá trị của count.
5. Trong phương thức render, chúng ta sử dụng trạng thái count để hiển thị giá trị và một nút để gọi phương thức increment.

Để sử dụng Counter trong ứng dụng chính:

jsx

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

function App() {
  return (
    <div>
      <Counter />
    </div>
  );
}

export default App;

Trong ứng dụng này, bạn đã tạo một lớp Counter dựa trên React Class Component, quản lý trạng thái và tương tác với người dùng. Khi bạn nhấn vào nút “Increment”, trạng thái count sẽ thay đổi và giao diện sẽ tự động cập nhật để hiển thị giá trị mới.