Các thành phần React

Các thành phần giống như các hàm trả về các phần tử HTML.

Các thành phần React

Các thành phần là các bit mã độc lập và có thể tái sử dụng. Chúng phục vụ cùng mục đích như các hàm JavaScript, nhưng hoạt động riêng lẻ và trả về HTML.

Thành phần có hai loại, Thành phần lớp và Thành phần chức năng, trong hướng dẫn này chúng ta sẽ tập trung vào Thành phần chức năng.

Tạo thành phần đầu tiên của bạn

Khi tạo một thành phần React, tên của thành phần PHẢI bắt đầu bằng chữ hoa.

Thành phần lớp

Một thành phần lớp phải bao gồm extends React.Componentcâu lệnh. Câu lệnh này tạo sự kế thừa cho React.Component và cấp cho thành phần của bạn quyền truy cập vào các chức năng của React.Component.

Thành phần cũng yêu cầu một render()phương thức, phương thức này trả về HTML.

class Car extends React.Component {
  render() {
    return <h2>Hi, I am a Car!</h2>;
  }
}

Thành phần chức năng

Đây là ví dụ tương tự như trên, nhưng được tạo bằng cách sử dụng một thành phần Hàm thay thế.

Một thành phần Hàm cũng trả về HTML và hoạt động giống như một thành phần Lớp, nhưng các thành phần Hàm có thể được viết bằng cách sử dụng ít mã hơn, dễ hiểu hơn và sẽ được ưu tiên trong hướng dẫn này.

function Car() {
  return <h2>Hi, I am a Car!</h2>;
}

Hiển thị một thành phần

Bây giờ ứng dụng React của bạn có một thành phần gọi là Car, nó trả về một <h2>phần tử.

Để sử dụng thành phần này trong ứng dụng của bạn, hãy sử dụng cú pháp tương tự như HTML thông thường: <Car />

ReactDOM.render(<Car />, document.getElementById('root'));

Đạo cụ

Các thành phần có thể được chuyển là props, viết tắt của các thuộc tính.

Đạo cụ giống như các đối số của hàm và bạn gửi chúng vào thành phần dưới dạng thuộc tính.

Bạn sẽ tìm hiểu thêm về propstrong chương tiếp theo.

function Car(props) {
  return <h2>I am a {props.color} Car!</h2>;
}

ReactDOM.render(<Car color="red"/>, document.getElementById('root'));

Các thành phần trong các thành phần

Chúng ta có thể tham khảo các thành phần bên trong các thành phần khác:

function Car() {
  return <h2>I am a Car!</h2>;
}

function Garage() {
  return (
    <>
      <h1>Who lives in my Garage?</h1>
      <Car />
    </>
  );
}

ReactDOM.render(<Garage />, document.getElementById('root'));

Các thành phần trong tệp

React là tất cả về việc sử dụng lại mã và bạn nên chia các thành phần của mình thành các tệp riêng biệt.

Để làm điều đó, hãy tạo một tệp mới có .js phần mở rộng tệp và đặt mã bên trong nó:

function Car() {
  return <h2>Hi, I am a Car!</h2>;
}

export default Car;

Để có thể sử dụng thành phần Xe, bạn phải nhập tệp trong ứng dụng của mình.

import React from 'react';
import ReactDOM from 'react-dom';
import Car from './Car.js';

ReactDOM.render(<Car />, document.getElementById('root'));

function (props) {
  return <h2>Hi, I'm {props.name}</h2>;
}