สอน React เบื้องต้น เขียน Component แรกใน 10 นาที

บทความนี้สอน React เบื้องต้นสำหรับมือใหม่ที่ไม่เคยเขียน React มาก่อนเลย พาทำตั้งแต่สร้างโปรเจกต์ ไปจนถึงเขียน component แรกที่รันดูผลจริงในเบราว์เซอร์ได้ ใช้เวลาไม่ถึง 10 นาทีถ้าทำตามทีละขั้นตอน

React เป็นหนึ่งใน library ที่นิยมมากที่สุดสำหรับสร้างหน้าเว็บฝั่ง frontend ในปัจจุบัน ทั้งบริษัทขนาดใหญ่และสตาร์ทอัพเลือกใช้กันอย่างแพร่หลาย เพราะแนวคิดเรื่อง component ทำให้จัดการหน้าตาที่ซับซ้อนได้เป็นระบบ แบ่งเป็นชิ้นเล็กๆ ที่นำกลับมาใช้ซ้ำได้ง่าย วิธีที่ดีที่สุดในการเรียนรู้คือลงมือเขียนโค้ดตามไปด้วยจริง ไม่ใช่แค่อ่านผ่านตา

สิ่งที่ต้องมีก่อนเริ่ม

ก่อนเริ่มต้องมี Node.js ติดตั้งอยู่ในเครื่องแล้ว (เวอร์ชัน 18 ขึ้นไป) เช็คได้ด้วยคำสั่ง

node --version

ถ้ายังไม่มี Node.js ให้ไปดาวน์โหลดจากเว็บทางการ nodejs.org ก่อน มากับ npm (ตัวจัดการ package) ให้อัตโนมัติอยู่แล้ว ไม่ต้องติดตั้งแยก

สร้างโปรเจกต์ React ด้วย Vite

Vite คือเครื่องมือสร้างโปรเจกต์ที่นิยมที่สุดสำหรับ React ในปัจจุบัน เร็วกว่าเครื่องมือรุ่นเก่าอย่าง Create React App มาก ทั้งเวลาเริ่มต้นโปรเจกต์และเวลาที่ต้องรอเห็นผลตอนแก้โค้ดแต่ละครั้ง เปิด terminal แล้วพิมพ์

npm create vite@latest my-first-app -- --template react

ระบบจะถามยืนยันการติดตั้ง package เพิ่มเติม พิมพ์ y แล้ว Enter ผ่านไปได้เลย เมื่อสร้างเสร็จ เข้าไปในโฟลเดอร์โปรเจกต์แล้วติดตั้ง dependency ทั้งหมด

cd my-first-app
npm install

จากนั้นเริ่มรันโปรเจกต์

npm run dev

