การใช้งานคอมโพเนนต์ใน React

คอมโพเนนต์ที่เชื่อมต่อกันแต่ละตัวจะมีแท็ก JSX เป็นของตัวเอง ตัวอย่างเช่น เรามีคอมโพเนนต์ Product ซึ่งหมายความว่ามันจะตรงกับ แท็กต่อไปนี้:

<Product />

ชื่อแท็กของคอมโพเนนต์ต้องเขียนขึ้นต้นด้วยตัวพิมพ์ใหญ่เสมอ เพื่อให้ React สามารถแยกความแตกต่างระหว่าง การเรียกใช้คอมโพเนนต์กับการใช้แท็ก HTML

เอาล่ะ มาลองใช้คอมโพเนนต์ Product ภายในคอมโพเนนต์ App โดยเขียนแท็กที่ตรงกับมัน:

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

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

export default App;

ผลลัพธ์ที่ได้หลังจากเรนเดอร์จะเป็นดังนี้:

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

สร้างคอมโพเนนต์ User ซึ่งจะทำหน้าที่ แสดงข้อมูลของผู้ใช้ ขั้นตอนแรกให้คอมโพเนนต์นี้แค่แสดงข้อความอะไรบางส่วน จากนั้นให้ใช้คอมโพเนนต์นี้ภายในคอมโพเนนต์ App