React คืออะไร?#

อธิบายว่า React คือไลบรารี JavaScript สำหรับการสร้าง UI (User Interface) ทำไม React ถึงได้รับความนิยม เช่น Virtual DOM, การสร้าง Single Page Applications (SPAs) ความแตกต่างระหว่าง React กับ Framework อื่นๆ (เช่น Angular, Vue.js)

การติดตั้งและการเริ่มต้นใช้งาน#

วิธีติดตั้ง React ด้วย create-react-app หรือ Vite (ตัวอย่างขั้นตอนแบบ step-by-step) โครงสร้างโปรเจกต์พื้นฐานของ React (เช่น ไฟล์ src, App.js, index.js) แนะนำการใช้งาน JSX (JavaScript XML) ที่เป็นหัวใจหลักของ React ในการสร้าง UI

Component ใน React#

อธิบายแนวคิดของ Components (การสร้าง UI เป็นส่วนย่อยๆ ที่ใช้ซ้ำได้) Functional Components และ Class Components (สามารถเน้นที่ Functional Components เพราะเป็นมาตรฐานใหม่) ตัวอย่างการสร้างและใช้งาน Component เบื้องต้น การส่งข้อมูลระหว่าง Components ผ่าน Props อ่านเกี่ยวกับ React Components

Props และ State#

Props: อธิบายว่าคืออะไร, ทำงานอย่างไร, และมีประโยชน์อย่างไร ตัวอย่างการส่งค่า Props ระหว่าง Components State: อธิบายว่า State ทำงานอย่างไรในการจัดการข้อมูลภายใน Component วิธีใช้ useState Hook เพื่อจัดการ State ใน Functional Componentsอ่านเกี่ยวกับ React State อ่านเกี่ยวกับ React Props

Event Handling#

วิธีการจัดการ Event ใน React (เช่น คลิกปุ่ม, กรอกข้อมูลในฟอร์ม) ตัวอย่างการใช้งาน Event Handler และการส่งค่าในฟังก์ชัน Event

Lifecycle Methods (สำหรับ Class Components)#

อธิบายว่า Lifecycle Methods ทำงานอย่างไร เช่น componentDidMount, componentDidUpdate, componentWillUnmount แม้ว่าปัจจุบันส่วนใหญ่ใช้ Functional Components กับ Hooks แต่ควรแนะนำสำหรับผู้ที่ต้องการเข้าใจการทำงานแบบเดิม

Hooks (สำหรับ Functional Components)#

อธิบายพื้นฐานของ Hooks และว่ามีไว้ทำอะไร แนะนำ Hooks ที่สำคัญ เช่น useState, useEffect useState สำหรับจัดการ State useEffect สำหรับจัดการ side effects (เช่น การดึงข้อมูลจาก API หรือทำงานเมื่อ Component ถูก render)

Conditional Rendering#

การแสดงผล UI ที่เปลี่ยนไปตามเงื่อนไข ตัวอย่างการใช้ if-else, ternary operator, และการใช้ && ใน JSX

Lists และ Keys#

การแสดงรายการข้อมูลแบบ dynamic ใน React (เช่น การ map array เพื่อแสดงรายชื่อ) อธิบายการใช้ Keys ในแต่ละรายการเพื่อเพิ่มประสิทธิภาพการทำงาน

Forms ใน React#

การจัดการฟอร์มใน React เช่น การกรอกข้อมูล, การรับค่าจากฟอร์ม, การส่งฟอร์ม วิธีการผูก State กับ input fields เพื่อจัดการค่าที่กรอกในฟอร์ม

การสื่อสารระหว่าง Components (Props Drilling)#

อธิบายการส่งข้อมูลจาก Parent Component ไปยัง Child Component ด้วย Props ปัญหาของ Props Drilling และการแก้ไขเบื้องต้น

การใช้ Context API#

วิธีแก้ปัญหาการส่งข้อมูลข้ามหลายๆ Components โดยใช้ React Context API เพื่อหลีกเลี่ยง Props Drilling ตัวอย่างการสร้าง Context และการใช้ useContext Hook

การทำ Routing ด้วย React Router#

แนะนำ React Router สำหรับการสร้าง multi-page application ใน React ตัวอย่างการตั้งค่าและการใช้ Routes, Link, และการจัดการกับ URL ต่างๆ อ่านเกี่ยวกับ React Route