React Components

Component thì giống như một function trả về các phần tử HTML.

React Component

Các Component là các đoạn code ngắn độc lập và có thể tái sử dụng. Chúng có chức năng giống như là các function của JavaScript, nhưng hoạt động độc lập và trả về HTML.

Các Component được chia thành hai loại, Class component và Function component, trong tutorial này chúng ta sẽ tập trung vào Function component.

Lưu ý: Trong code cũ của React, chúng ta có thể tìm thấy các Class component được sử dụng chủ yếu. Hiện tại, chúng tôi khuyên bạn nên sử dụng các Function component cùng với các Hook, được thêm vào trong React 16.8. Tuy nhiên trong tutorial này cũng có một phần tùy chọn về các Class component để chúng ta tham khảo.

Tạo ra Component đầu tiên

Khi tạo ra một React component, thì tên của component phải bắt đầu bằng một chữ in hoa.

Class Component

Một class component phải bao gồm câu lệnh extends React.Component. Câu lệnh này sẽ tạo ra một sự thừa kế từ React.Component, và cho component của chúng ta quyền truy cập vào các function của React.Component.

Component cũng yêu cầu phải có phương thức render(), phương thức này sẽ trả về HTML.

Ví dụ sau sẽ tạo ra một Class component có tên là Car:

Function Component

Sau đây là một ví dụ tương tự như ví dụ ở trên, nhưng được tạo ra bằng cách sử dụng một Function component để thay thế.

Một Function component cũng trả về HTML, và hoạt động giống như là một Class component, nhưng các Function component có thể được viết bằng cách sử dụng ít code hơn, dễ hiểu hơn nhiều, và sẽ được ưu tiên hơn trong tutorial này.

Ví dụ sau sẽ tạo ra một Function component có tên là Car:

Render một Component

Bây giờ thì ứng dụng React của chúng ta đã có một component có tên là Car, trả về một phần tử <h2>.

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

Ví dụ sau sẽ hiển thị component có tên là Car trong phần tử "root":

Props

Các Component có thể được truyền dưới dạng props, và props là viết tắt của properties.

Props thì giống như là các đối số của hàm, và chúng ta gửi chúng đến component như là các thuộc tính.

Chúng ta sẽ tìm hiểu thêm về props trong chương tiếp theo.

Ví dụ sau sẽ sử dụng một thuộc tính để truyền một màu sắc vào component có tên là Car, và sử dụng nó trong hàm render():

Component trong Component

Chúng ta có thể tham chiếu đến các component ở bên trong các component khác:

Ví dụ sau sẽ sử dụng component có tên là Car ở bên trong component có tên là Garage:

Component trong tập tin

React chủ yếu nói về việc tái sử dụng lại code, và chúng ta nên chia các component của mình ra thành các tập tin riêng biệt.

Để làm điều đó, chúng ta hãy tạo ra một tập tin mới với phần mở rộng của tập tin là .js và đặt code vào bên trong nó:

Lưu ý rằng tên tập tin phải bắt đầu bằng một ký tự viết hoa.

Ví dụ: Đây là tập tin mới, mà chúng ta đã đặt tên cho nó là "Car.js":

Để có thể sử dụng component có tên là Car, thì chúng ta phải import tập tin tương ứng vào trong ứng dụng của mình.

Bây giờ thì chúng ta sẽ import tập tin "Car.js" vào trong ứng dụng của mình, và chúng ta có thể sử dụng component có tên là Car như thể nó được tạo ra ở đây.