เริ่มต้น React: แนวคิดและการตั้งค่า

React เป็นไลบรารีส่วนติดต่อผู้ใช้สำหรับสร้างแอปจากคอมโพเนนต์ขนาดเล็กที่นำกลับมาใช้ซ้ำได้

• คิดเป็นคอมโพเนนต์
• อธิบายส่วนติดต่อผู้ใช้ตามสถานะในรูปแบบประกาศ
• React จัดการการอัปเดตอย่างมีประสิทธิภาพ

โค้ดแบบ ประกาศ จะอธิบายผลลัพธ์ ส่วน React จะคำนวณการเปลี่ยนแปลงของ DOM ให้คุณ โค้ดแบบคำสั่งจะจัดการการอัปเดตแต่ละรายการอย่างละเอียด

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

การตั้งค่า:

• สร้างแอป (เช่น npm create vite@latest)
• ติดตั้งส่วนพึ่งพา (npm install)
• เรียกใช้เซิร์ฟเวอร์พัฒนา (npm run dev)

พื้นฐานโฟลเดอร์:

• index.html มี div#root
• src/main.jsx เริ่มต้นการทำงานของ createRoot
• src/App.jsx กำหนดคอมโพเนนต์แรกของคุณ

การเรนเดอร์ครั้งแรก: เมานต์ root แล้วเรนเดอร์ App() จากนั้นคลิกเพื่อดูการอัปเดตที่ขับเคลื่อนด้วยสถานะ

ตรวจสอบอย่างรวดเร็ว: แนวคิดสำคัญเบื้องหลังส่วนติดต่อผู้ใช้แบบประกาศของ React คืออะไร

สรุป: คอมโพเนนต์ + การเรนเดอร์แบบประกาศ + การเปรียบเทียบความแตกต่าง ตั้งค่าเซิร์ฟเวอร์พัฒนาและเรนเดอร์ App() ด้วย createRoot