แนวคิดเชิงคอมโพเนนต์ใน React

สมมติว่าเรามีเว็บไซต์หนึ่ง บนเว็บไซต์นี้เราสามารถ แยกบล็อกบางส่วนได้: ส่วนหัว, เนื้อหา, แถบข้าง, ส่วนท้าย และอื่นๆ แต่ละบล็อกสามารถ แบ่งออกเป็นบล็อกย่อยที่เล็กลงได้ ยกตัวอย่างเช่น ในส่วนหัว โดยปกติเราสามารถแยกโลโก้, เมนู, บล็อกข้อมูลติดต่อ และอื่นๆ ได้

ใน React แต่ละบล็อกแบบนี้เรียกว่า คอมโพเนนต์ แต่ละคอมโพเนนต์สามารถบรรจุคอมโพเนนต์ ที่เล็กลงไว้ภายในได้ และคอมโพเนนต์เหล่านั้นก็สามารถบรรจุ คอมโพเนนต์ที่เล็กลงไปอีกได้เช่นกัน

แต่ละคอมโพเนนต์ใน React จะสอดคล้องกับ ES6 โมดูล ที่อยู่ในโฟลเดอร์ src ชื่อไฟล์ของโมดูลจะขึ้นต้นด้วยตัวอักษรพิมพ์ใหญ่ และต้องสอดคล้องกับฟังก์ชันที่ อยู่ในโค้ดของโมดูลนั้น

ตัวอย่างเช่น ไฟล์ชื่อ App.js ควรมีฟังก์ชัน App อยู่ภายใน:

import React from 'react';

function App() {
	// โค้ดของคอมโพเนนต์
}

export default App;

คอมโพเนนต์หนึ่งจะต้องเป็นคอมโพเนนต์หลัก - ซึ่งเป็นคอมโพเนนต์ที่คอมโพเนนต์อื่นๆ จะถูกเพิ่มเข้าไป ใน React โดยค่าเริ่มต้นแล้วคอมโพเนนต์นี้จะคือ คอมโพเนนต์ App คอมโพเนนต์อื่นๆ จะถูกเชื่อมต่อกับคอมโพเนนต์นี้ วิธีการทำอย่างไร - เราจะมาศึกษากัน ต่อไปในบทเรียน