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

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

jsx<Product />

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

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

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

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

export default App;

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

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