React เบื้องต้น

React คืออะไร?

React เป็นไลบรารี JavaScript (จาก Meta) สำหรับสร้าง ส่วนติดต่อผู้ใช้ (UI) เป็นวิธีทันสมัยในการทำ Frontend ที่ใช้กันแพร่หลายที่สุด

เปรียบเทียบกับที่เรียนมา:

• HTML/CSS/JS → เขียนแยกหลายไฟล์ จัดการ DOM เอง
• React → แบ่ง UI เป็น component จัดการให้อัตโนมัติ

แนวคิดหลัก: Component

Component = ชิ้นส่วน UI ที่นำกลับมาใช้ซ้ำได้ เหมือน "บล็อกต่อเลโก้" — แต่ละบล็อกประกอบเป็นหน้าเว็บ

หน้าเว็บ
├── Navbar (component)
├── ProductCard (component) × หลายตัว
└── Footer (component)

JSX — เขียน HTML ใน JavaScript

React ใช้ JSX ซึ่งเป็นการเขียน HTML ปนอยู่ใน JS:

function Welcome() {
  return <h1>สวัสดี React!</h1>;
}

มันดูแปลกตอนแรก แต่ทำให้เราเขียน UI กับ logic อยู่ด้วยกันได้

Component แรกของคุณ

function ProductCard() {
  return (
    <div className="card">
      <h2>กาแฟลาเต้</h2>
      <p>80 บาท</p>
      <button>ซื้อ</button>
    </div>
  );
}

⚠️ ใช้ className ไม่ใช่ class (เพราะ class เป็นคำสงวนใน JS)

แล้วนำไปใช้:

function App() {
  return (
    <div>
      <ProductCard />
      <ProductCard />
    </div>
  );
}

รับข้อมูล: Props

ส่งข้อมูลเข้า component เหมือน argument ของฟังก์ชัน:

function ProductCard(props) {
  return (
    <div>
      <h2>{props.name}</h2>
      <p>{props.price} บาท</p>
    </div>
  );
}

// ใช้งาน
<ProductCard name="กาแฟ" price={80} />
<ProductCard name="ชา" price={60} />

หรือ destructuring สั้นกว่า:

function ProductCard({ name, price }) {
  return <p>{name}: {price} บาท</p>;
}

State — ข้อมูลที่เปลี่ยนแล้ว UI อัปเดต

useState เป็น hook ที่เก็บข้อมูลที่ เปลี่ยนได้: เมื่อค่าเปลี่ยน React จะ วาดหน้าใหม่ ให้อัตโนมัติ

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>นับ: {count}</p>
      <button onClick={() => setCount(count + 1)}>เพิ่ม</button>
      <button onClick={() => setCount(count - 1)}>ลด</button>
    </div>
  );
}

• useState(0) → ค่าเริ่มต้น 0 ส่งคืน [ค่าปัจจุบัน, ฟังก์ชันเปลี่ยนค่า]
• setCount(...) → เปลี่ยนค่า → React อัปเดต UI ให้เลย

เริ่มโปรเจกต์ React: Vite

วิธีเริ่มเร็วที่สุดในปัจจุบันคือใช้ Vite:

npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
npm run dev

เปิด http://localhost:5173 — เห็นแอป React! แก้ไฟล์ใน src/ แล้วเซฟ เห็นผลทันที

เรียก API ใน React: useEffect

ดึงข้อมูลจาก Backend ที่สร้างไว้:

import { useState, useEffect } from "react";

function ProductList() {
  const [products, setProducts] = useState([]);

  useEffect(() => {
    fetch("http://localhost:3000/products")
      .then(res => res.json())
      .then(data => setProducts(data));
  }, []);   // [] = ทำครั้งเดียวตอนโหลด

  return (
    <ul>
      {products.map(p => (
        <li key={p.id}>{p.name} — {p.price} บาท</li>
      ))}
    </ul>
  );
}

ทำไมต้อง React?

• reuse: component ใช้ซ้ำได้
• auto-update: เปลี่ยน state → UI อัปเดตเอง (ไม่ต้องจับ DOM เอง)
• ecosystem: มีไลบรารีเสริมเยอะมาก
• ตลาดงาน: บริษัทส่วนใหญ่ใช้ React

💡 เมื่อเก่ง React แล้ว ขยายไป React Native (ทำแอปมือถือ) ได้ด้วย

สรุป

บทหน้า: รวมทุกอย่างเป็น โปรเจกต์ Fullstack ของคุณ 🏆