Giới thiệu phương pháp tiếp cận component trong React

Giả sử chúng ta có một trang web. Trên trang web này, chúng ta có thể phân biệt một số khối: header, nội dung, sidebar, footer và vân vân. Mỗi khối có thể được chia thành các khối nhỏ hơn. Ví dụ, trong header thường có thể phân biệt logo, menu, khối liên hệ và vân vân.

Trong React, mỗi khối như vậy được gọi là một component. Mỗi component có thể chứa trong nó những component nhỏ hơn, và những component đó đến lượt chúng lại chứa những component nhỏ hơn nữa và cứ thế.

Mỗi component trong React tương ứng với một ES6 module, nằm trong thư mục src. Tên file chứa module được viết bằng chữ hoa và phải tương ứng với hàm mà nó chứa trong mã của module đó.

Ví dụ, file có tên App.js phải chứa bên trong nó hàm App:

import React from 'react';

function App() {
	// mã component
}

export default App;

Một trong các component phải là component chính - component mà các component khác được thêm vào. Trong React, theo mặc định, component đó sẽ là component App. Các component khác sẽ được kết nối với component này. Cách thực hiện điều này - chúng ta sẽ phân tích tiếp trong giáo trình.