เขียน component แรก และส่งค่าเข้าไปด้วย props

# npx next build
▲ Next.js 16.3.4 (Turbopack)
✓ Compiled successfully
  Running TypeScript ...
  Finished TypeScript ...
✓ Generating static pages ...

# เวอร์ชันจริงบนเครื่องที่ใช้ตรวจ
next        16.3.4
react       19.2.8
typescript  5.9.3
node        v24.14.0

1 · Button ตัวแรก — component คือฟังก์ชันที่คืนหน้าตา

คุณเขียน Go มาแล้ว เพราะฉะนั้นประโยคนี้จะเข้าใจง่าย: component คือฟังก์ชันธรรมดา ๆ ตัวหนึ่ง
ไม่ได้พิเศษกว่าฟังก์ชันที่คุณเขียนใน Go ตรงไหนเลย มันแค่มีข้อตกลงสองข้อ:

1. รับ argument ได้ตัวเดียว — เป็น object ก้อนเดียวที่ทุกคนเรียกมันว่า props
2. คืนหน้าตาออกมา — ไม่ใช่ string ไม่ใช่ int แต่เป็นก้อน JSX ที่หน้าตาเหมือน HTML

จบแล้ว นั่นคือทั้งหมดของคำว่า component · ทีนี้มาดูของจริง — นี่คือ สไลด์หน้า 22 ทุกตัวอักษร วางไว้ที่ components/Bases/Button.tsx:

// components/Bases/Button.tsx
export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>;

const Button = (props: ButtonProps) => {
  const { children, ...restProps } = props;
  return <button {...restProps}>{children}</button>;
};

export default Button;

อ่านทีละบรรทัดแบบภาษาคน:

มีเรื่องหนึ่งที่สไลด์ไม่ได้พูดแต่คนอ่านจะสะดุด: ไฟล์นี้ไม่มี import React เลย แล้วทำไมเขียน React.ButtonHTMLAttributes ได้?
คำตอบคือ @types/react ประกาศชื่อ React ไว้เป็น namespace ระดับ global ให้แล้ว — มันเป็นแค่ "ชื่อของกล่อง type" ไม่ใช่ตัวแปรที่ต้องมีอยู่ตอนรัน จึงไม่ต้อง import
ผมลบ import React ออกแล้ว build จริง ผ่านสนิท:

$ npx tsc --noEmit
# (ไม่มี output — แปลว่าไม่มี error) exit code = 0

2 · children — ของที่ยัดไว้ระหว่างแท็กเปิดกับแท็กปิด

คำถามที่คนอ่านสไลด์หน้า 22 ถามกันมากที่สุดคือ “children โผล่มาจากไหน ไม่เห็นมีใครประกาศ”

คำตอบสั้น ๆ: คุณเป็นคนใส่มันเองตอนใช้งาน
เวลาเขียน <Button>กดฉันสิ</Button> ข้อความ กดฉันสิ ที่อยู่ระหว่างแท็กเปิดกับแท็กปิด ถูกยัดเข้าไปใน props ให้อัตโนมัติ ในช่องชื่อ children

พูดอีกแบบ — สองบรรทัดนี้แปลว่าเรื่องเดียวกันเป๊ะ:

<Button type="button">กดฉันสิ</Button>

props = {
  type: "button",
  children: "กดฉันสิ"
}

ส่วนฝั่ง type — children ไม่ได้มาจากอากาศเหมือนกัน มันติดมากับ React.ButtonHTMLAttributes<HTMLButtonElement> เพราะ type ตัวนั้นสืบทอดมาจาก type ที่มีช่อง children?: React.ReactNode อยู่แล้ว
เพราะฉะนั้นในสไลด์หน้า 22 ไม่มีใครต้องเขียน children ลงใน type เลย — มันมาให้ฟรี

แล้วถ้า ลืมเอา children ไปวาง จะเป็นยังไง? ตรงนี้คือกับดักจริงที่มือใหม่เจอกันเยอะ เพราะ มันไม่ error

// components/NoChild.tsx — สังเกตว่า return ไม่มี {children}
const NoChild = (props: NoChildProps) => {
  const { children, ...restProps } = props;
  return <button {...restProps}></button>;
};

// ใช้แบบนี้
<NoChild type="button">กดฉันสิ</NoChild>

$ curl -s http://localhost:3000/
<button type="button"></button>

3 · {...restProps} — ยกกล่องที่เหลือเทใส่ปุ่มจริง

จุดสามจุดในโค้ดสไลด์หน้า 22 ปรากฏสองที่ และทำคนละหน้าที่กัน ตรงนี้เป็นจุดที่คนสับสนบ่อย เลยแยกให้ดูชัด ๆ:

