Có nhiều phương pháp chia component nên số loại component sẽ khác nhau. Ở bài viết này mình chia React theo 2 loại component

– Container: Smart component

Quản lý, xử lý xử liệu (Có thể get api lấy data, hoặc data tĩnh, cung cấp dữ liệu và có dữ liệu để render) Không quan tâm render UI như thế nào Chỉ quan tâm render cái gì Có thể chứa container con và các components

– Component: Dumb component

Thằng cho cái gì render cái đó Không cần biết dữ liệu đến từ đâu Thường chỉ có props, không có state Tái sử dụng, với props khác nhau thì sẽ render khác nhau

Mình ví dụ 1 block cơ bản dưới đây nha

Container

HomePage: Thường tổng thể 1 trang là 1 container

Props: N/A State: featuredPostList Render:

Header Banner FeaturedPostList: state featuredPostList

Components

Header: render header

Banner: render banner

FeaturedPostList

Props: featuredPostList State: N/A Render: a list of post