React Adventure

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

ก่อนอื่นข้าขอแนะนำคู่หู ที่จะร่วมเดินทางไปกับเจ้า

• Shiro: จอมปราชญ์! คอยบอกเคล็ดลับที่จะทำให้การทำภารกิจของเจ้าง่ายขึ้น
• Kuro: จอมดุ! คอยเตือนเวลาข้อห้าม หรือสิ่งอันตรายต่างๆ

ทำความรู้จักกับ React

จุดกำเนิดและ Pain Point

ย้อนกลับไปช่วงปี 2011 Facebook ประสบปัญหาอย่างหนักในการจัดการ UI ที่มีความซับซ้อนสูง (เช่น ระบบ Chat และ Notifications ที่ต้องอัปเดตตลอดเวลา) ในสมัยนั้น การเขียนเว็บด้วย JavaScript ปกติ (Vanilla JS) มีปัญหาหลักคือ:

• การจัดการ DOM ที่ยุ่งเหยิง: เมื่อข้อมูลเปลี่ยน เราต้องสั่งอัปเดตหน้าจอทีละจุดเอง (Imperative) เช่น “ไปหา ID นี้ แล้วเปลี่ยนข้อความเป็นแบบนี้” พอเว็บใหญ่ขึ้น โค้ดจะพันกันจนไล่เช็คยากมาก
• State Management: การติดตามว่าตอนนี้หน้าจอแสดงผลอะไรอยู่ และข้อมูลล่าสุดคืออะไร ทำได้ยากและเกิดบั๊กได้ง่าย

การมาถึงของ React

Facebook จึงสร้าง React ขึ้นมาในปี 2013 เพื่อเปลี่ยนวิธีคิดในการเขียน UI ใหม่ทั้งหมด:

1. Component-Based: แทนที่จะเขียน HTML หน้าเดียวยาวๆ เราจะแบ่ง UI ออกเป็นส่วนย่อยๆ ที่ทำงานอิสระต่อกัน (เช่น ปุ่ม, การ์ดสินค้า, แถบเมนู) ทำให้เราสามารถนำกลับมาใช้ซ้ำได้ง่าย
2. Declarative UI: เราแค่เขียนอธิบายว่า “หน้าตา UI ที่เราต้องการในสถานะต่างๆ เป็นอย่างไร” แล้ว React จะรับหน้าที่ไปคำนวณและอัปเดตหน้าจอให้เราเองโดยอัตโนมัติ
3. Virtual DOM: React มีระบบ “โดมเสมือน” ที่ช่วยคำนวณว่าต้องอัปเดตหน้าจอเฉพาะจุดไหนที่จำเป็นจริงๆ ทำให้ประสิทธิภาพการทำงานรวดเร็วและลื่นไหล

เข้าใจที่มาแล้วก็เตรียมตัวซะ ลืมวิธีเขียนเว็บแบบเดิมๆ ที่ยุ่งเหยิงไปได้เลย!

หัวใจสำคัญคือการมองทุกอย่างเป็นส่วนย่อยนะ ถ้าพร้อมแล้วเริ่มบทที่ 1 กันเถอะ ถ้าพร้อมแล้วก็ลุยกันเลย!