React.js 05 – Component trong React

0
131

Component trong React

Component là các khổi xây dựng của ứng dụng React. Mỗi component là một phần của giao diện người dùng.

Nó có dữ liệu và mô tả các phần của giao diện người dùng đó sẽ trông như thế nào.

Khi xây dựng các ứng dụng React, chúng ta xây dụng một loạt các component nhỏ, độc lập và có thể tái sử dụng và kết hợp để tạo ra các UI phức tạp.

Vì vậy, mỗi ứng dụng React thực chất là một cây danh sách các component

Ví dụ thực tế về các Component React

Hãy hình dung bạn muốn xây dựng một ứng dụng web như Twitter. Khi truy cập trang web cảu Twitter và bạn sẽ thấy rất nhiều component như hình bên dưới.

Chúng ta có thể thực hiện từng phần này dưới dạng một component React.

Cây thành phần của chúng ta trong ví dụ này có thể trông như thế này.

  • App
    • NavBar
    • ProfileDashboard
    • Trends
    • WhoToFollow
    • Feed

Các component có thể chứa các component con. Ví dụ: component Feed bao gồm một số component Post  và mỗi component Post có component Like. Vì vậy, cây component của chúng ta có thể được mở rộng tương thành một cái gì đó như thế này.

  • App
    • NavBar
    • ProfileDashboard
    • Trends
    • WhoToFollow
    • Feed
      • Post
        • Like

Chúng ta có thể sử dụng component Like (hoặc bất kỳ component nào khác trong cây ) trên các trang khác nhau hoặc thậm chí trong các ứng dụng khác nhau.

Một component thường (nhưng không phải luôn luôn) được thể hiện như là một lớp Javascript có một thuộc tính state và phương thức  render() .

  • State bao gồm dữ liệu mà chúng ta muốn hiện thị.
  • render() mô tả giao diện người dùng sẽ trông như thế nào.

Tạo component React

Về mặt khái niệm thì các components giống như các hàm Javascript. Các hàm này chập nhận các tham số tùy ý (các tham số này được gọi là props) và trả về các phần tử (element) React mô tả những gì sẽ hiện thị trên màn hình.

Tạo component bằng function

Cách đơn giản nhất để tạo component là viết hàm Javascript.

Ví dụ:

File DemoComponent.js

Đối với function component luôn luôn phải có từ khóa return để mô tả giao diện sẽ hiện thị như thế nào.

Tạo component bằng class ES6

Ngoài cách tạo component bằng function bạn cũng có thể sử dụng class trong ES6 để tạo component.

File DemoComponent.js

Với cách tạo bằng class các bạn sẽ phải kế thừa( extends )lại class Component của react. Và hàm render() sẽ mô tả giao diện sẽ hiện thị như thế nào.

Hiện thị component

Để có thể hiện thị component trên trang, chúng ta cần import nó trong tệp index.js và gọi ReactDOM.render() .

File index.js

Chạy npm start bạn sẽ hiện thị được nội dụng của component

 

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây