Components

Trọng tâm của các ứng dụng react là components.

Components là các thành phần độc lập, hoạt động giống như một function trong JS. Các component giúp bạn chia UI thành các phần độc lập và có thể tái sử dụng được. Component trả về HTML thông qua render (JSX)

Một component nhận input là một props(viết tắt của properties) nếu có. Trong React có 2 loại component chính, Class component và Method component.

Class component(Stateful):

Là một class ES6, extends React.Component. Bắt buộc phải có hàm render return về HTML.

class Hello extends React.Component{  
   render(){  
   return <h1> Hello, {props.Name} </h1>;  
   }  
}  

Function component(Stateless):

Giống như một Function trong Javascript, chỉ bao gồm immutable properties.

function Hello(props) {  
   return <h1> Hello, {props.Name} </h1>;  
} 

So sánh Function Component và Class omponent

Function	Class component
Là 1 JS function đơn	Là 1 class extends class Component từ React library
Không sử dụng this keyword	Sử dụng this
Dữ liệu đơn	Dữ liệu phức
Sử dụng hooks để thay đổi giá trị của properties	Sử dụng State và setState để thay đổi giá trị của properties

Tham khảo thêm: https://www.c-sharpcorner.com/learn/reactjs-for-beginners/components-in-react https://reactjs.org/docs/components-and-props.html