Sử dụng Component trong React

Mỗi component được kết nối tương ứng với một thẻ JSX của riêng nó. Ví dụ: chúng ta có component Product, điều đó có nghĩa là nó tương ứng với thẻ sau:

<Product />

Tên thẻ của component nhất thiết phải được viết bằng chữ in hoa, để React có thể phân biệt việc gọi component với việc sử dụng thẻ HTML.

Vậy, bây giờ chúng ta hãy sử dụng component Product bên trong component App bằng cách viết thẻ tương ứng của nó:

import React from 'react';
import Product from './Product';

function App() {
	return <div>
		<Product />
	</div>;
}

export default App;

Kết quả là sau khi render, chúng ta sẽ nhận được:

<div>
	<p>
		product
	</p>
</div>

Hãy tạo component User, component này sẽ hiển thị dữ liệu người dùng. Hiện tại, hãy để component này chỉ hiển thị một đoạn văn bản bất kỳ. Sử dụng component này trong component App.