Cơ bản về component trong React

Cơ bản về component trong React :là bài đề cập đến những điều cơ bản như các loại component. Thuộc tính props và đối tượng state của component.

Component trong React là các khối code để xây dựng giao diện.  Sử dụng component giúp chia giao diện thành các phần nhỏ, có thể tái sử dụng. Mỗi component chứa HTML, CSS, và logic JavaScript cần thiết để hiển thị một phần cụ thể của ứng dụng. Ví dụ component Login, Register, Cart,  DetailProduct… Có hai loại component trong React là function component và class component. Trong đó function component được dùng nhiều hơn

Functional component trong React

Đây là dạng component dùng phổ biến trong React. Để tạo 1 function component, bạn định nghĩa 1 hàm, đặc biệt trong hàm này phải trả về 1 khối JSX. Nói đơn giản, 1 hàm mà trả về khối JSX thì nó được gọi là function component.

function Welcome() {
  return <h1>Chào bạn Chúc an lành! </h1>;
}

Cũng có thể dùng arrow function để tạo 1 component cho gọn:

const Welcome = () => <h1>Chào bạn ! Chúc an lành!</h1>;

Class component trong React

Đây là component được tạo ra ở dạng class. Trước đây, class component được sử dụng nhiều, nhưng hiện nay ít dùng hơn functional component. Class component là 1 class kế thừa từ class gốc Component , và phải có hàm render trả về khối JSX

import React, { Component } from "react";
class Welcome extends Component {
  render() {
    return <h1>Xin chào, React!</h1>;
  }
}

Tiếp theo bạn cần biết về props và state của componnt. Đây là hai thứ cơ bản về component trong React bạn cần phải biết. Vì bạn sẽ dùng chúng thường xuyên.

Props – Truyền dữ liệu cho component

Props là viết tắt của properties – là cách thức để truyền dữ liệu từ component cha vào component con. Đối tượng props chứa các giá trị được truyền từ component cha xuống, và giá trị của props không thể thay đổi trong component con. Ví dụ component có props

const Welcome = (props) => {
  return <h1>Xin chào, {props.name}!</h1>;
};

// Sử dụng component con trong cha
<Welcome name="Học viên" />

State – trạng thái trong component

Trong component, State là các biến đặc biệt. State chứa các dữ liệu của riêng component và chỉ dùng trong tầm vực của component nơi state được khai báo mà thôi. Component không chia sẻ state với component khác.  CHo nên giá trị của biến state được gọi là trạng thái của component.

Để khai báo biến state trong 1 function component, mời xem ví dụ sau:

import { useState } from "react";
const Counter = () => {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Giá trị: {count}</p>
  





  


      <button onClick={() => setCount(count + 1)}>Tăng</button>
    </div>
  );
};

count là tên biến state, setCount là hàm sẽ được gọi khi muốn thay đổi giá trị của count. 0 là giá trị khởi đầu gán cho biến count.

Cơ bản về component trong React vậy thôi nhé Em. Trong 2 loại component vừa đề cập, function component rất thường hay dùng. Còn props và state thì dùng rất nhiều. Bạn cần biết các thứ càng sớm càng tốt. Bài này chỉ cơ bản thôi, chưa nói nhiều về component đâu. Cần biết thêm mời bạn xem link này : https://react.dev/reference/react/Component