Component และ Props ใน React

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

At a glance

แนวคิด	ความหมาย	เทียบกับ
Component	function ที่ return หน้าตา (JSX)	แม่พิมพ์
JSX	เขียน HTML ในไฟล์ JavaScript ได้	HTML ที่ใส่ตัวแปรได้
Props	ข้อมูลที่ส่งจากข้างนอกเข้า component (อ่านอย่างเดียว)	argument ของ function
State	ข้อมูลที่ component จำเองและเปลี่ยนได้ เปลี่ยนแล้วหน้าจออัปเดตเอง	ตัวแปรที่มีชีวิต

Installation

React และ Next.js รันบน Node.js

ติดตั้ง Node.js
ติดตั้งเวอร์ชัน LTS ตาม Node.js › Installation แล้วเช็กด้วยคำสั่ง node -v
สร้างโปรเจกต์
ในคอร์สเราใช้ React ผ่าน Next.js ดูคำสั่งที่ Next.js › Installation

Component และ Props

Component คือ function ชื่อขึ้นต้นด้วยตัวใหญ่ รับ props เป็น object แล้ว return JSX

// components/ProjectCard.tsx
type Props = {
  title: string;
  description: string;
  href: string;
};

export function ProjectCard({ title, description, href }: Props) {
  return (
    <a href={href} className="card">
      <h3>{title}</h3>
      <p>{description}</p>
    </a>
  );
}

ใช้ component ซ้ำด้วยข้อมูลต่างกัน และวนสร้างจาก array ด้วย .map()

import { ProjectCard } from "@/components/ProjectCard";

const projects = [
  { title: "Portfolio", description: "เว็บแรกของฉัน", href: "/projects/portfolio" },
  { title: "Coffee Shop", description: "ร้านกาแฟออนไลน์", href: "/projects/coffee" },
];

export default function Home() {
  return (
    <main>
      <h1>My Projects</h1>
      {projects.map((p) => (
        <ProjectCard key={p.href} {...p} />
      ))}
    </main>
  );
}

State

useState เก็บค่าที่เปลี่ยนได้ เมื่อค่าเปลี่ยน React วาดหน้าใหม่ให้เอง

"use client"; // ใน Next.js: component ที่มีการคลิก/state ต้องรันบนเบราว์เซอร์
import { useState } from "react";

export function FollowButton() {
  const [following, setFollowing] = useState(false);
  return (
    <button onClick={() => setFollowing(!following)}>
      {following ? "Following" : "Follow"}
    </button>
  );
}

HTML กับ JSX ต่างกันตรงไหน

HTML	JSX ใน React	เพราะ
`class="…"`	`className="…"`	`class` เป็นคำสงวนใน JS
`onclick="…"`	`onClick={fn}`	ใช้ camelCase และส่ง function
`<img>`	`<img />`	ทุกแท็กต้องปิด
ข้อความตายตัว	`{variable}`	ใส่ค่า JS ในปีกกา
หลาย element ติดกัน	ห่อด้วย `<>…</>`	return ได้แค่ 1 ก้อน