Components

#HelloFrontend #HelloErmine #HelloWorld2021

Component คืออะไร ?

Component ทำให้เราสามารถแบ่งส่วน user interface ออกมาเป็นส่วนเล็ก ๆ ที่สามารถจัดการตัวมันเองได้ โดย component ใน React จะมีสองแบบ คือ

1. Class component

2. Function component

เนื้อหาของเราจะใช้แค่ function component เพราะใช้งานและจัดการได้ง่ายกว่า

Function components

คือ component ที่เขียนด้วย function โดยจะต้อง return ค่าออกมาเป็น React element ที่จะให้ React นำไปแสดงผล

function Hello() {
    return <h1>Hello Poopoo</h1>;
}
 
const element = <Hello />; // <h1>Hello Poopoo</h1>

JSX ทุกอันต้องมีการปิด tag โดยจะเป็นแบบ <Hello>......</Hello> หรือ <Hello /> ก็ได้

แหล่งอ้างอิง

Components and Props – React