terminal จะแสดง URL (ปกติคือ http://localhost:5173) เปิดลิงก์นี้ในเบราว์เซอร์ จะเห็นหน้าเว็บเริ่มต้นของ React แสดงขึ้นมาทันที ถ้าเห็นหน้านี้แปลว่าทุกอย่างตั้งค่าสำเร็จเรียบร้อยแล้ว พร้อมเริ่มแก้ไขโค้ดของตัวเองได้เลย

โครงสร้างโปรเจกต์ที่ได้

ไฟล์ที่สำคัญที่สุดสำหรับมือใหม่คือ src/App.jsx เปิดไฟล์นี้ขึ้นมาจะเห็นโค้ด component หลักของแอป ลองแก้ข้อความในไฟล์นี้แล้วบันทึก จะเห็นหน้าเว็บในเบราว์เซอร์เปลี่ยนตามทันทีโดยไม่ต้อง refresh เอง เรียกฟีเจอร์นี้ว่า Hot Module Replacement เป็นข้อดีหลักที่ทำให้ Vite ได้รับความนิยม เพราะช่วยประหยัดเวลาระหว่างพัฒนาได้มาก ไม่ต้องรอโหลดหน้าใหม่ทั้งหมดทุกครั้งที่แก้โค้ด

เขียน Component แรกด้วยตัวเอง

ลบเนื้อหาเดิมใน src/App.jsx ออกให้หมด แล้วเขียนโค้ดนี้แทน

function App() {
  const name = "โลก";

  return (
    <div>
      <h1>สวัสดี {name}!</h1>
      <p>นี่คือ component แรกของฉัน</p>
    </div>
  );
}

export default App;

บันทึกไฟล์แล้วดูผลในเบราว์เซอร์ จะเห็นข้อความ “สวัสดี โลก!” แสดงขึ้นมาทันที

JSX คืออะไร

โค้ดที่ดูเหมือน HTML ปนอยู่ในฟังก์ชัน JavaScript ด้านบนเรียกว่า JSX (JavaScript XML) เป็นส่วนขยายของภาษา JavaScript ที่ React ใช้เขียนโครงสร้างหน้าตา (UI) จุดสำคัญที่ต่างจาก HTML ปกติที่ควรรู้

• ใช้ {} เพื่อใส่โค้ด JavaScript ปนเข้าไปในนั้นได้ เช่น {name} ในตัวอย่างด้านบน สามารถใส่นิพจน์ JavaScript อะไรก็ได้ในนี้ ไม่ใช่แค่ตัวแปรเฉยๆ เช่น การคำนวณ หรือเรียกฟังก์ชัน
• attribute บางตัวชื่อเปลี่ยนไป เช่น class ใน HTML ต้องเขียนเป็น className ใน JSX เพราะ class เป็นคำสงวนใน JavaScript
• ต้องมี element เดียวห่อทุกอย่างไว้เสมอ (ในตัวอย่างคือ <div> ที่ห่อ <h1> และ <p> ไว้) ห้ามมี element ระดับบนสุดหลายตัวพร้อมกัน ถ้าไม่อยากเพิ่ม <div> เกินความจำเป็น ใช้ <>...</> (เรียกว่า Fragment) ห่อแทนได้เช่นกัน

สร้าง Component ที่สอง แล้วส่ง props

React แยกหน้าตาออกเป็น component ย่อยๆ ได้ และส่งข้อมูลระหว่าง component ผ่าน props

function Greeting({ name }) {
  return <h2>สวัสดี {name}</h2>;
}

function App() {
  return (
    <div>
      <Greeting name="สมชาย" />
      <Greeting name="สมหญิง" />
    </div>
  );
}

export default App;

Greeting คือ component ใหม่ที่รับค่า name ผ่าน props แล้วนำไปแสดงผล เรียกใช้ <Greeting name="สมชาย" /> ได้เหมือนแท็ก HTML ทั่วไป แค่ใส่ค่าผ่าน attribute ตามชื่อ prop ที่ component นั้นต้องการ ทำให้สร้าง component เดียวแล้วนำไปใช้ซ้ำได้หลายที่โดยส่งค่าต่างกัน นี่คือข้อดีหลักของแนวคิด component ที่ทำให้ไม่ต้องเขียนโค้ดซ้ำๆ กันหลายที่โดยไม่จำเป็น

เพิ่ม state ให้ Component โต้ตอบได้

ตัวอย่างข้างบนแสดงผลอย่างเดียว ยังไม่โต้ตอบกับผู้ใช้ ลองเพิ่มปุ่มกดนับจำนวนด้วย useState

import { useState } from 'react';

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

  return (
    <div>
      <p>กดไปแล้ว {count} ครั้ง</p>
      <button onClick={() => setCount(count + 1)}>กด</button>
    </div>
  );
}

export default App;