ผลของสองบรรทัดนี้คือ ปุ่มของคุณรับ attribute ของปุ่ม HTML ได้ครบทุกตัวโดยไม่ต้องเขียนเพิ่มสักบรรทัด
ผมเขียนหน้าเว็บที่ใช้ Button จากสไลด์หน้า 22 ตรง ๆ:

// app/page.tsx
import { Button } from "@/components/Bases";

export default function Page() {
  return (
    <main>
      <h1>บท 71</h1>
      <Button type="button" title="ปุ่มแรก">กดฉันสิ</Button>
      <Button disabled>ปุ่มที่กดไม่ได้</Button>
    </main>
  );
}

ผลรันจริง — HTML ที่ server ส่งออกมา (จัดบรรทัดใหม่ให้อ่านง่าย เนื้อหาไม่แก้):

$ curl -s http://localhost:3000/
<main>
  <h1>บท 71</h1>
  <button type="button" title="ปุ่มแรก">กดฉันสิ</button>
  <button disabled="">ปุ่มที่กดไม่ได้</button>
</main>

สังเกตว่า type, title, disabled ไปถึงปุ่มจริงครบทุกตัว ทั้งที่ในไฟล์ Button.tsx ไม่มีคำว่า type หรือ disabled เขียนอยู่เลยแม้แต่คำเดียว — นั่นคือของฟรีที่ {...restProps} แจกให้

แล้วมันฟรีจริงหรือแค่ปล่อยผ่านทุกอย่าง? ลองส่งของที่ปุ่ม HTML ไม่รู้จักดู:

// ส่ง variant ซึ่งไม่มีใน ButtonHTMLAttributes
<Button variant="outlined">กดฉันสิ</Button>

ผลรันจริง — npx tsc --noEmit หยุดทันที:

app/page.tsx(6,15): error TS2322: Type '{ children: string; variant: string; }'
  is not assignable to type 'IntrinsicAttributes & ButtonProps'.
  Property 'variant' does not exist on type 'IntrinsicAttributes & ButtonProps'.

ดีมาก — แปลว่า ButtonProps ไม่ได้เปิดรับทุกอย่างมั่ว ๆ มันรับเฉพาะที่ปุ่ม HTML จริงรับได้เท่านั้น · ถ้าอยากเพิ่มของของตัวเองต้องประกาศ (หัวข้อ 6)

4 · index.ts แบบ barrel — ทางเข้าเดียวของทั้งโฟลเดอร์

สไลด์หน้า 23 เพิ่มไฟล์ที่สองเข้ามา ชื่อ components/Bases/index.ts พร้อมคำอธิบายบรรทัดเดียวว่า “To import and re-export components” · โค้ดเต็มคือ:

// components/Bases/index.ts  — สังเกตนามสกุล .ts ไม่ใช่ .tsx เพราะไม่มี JSX ในไฟล์นี้
import Button, { type ButtonProps } from "./Button";

export type { ButtonProps };
export { Button };

ไฟล์นี้ไม่มีตรรกะอะไรเลย — มันแค่รับของเข้ามาจากไฟล์ข้าง ๆ แล้วส่งออกไปใหม่
ประโยชน์อยู่ที่ฝั่งคนใช้: แทนที่จะต้องรู้ชื่อไฟล์ทุกไฟล์ในโฟลเดอร์ ก็ import จากชื่อโฟลเดอร์เฉย ๆ ได้

import Button from "@/components/Bases/Button";
import Input  from "@/components/Bases/Input";
import Card   from "@/components/Bases/Card";

import { Button, Input, Card }
  from "@/components/Bases";

แล้วมันเป็นเวทมนตร์หรือเปล่า? ไม่ใช่ · มีกฎธรรมดา ๆ อยู่สองข้อที่ทำให้มันทำงาน:

1. ชื่อ index เป็นข้อตกลงของตัวหาไฟล์ (module resolver) ว่า “ถ้าชี้มาที่โฟลเดอร์ ให้เปิดไฟล์ชื่อ index ในนั้น” ไม่มีอะไรพิเศษกว่านั้น
2. @/ ไม่ใช่ของ Next.js — มันคือ path alias ที่ตั้งไว้ใน tsconfig.json ของโปรเจกต์นี้จริง ๆ ว่า "paths": { "@/*": ["./*"] } · เปิดไฟล์ดูได้เลย

พิสูจน์ว่าไม่ใช่เวทมนตร์แบบง่ายที่สุด — ผมเปลี่ยนชื่อไฟล์ index.ts ทิ้งไปชั่วคราว โดยไม่แตะไฟล์อื่นเลย แล้วรัน tsc:

