khái niệm cơ bản trong React - Components, Props, State

1. Components

Components trong React là các khối xây dựng độc lập có thể tái sử dụng. Chúng chia thành các phần tử UI nhỏ hơn và có thể kết hợp lại thành các component lớn hơn. Ví dụ, một ứng dụng có thể có các component như Header, Sidebar và Content. Mỗi component có nhiệm vụ riêng và có thể nhận props và state để hiển thị dữ liệu tương ứng.

Ví dụ:

// Functional Component
function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

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

2. Props

Props trong React là các giá trị được truyền vào các component từ bên ngoài. Chúng giúp truyền dữ liệu từ component cha sang component con. Props là chỉ đọc và không thể thay đổi bên trong component. Để sử dụng props, chúng ta truyền giá trị cho thuộc tính của component và sử dụng nó trong phần giao diện.

Ví dụ:

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

ReactDOM.render(<Greeting name="John" />, document.getElementById('root'));

3. State

State trong React là các dữ liệu có thể thay đổi trong một component. Mỗi component có thể có state riêng để lưu trữ và quản lý dữ liệu động. Khi state thay đổi, React sẽ tự động cập nhật giao diện người dùng tương ứng. State chỉ được quản lý trong các class components và được khởi tạo trong constructor của component. Để thay đổi state, chúng ta sử dụng phương thức `setState()`.

Ví dụ:

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

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

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