Giới thiệu về Components trong React

Hãy nhìn vào bất kỳ trang web nào. Nó được tạo thành từ một tập hợp các khối độc lập: header, sidebars, footer, nội dung. Có thể nói rằng các khối này chính là các component theo nghĩa mà React ngụ ý.

Nếu nhìn vào cùng một header đó, trong nó có thể phân biệt khối logo, khối thông tin liên hệ, khối menu và vân vân. Tức là các component có thể bao gồm các subcomponent khác.

Công việc diễn ra tương tự trong React - trang web được xây dựng từ một tập hợp các component, mà lần lượt chúng có thể chứa các component khác.

Trong React, mỗi component đại diện cho một module riêng biệt. Thông thường việc phát triển bắt đầu từ component chính App, component chứa các component còn lại bên trong nó.

Hãy cùng thực hành tạo các component mới.

Giả sử ví dụ chúng ta cần một component để hiển thị dữ liệu sản phẩm. Để làm điều này, chúng ta cần tạo file Product.js trong thư mục làm việc và thêm vào đó đoạn code sau:

import React from 'react';

function Product() {
	return <p>
		sản phẩm
	</p>;
}

export default Product;

Như bạn thấy, hiện tại component của chúng ta trả về một đoạn văn bản. Trong các bài học tiếp theo, chúng ta sẽ phát triển code này để nó trả về dữ liệu sản phẩm. Nhưng bây giờ, để bắt đầu, chúng ta chỉ cần giữ nguyên đoạn văn bản với một số văn bản ban đầu.

Bây giờ hãy hiển thị component mà chúng ta đã tạo trong component App. Giả sử hiện tại App của chúng ta có code sau:

import React from 'react';

function App() {
	return <div>
		văn bản
	</div>;
}

export default App;

Để bắt đầu, chúng ta cần import component sản phẩm mà chúng ta đã tạo:

import React from 'react';
import Product from './Product'; // import sản phẩm

function App() {
	return <div>
		văn bản
	</div>;
}

export default App;

Sau khi import như vậy, bên trong component App có thể sử dụng component Product.