app/page.tsx(1,24): error TS2307: Cannot find module '@/components/Bases'
  or its corresponding type declarations.

พอเอาไฟล์กลับมา error หายทันที exit code กลับเป็น 0 · แปลว่า index.ts เป็นแค่ไฟล์ธรรมดาไฟล์หนึ่ง ที่บังเอิญตั้งชื่อตรงกับข้อตกลง

// components/Bases/index.ts — ไม่มีคำว่า type เลยสักที่
import Button, { ButtonProps } from "./Button";

export { ButtonProps };
export { Button };

components/Bases/index.ts(3,10): error TS1205: Re-exporting a type when
  'isolatedModules' is enabled requires using 'export type'.

5 · ตัวอักษรตัวแรกของชื่อ component เปลี่ยนความหมายทั้งหมด

ถึงส่วนที่สำคัญที่สุดของบทนี้แล้ว · ในโค้ดสไลด์หน้า 22 ชื่อ component คือ Button ตัว B ใหญ่ · หลายคนคิดว่าเป็นธรรมเนียมความสวยงาม เหมือนตั้งชื่อ struct ใน Go

ไม่ใช่ · มันคือกฎที่เปลี่ยนความหมายของโค้ด:

  <Button>   ตัวใหญ่  →  React อ่านว่า "เรียกฟังก์ชันชื่อ Button ที่อยู่ในไฟล์นี้"
  <button>   ตัวเล็ก  →  React อ่านว่า "สร้างแท็ก HTML ชื่อ button"
                          ↑
                    ไม่สนใจเลยว่าคุณจะประกาศ const button ไว้ข้างบนหรือเปล่า

ปัญหาคือ ถ้าคุณเผลอตั้งชื่อ component เป็นตัวเล็ก และชื่อนั้นดันไปตรงกับแท็ก HTML ที่มีอยู่จริง จะไม่มีใครเตือนคุณเลยสักคน · มาดูของจริง

// ไฟล์ A — ชื่อ component เป็นตัวเล็ก
const button = (props: { children: React.ReactNode }) => {
  return <span>ดาว ★ {props.children}</span>;
};

export default function Page() {
  return (
    <main>
      <button>สวัสดี</button>
    </main>
  );
}

$ curl -s http://localhost:3000/
<main><button>สวัสดี</button></main>

$ curl -s http://localhost:3000/   # (ไฟล์เดิม เปลี่ยนแค่ b เป็น B)
<main><span>ดาว ★ <!-- -->สวัสดี</span></main>

แล้วถ้าชื่อตัวเล็กที่ไม่ตรงกับแท็ก HTML ตัวไหนล่ะ? กรณีนั้นโชคดีหน่อย เพราะ TypeScript ฟ้อง · ผมลองตั้งชื่อว่า myButton:

app/page.tsx(8,7): error TS2339: Property 'myButton' does not exist
  on type 'JSX.IntrinsicElements'.
app/page.tsx(8,23): error TS2339: Property 'myButton' does not exist
  on type 'JSX.IntrinsicElements'.

คำว่า JSX.IntrinsicElements ในข้อความ error คือ "รายชื่อแท็ก HTML ที่มีอยู่จริง" · TypeScript กำลังบอกว่า "หาแท็กชื่อ myButton ในรายชื่อไม่เจอ" — มันไม่เคยคิดจะไปหาฟังก์ชันชื่อเดียวกันเลย เพราะตัวแรกเป็นตัวเล็ก

6 · เพิ่ม props ของตัวเอง — และกับดักสองอันของ variant

ถึงตรงนี้ปุ่มของเรารับได้แค่ของที่ปุ่ม HTML รับได้ · สไลด์หน้า 30 แสดงภาพปุ่มสามแบบ (contained / outlined / text) แล้วหน้า 31 ก็โชว์โค้ดที่ทำให้มันเป็นจริง · ท่าคือเอา type สองก้อนมาบวกกัน:

type ButtonVariantTypes = "contained" | "outlined" | "text";

export type ButtonProps = {
  variant?: ButtonVariantTypes;
} & React.ButtonHTMLAttributes<HTMLButtonElement>;

เครื่องหมาย & อ่านว่า "และ" — "ของที่ปุ่มนี้รับได้ = ช่อง variant ของเรา บวกกับ ทุกอย่างที่ปุ่ม HTML รับได้"
ส่วน ? หลัง variant แปลว่า ไม่ส่งมาก็ได้