ลองกดปุ่มดูจะเห็นตัวเลขเพิ่มขึ้นทันทีโดยไม่ต้อง refresh หน้าเว็บ นี่คือหัวใจสำคัญของ React — component จะ render ใหม่อัตโนมัติทุกครั้งที่ state เปลี่ยน ไม่ต้องเขียนโค้ดสั่งอัปเดตหน้าจอเองด้วยมือเหมือนเขียน JavaScript แบบดั้งเดิม อ่านรายละเอียดเพิ่มเติมเรื่อง Hook ได้ในบทความ React Hook คืออะไร ที่อธิบาย useState และ useEffect แบบละเอียด

ใส่ CSS ให้ Component

โปรเจกต์ที่สร้างจาก Vite มีไฟล์ src/App.css มาให้อยู่แล้ว ใช้ตกแต่งหน้าตาของ component ได้ทันที เปิดไฟล์นี้แล้วเพิ่ม class ใหม่

.greeting {
  color: #0d9488;
  font-weight: bold;
}

จากนั้นกลับไปที่ App.jsx แล้วใช้ className เพื่อเรียก class นี้มาใช้ (ไม่ใช่ class แบบ HTML ปกติ ตามที่อธิบายไว้ในหัวข้อ JSX ด้านบน)

function Greeting({ name }) {
  return <h2 className="greeting">สวัสดี {name}</h2>;
}

บันทึกไฟล์แล้วดูผล ข้อความจะเปลี่ยนสีและตัวหนาตาม CSS ที่เขียนไว้ทันที นอกจากวิธีนี้ยังมีวิธีจัดการ style อื่นที่นิยมในโปรเจกต์ React เช่น CSS Modules หรือ styled-components แต่สำหรับมือใหม่ การใช้ไฟล์ CSS ธรรมดาแบบนี้ก็เพียงพอแล้วสำหรับเริ่มต้น

ขั้นตอนต่อไปหลังจากนี้

เมื่อเขียน component พื้นฐานได้คล่องแล้ว ขั้นตอนถัดไปที่ควรเรียนรู้เพิ่มคือ

• Hook อื่นๆ เช่น useEffect สำหรับดึงข้อมูลจาก API
• การจัดการฟอร์ม รับ input จากผู้ใช้และตรวจสอบความถูกต้อง
• React Router สำหรับสร้างหลายหน้าในแอปเดียว
• State management สำหรับแอปที่ซับซ้อนขึ้น เมื่อ state เริ่มต้องแชร์ระหว่างหลาย component

ไม่ต้องรีบเรียนทุกอย่างพร้อมกัน ฝึกเขียน component เล็กๆ ให้คล่องมือก่อน แล้วค่อยขยายไปเรียนรู้เรื่องอื่นทีละเรื่องตามที่โปรเจกต์จริงต้องการ การเรียนรู้ทีละขั้นแบบนี้จะช่วยให้เข้าใจแต่ละเรื่องได้ลึกกว่าการพยายามเรียนทุกอย่างพร้อมกันตั้งแต่แรก

คำถามที่พบบ่อย

ต้องรู้ JavaScript มาก่อนถึงจะเรียน React ได้ไหม ควรมีพื้นฐาน JavaScript มาก่อนพอสมควร โดยเฉพาะเรื่องฟังก์ชัน, array method อย่าง map() และแนวคิดพื้นฐานของ object เพราะ React สร้างอยู่บนพื้นฐาน JavaScript ทั้งหมด ไม่ใช่ภาษาแยกต่างหาก ถ้ายังไม่แน่นด้าน JavaScript แนะนำให้ฝึกพื้นฐานก่อนเริ่ม React จะเรียนรู้ได้ราบรื่นกว่ามาก ไม่งั้นจะต้องเรียนสองอย่างพร้อมกันซึ่งอาจทำให้สับสนได้ง่าย

