พื้นฐาน ReactJS

มาถึงจุดเปลี่ยนสำคัญของการเขียนเว็บสมัยใหม่แล้วครับ! ReactJS คือ Library ของ JavaScript ที่ถูกสร้างโดย Meta (Facebook) ซึ่งเปลี่ยนวิธีคิดจากการ "เขียนหน้าเว็บทีละหน้า" มาเป็นการ "สร้างชิ้นส่วน (Components) แล้วเอามาประกอบกัน"

ในยุค Agentic Coding React คือภาษาที่ AI โปรดปรานที่สุด เพราะมันเป็นระเบียบและแบ่งเป็นสัดส่วนชัดเจนครับ

1. แนวคิดหลัก: Component (ชิ้นส่วน)

ลองนึกภาพว่าหน้าเว็บคือ เลโก้ ครับ แทนที่คุณจะเขียน HTML ยาวๆ 1,000 บรรทัด คุณจะแบ่งมันออกเป็นชิ้นเล็กๆ เช่น:

• Navbar.js (แถบเมนู)

• SearchBar.js (ช่องค้นหา)

• ProductCard.js (บัตรสินค้า)

2. JSX: เมื่อ HTML มาเจอกับ JS

ใน React เราไม่ได้แยกไฟล์ HTML ออกจาก JS แต่เราเขียนมันรวมกันในรูปแบบที่เรียกว่า JSX ครับ มันทำให้เราสามารถใส่ Logic เข้าไปในโครงสร้างเว็บได้โดยตรง

function Welcome() {
  const name = "สมชาย";
  return (
    <div className="p-4 bg-blue-100">
      <h1>สวัสดีคุณ {name}!</h1> 
      <p>วันนี้วันที่ {new Date().toLocaleDateString()}</p>
    </div>
  );
}

สังเกตว่าเราใช้ { } เพื่อดึงค่าตัวแปรจาก JS มาแสดงใน HTML ได้เลย!

3. State: "ความจำ" ของ Component

นี่คือหัวใจของ React ครับ State คือข้อมูลที่สามารถ "เปลี่ยนแปลงได้" และเมื่อ State เปลี่ยน หน้าเว็บจะ Update (Re-render) ให้เองอัตโนมัติโดยไม่ต้อง Refresh หน้าจอ

เราใช้ Hook ที่ชื่อว่า useState ในการจัดการครับ:

import { useState } from 'react';

function Counter() {
  // สร้าง State ชื่อ count เริ่มต้นที่ 0
  const [count, setCount] = useState(0);

  return (
    <div className="text-center p-10">
      <p class="text-2xl">คุณคลิกไปแล้ว {count} ครั้ง</p>
      
      {/* เมื่อคลิก ให้สั่ง setCount เพื่อเปลี่ยนค่า count */}
      <button 
        onClick={() => setCount(count + 1)}
        className="bg-green-500 text-white p-2 rounded"
      >
        เพิ่มจำนวน
      </button>
    </div>
  );
}

4. Props: การส่งข้อมูลข้ามชิ้นส่วน

Props ย่อมาจาก Properties คือการ "ส่งข้อมูล" จากชิ้นส่วนแม่ (Parent) ไปยังชิ้นส่วนลูก (Child) เพื่อให้ชิ้นส่วนนั้นๆ ทำงานได้หลากหลายขึ้น

// ชิ้นส่วนลูก (Button)
function MyButton(props) {
  return (
    <button className={`bg-${props.color}-500 p-2 text-white`}>
      {props.text}
    </button>
  );
}

// ชิ้นส่วนแม่ (App)
function App() {
  return (
    <div>
      <MyButton text="ยืนยัน" color="blue" />
      <MyButton text="ยกเลิก" color="red" />
    </div>
  );
}

5. ทำไม React ถึงเหมาะกับยุค AI (Agentic Coding)?

1. Modularity: AI สามารถโฟกัสการแก้ Code แค่ "ชิ้นเดียว" (เช่น แก้แค่ไฟล์ Button.js) โดยไม่กระทบส่วนอื่น

2. Predictability: การไหลของข้อมูลใน React ค่อนข้างชัดเจน ทำให้ AI คาดเดาและหา Bug ได้ง่ายขึ้น

3. Rich Ecosystem: มี Library เสริมเยอะมาก (เช่น Lucide React สำหรับ Icon หรือ Framer Motion สำหรับ Animation) ซึ่ง AI รู้จักคำสั่งเหล่านี้ทั้งหมด

Roadmap สั้นๆ สำหรับก้าวต่อไป:

1. Hooks: เรียนรู้ useEffect (จัดการเรื่องการดึงข้อมูลจาก API)

2. Next.js: Framework ที่ยอดนิยมที่สุดในตอนนี้ (ช่วยเรื่องความเร็วและ SEO)

3. V0.dev: ลองเข้าเว็บนี้แล้วพิมพ์บอก AI ว่า "สร้างหน้า Dashboard สวยๆ ด้วย React และ Tailwind" แล้วคุณจะเห็นพลังที่แท้จริงครับ