ทีนี้ในตัว component สไลด์แกะ props ออกมาสามอย่าง สังเกตบรรทัดนี้ให้ดี:

const { variant = "contained", children, className, ...restProps } = props;

มีของใหม่สองอย่างที่ต้องเข้าใจ:

• variant = "contained" — ค่าตั้งต้น · ถ้าคนใช้ไม่ส่ง variant มา ให้ถือว่าเป็น "contained" จะได้ไม่ต้องเขียน if เช็ค undefined เอง
• className ถูกดึงออกมาต่างหากไม่ปล่อยให้ตกอยู่ใน restProps · เพราะ component ต้องเอาไปผสมกับ class ของตัวเองก่อน

และนี่คือเหตุผลที่ต้องดึง variant ออกด้วย — ถ้าปล่อยไว้ใน restProps แล้วเทลง <button> มันจะไหลไปโผล่บนหน้าเว็บจริง · ผมลองแล้ว:

const { children, ...restProps } = props;
return <button {...restProps}>{children}</button>;

<button variant="outlined">รั่ว</button>

const { variant = "contained", children,
        className, ...restProps } = props;

<button class="btn btn-outlined wide">ขอบเส้น</button>

// สไลด์หน้า 31 บรรทัด 25 และ 27
const variantStyles = getVariantStyles(variant);
...
<button className={`${variantStyles} ${className}`} {...restProps}>

// เขียน <Button>ค่าเริ่มต้น</Button> เฉย ๆ ไม่ส่ง className
<button class="btn btn-contained undefined">ค่าเริ่มต้น</button>

const variantStyles = getVariantStyles(variant);
const merged = [variantStyles, className].filter(Boolean).join(" ");
return <button className={merged} {...restProps}>{children}</button>;

// ผลรันจริงหลังแก้:
// <button class="btn btn-contained">ค่าเริ่มต้น</button>
// <button class="btn btn-outlined wide">ขอบเส้น</button>

7 · ภารกิจ — ทำเอง แล้วพิสูจน์ด้วยผลรัน ไม่ใช่ด้วยความรู้สึก

8 · สรุปบทนี้เป็นสี่บรรทัด

อ้างอิง

• React — Your First Component — อ่านหัวข้อย่อย Step 1: Export the component ถึง Step 3: Add markup ให้จบ แล้วสังเกตกล่อง Pitfall ที่บอกว่าชื่อ component ต้องขึ้นต้นด้วยตัวใหญ่ — ตรงกับที่หัวข้อ 5 ของบทนี้ curl HTML ออกมาพิสูจน์ให้ดูแล้ว
• React — Passing Props to a Component — อ่านหัวข้อ Forwarding props with the JSX spread syntax ซึ่งคือ {...restProps} ในสไลด์หน้า 22 เป๊ะ ๆ · คู่มือทางการเตือนไว้ด้วยว่า “ใช้ให้เท่าที่จำเป็น” เพราะทำให้ไล่ไม่ออกว่าอะไรถูกส่งต่อไปบ้าง
• React — Passing JSX as children — สั้นมาก อ่านไม่ถึงสองนาที · ตอบคำถาม “children มาจากไหน” ตรง ๆ ว่ามันคือของที่อยู่ระหว่างแท็กเปิดกับแท็กปิด ถูกใส่ให้ในช่องชื่อ children อัตโนมัติ
• React TypeScript Cheatsheet — Typing Component Props — เลื่อนไปดูหัวข้อ Types or Interfaces? และตัวอย่างที่ใช้ React.ButtonHTMLAttributes · อธิบายว่าทำไมท่า "ยืม attribute ของ element จริงมาทั้งชุดแล้วบวก props ของตัวเองด้วย &" ถึงเป็นท่ามาตรฐานของ component library
• TypeScript — isolatedModules — อ่านย่อหน้าที่ยกตัวอย่าง re-export ของ type ซึ่งคือสาเหตุตรง ๆ ของ TS1205 ที่บทนี้รันให้ดูในหัวข้อ 4 · อ่านเพื่อเข้าใจว่าทำไมข้อจำกัด "ไฟล์เดียวต้องแปลได้เอง" ถึงทำให้ต้องเขียนคำว่า type ให้ชัด — และทำไมพอบรรทัด import บอกไว้แล้ว บรรทัด export ถึงไม่ต้องบอกซ้ำ
• Next.js — Project Structure — ดูหัวข้อ Top-level folders เพื่อยืนยันว่า components/ ไม่ใช่โฟลเดอร์พิเศษของ Next.js — คุณจะตั้งชื่ออะไรก็ได้ · มีแต่ app/ และ public/ เท่านั้นที่ Next.js สนใจจริง