ต้องใช้ Vite เท่านั้นไหม หรือมีทางเลือกอื่น ไม่จำเป็น Vite เป็นตัวเลือกที่นิยมที่สุดตอนนี้เพราะเร็วและตั้งค่าง่าย แต่ยังมีทางเลือกอื่นอย่าง Next.js ที่เพิ่มความสามารถด้าน routing และ server-side rendering มาให้ในตัว เหมาะกับโปรเจกต์ที่ต้องการฟีเจอร์เหล่านั้นตั้งแต่แรก สำหรับมือใหม่ที่เพิ่งเริ่มเรียน แนะนำให้เริ่มจาก Vite ก่อนเพราะเรียบง่ายกว่า

ทำไมต้องมีไฟล์นามสกุล .jsx แทน .js นามสกุล .jsx บอกเครื่องมือ build ว่าไฟล์นี้มีโค้ด JSX ปนอยู่ ต้องแปลงก่อนถึงจะรันใน browser ได้จริง บางโปรเจกต์ตั้งค่าให้ใช้ .js ปนกับ JSX ได้เหมือนกัน แต่ .jsx ชัดเจนกว่าและเป็นธรรมเนียมที่นิยมใช้กันทั่วไป

แก้โค้ดแล้วเบราว์เซอร์ไม่อัปเดตให้อัตโนมัติ ต้องทำยังไง ปกติ Vite จะอัปเดตให้อัตโนมัติผ่าน Hot Module Replacement ถ้าไม่อัปเดตให้ลองเช็คว่า npm run dev ยังรันอยู่ใน terminal หรือไม่ ถ้าปิดไปแล้วต้องรันคำสั่งนี้ใหม่ หรือลอง refresh หน้าเบราว์เซอร์เองด้วยมือดูก่อน

สร้างโปรเจกต์เสร็จแล้ว พร้อมเอาขึ้นเว็บจริงเลยได้ไหม ยังไม่ได้ทันที โปรเจกต์ที่รันด้วย npm run dev เป็นโหมดพัฒนาเท่านั้น ก่อน deploy ขึ้นเว็บจริงต้อง build ก่อนด้วยคำสั่ง npm run build ซึ่งจะรวมไฟล์ทั้งหมดให้พร้อมใช้งานจริง ได้ไฟล์ static ในโฟลเดอร์ dist ที่อัปโหลดขึ้นโฮสติ้งได้ทันที เช่น Vercel, Netlify หรือเซิร์ฟเวอร์ทั่วไป

เขียน React ด้วย TypeScript ได้ไหม ได้ ตอนสร้างโปรเจกต์ด้วย Vite เปลี่ยน template จาก react เป็น react-ts ได้ทันที จะได้โปรเจกต์ React ที่ตั้งค่า TypeScript มาให้พร้อมใช้งานตั้งแต่แรก เหมาะกับโปรเจกต์ที่มีขนาดใหญ่ขึ้นและต้องการความปลอดภัยของ type มากขึ้น สำหรับมือใหม่แนะนำให้เริ่มจาก JavaScript ธรรมดาก่อน แล้วค่อยเปลี่ยนไป TypeScript เมื่อคุ้นเคยกับ React แล้ว

สรุป

สอน React เบื้องต้นในบทความนี้ครอบคลุม 4 ขั้นตอนหลัก

1. สร้างโปรเจกต์ด้วย npm create vite@latest
2. เข้าใจ JSX และวิธีเขียน component พื้นฐาน
3. ส่งข้อมูลระหว่าง component ด้วย props
4. เพิ่มการโต้ตอบด้วย useState

component ที่เขียนในบทความนี้เป็นแค่จุดเริ่มต้น ลองแก้ไขโค้ดตัวอย่างด้วยตัวเอง เปลี่ยนข้อความ เพิ่มปุ่มใหม่ หรือลองสร้าง component เพิ่มเอง จะช่วยให้เข้าใจ React ได้เร็วกว่าอ่านเฉยๆ มาก ลองผิดลองถูกด้วยตัวเองบ่อยๆ คือวิธีที่ดีที่สุดในการเรียนรู้เครื่องมือใหม่ทุกตัว ไม่ใช่แค่ React เท่านั้น