เริ่มต้นหัดเขียน React.js กันดีกว่า (อัพเดทปี 2025)

สวัสดีครับ วันนี้จะมาแนะนำการเริ่มต้นเขียน React.js ฉบับปี 2025 สำหรับผู้ที่เพิ่งเริ่มศึกษานะครับ โดยบทความจะเน้นไปที่ตัวอย่าง แนะนำโค๊ด เพื่อให้เห็นภาพ มากกว่าทฤษฎีนะครับ แต่ก็มีอธิบายไว้คร่าวๆ เช่นกัน (จริงๆ แนะนำ ว่าควรลงมือเขียนโค๊ดไปด้วยเลยครับ)

React

React is the library for web and native user interfaces. Build user interfaces out of individual pieces called components written in JavaScript. React is designed to let you seamlessly combine components written by independent people, teams, and organizations.react.dev

ก่อนหน้านี้ผมเคยเขียนไว้ 2 บทความ เกี่ยวกับ เริ่มต้นเขียน React.js ซึ่งบทความแรก ก็ 10ปีได้แล้ว และบทความที่ 2 ก็ตั้ง7ปีแล้ว

• React คืออะไร? + เริ่มต้นเขียน React
• มาเริ่มต้นเขียน React ด้วย Create React App กันดีกว่า

ควรรู้อะไรมาก่อนบ้าง?

1. แน่นอน ต้องพอมีพื้นฐาน HTML, CSS และ JavaScript มาก่อน
2. ติดตั้ง Node.js หรือสามารถใช้คำสั่งพื้นฐาน เพื่อติดตั้ง library หรือสร้างโปรเจ็คได้
3. Command Line พื้นฐาน สามารถเปิด Terminal เป็น

React คืออะไร?

• เป็น JavaScript Library สำหรับสร้าง User Interface (UI) ที่พัฒนาโดย Facebook (Meta)
• ใช้แนวคิด Component-Based คือแบ่ง UI เป็นส่วนย่อยๆ ที่สามารถนำกลับมาใช้ซ้ำได้
• มี Virtual DOM ที่ช่วยจัดการประสิทธิภาพในการอัพเดท UI
• ใช้ JSX ซึ่งเป็นการผสมผสาน JavaScript กับ HTML หรือมองคล้ายๆ XML ก็ได้เช่นกัน

เริ่มต้นเรียนรู้ React

React มีเอกสารและแหล่งเรียนรู้มากมายให้เราได้ศึกษา สามารถศึกษาเพิ่มเติมได้จาก links ข้างล่างประกอบได้เช่นกัน:

Quick Start – React

The library for web and native user interfacesreact.dev

Tutorial: Tic-Tac-Toe – React

The library for web and native user interfacesreact.dev

React Reference Overview – React

The library for web and native user interfacesreact.dev

พื้นฐาน React

ตัวนามสกุลของไฟล์จะเป็น .jsx หรือ .tsx (สำหรับ TypeScript) เราสามารถใช้ react library จาก cdn หรือ download ไฟล์ js มาไว้ที่ local แต่ที่นิยมคือ ใช้ vite หรือ Rsbuild ซึ่งเป็น Build tool ช่วย (เดี๋ยวจะอธิบายรายละเอียดเพิ่มเติมครับ)

JSX

JSX คือ extension ของ JavaScript ที่ให้เราสามารถเขียน คล้ายๆกับ HTML tag ลงใน JavaScript อารมณ์คล้ายๆกับ รวม HTML กับ JavasScript ไว้ที่เดียวกัน

ตัว JSX มีกฎข้อบังคับอยู่เล็กน้อย เช่น

1. return ต้องเป็น single root element

ตัวอย่างเช่น ถ้าเราจะ return elements หลายๆตัว เราต้อง wrap ด้วย single parent tag ก่อน เช่น <div> ตัวอย่าง

1
// ❌ แบบนี้ไม่ได้
2
<h1>Hello</h1>
3
<p>This is paragraph</p>
4

5

6
// ✅ ต้องหุ้มด้วย div ให้เป็น single tag
7
<div>
8
    <h1>Hello</h1>
9
    <p>This is paragraph</p>
10
</div>

2. ต้องปิด tag ทุกครั้ง ถ้า html ธรรมดา เราสามารถทำได้เช่น <img> แต่ใน JSX เราต้องเป็นแบบนี้

1
<img />

3. ใช้ camelCase เกือบทุกสิ่งอย่าง หลักๆ ก็เช่น class ใน JSX เราจะใช้เป็น className

1
// HTML
2
<div class="header"></div>
3

4
// JSX
5
<div className="header"></div>

Writing Markup with JSX – React

The library for web and native user interfacesreact.dev

อ่านเพิ่มเติมเกี่ยวกับการเขียน JSX

Components

• มองทุกอย่างเป็น Component (naming convention แนะนำ ตั้งชื่อขึ้นต้นด้วยตัวใหญ่)
• Component คือ ชิ้นส่วนของ UI ที่เราสร้างขึ้นมา สามารถ reuse ใช้ซ้ำได้ โค๊ดเป็นระเบียบ หน้าตาคล้ายๆ element อื่นๆ ของ HTML และเราตั้งชื่อได้อิสระ เช่น <MyComponent />
• Component สามารถเขียนได้ 2 แบบ คือ
  1. Function Component (ปัจจุบัน นิยมใช้วิธีนี้)
  2. Class Component (วิธีแบบเก่า)

ตัวอย่าง Function Component:

1
function Greeting() {
2
  return <h1>Hello, React!</h1>
3
}

เวลานำไปใช้งาน ก็คือเรียกแบบนี้ (หากไม่มี children สามารถใส่ self closing tag ได้เลย)

1
<Greeting />
2

3
// หรือแบบนี้ (ถ้าไม่มี children แนะนำ แบบ self closing tag ครับ)
4
<Grreting></Greeting>

Props

Props ใน React จะคล้ายๆกับ attribute ของ element เป็นข้อมูลที่เราสามารถส่งไปให้ component ได้ ถ้าลองนึกถึง tag html <img> มี attributes เป็น src และ alt ใช่มั้ย

1
<img src="/path/to/image" alt="Image" />

• Props เป็น read-only ไม่สามารถแก้ไขค่าได้โดยตรงใน Component
• สามารถส่ง Props ได้หลายรูปแบบ เช่น string, number, array, object, function

ทีนี้ React Component ถ้าเราอยากให้มันรับข้อมูลภายนอก เราก็ต้องทำแบบ <img> เช่น ผมสร้าง Greeting component ขึ้นมา ก่อนหน้านี้มีแค่ Hello React เราก็เพิ่ม message ลงไป

1
function Greeting(props) {
2
  return <h1>Hello, {props.name}!</h1>
3
}

เวลาใช้งาน ก็ส่งค่า ไปกับ props ชื่อ name แบบนี้เลย

1
<Greeting name="React!" />

หรือการส่งจาก Parent Component ไปยัง Child Component:

1
function ParentComponent() {
2
  return <ChildComponent title="Hello from Parent" />
3
}
4

5
function ChildComponent({ title }) {
6
  return <h1>{title}</h1>
7
}

State

State เป็นเหมือนข้อมูลที่ component นั้นๆ (ต่างจาก props นะครับ ที่ข้อมูลมาจากข้างนอก component) และเมื่อข้อมูล state มีการเปลี่ยน Component ก็จะทำการ re-render (แสดงผลใหม่) เพื่อให้หน้าเว็บอัพเดทข้อมูลที่เปลี่ยนไป

้ถ้าให้พูดง่ายๆ คือ State ก็คล้ายๆ หน่วยความจำของ Component ที่ใช้เก็บข้อมูล

การใช้ state ใน React เราจะใช้ผ่าน useState ตัว useState จะ return array มา 2ช่อง ช่องแรก เป็นค่า state ที่เราจะเก็บ ค่าที่สองเป็น function ที่เราต้องการจะ update ค่า state

การจัดการ State ด้วย useState Hook:

1
import { useState } from 'react'
2

3
function Counter() {
4
  const [count, setCount] = useState(0)
5

6
  return <button onClick={() => setCount(count + 1)}>Clicked {count} times</button>
7
}

อธิบายนิดนึงเกี่ยวกับ Array destructuring ตรงนี้

1
const [count, setCount] = useState(0)

ถ้าใครงง มันคือการเขียนแบบนี้

1
const stateArray = useState(0)
2
const count = stateArray[0]
3
const setCount = stateArray[1]

และใน React ecosystem จะนิยมเขียนแบบ Array destructuring นะครับ หวังว่าจะไม่งงเนอะ

สร้าง Project ด้วย Vite

หลังจากรู้จัก Component, Props และ State ไปแล้ว ลองมาเขียนโค๊ดกันดีกว่า ลองเขียน ลองฝึก ดีกว่าอ่านอย่างเดียว ลุย

Vite

Next Generation Frontend Toolingvite.dev

Rsbuild

Rsbuild is a high-performance build tool powered by Rspack. It provides out-of-the-box setup for enjoyable development experience.rsbuild.dev

เราจะใช้ vite ในการสร้างโปรเจ็ค React กันนะครับ เปิด terminal ขึ้นมา แล้วรันตามนี้

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

ตัวอย่าง ตั้งชื่อโปรเจ็คว่า my-app จากนั้น ติดตั้ง dependencies ที่ folder my-app

cd my-app

npm install

ลอง start server

npm run dev

จะได้หน้าเว็บที่ url http://localhost:5173

  VITE v6.3.5  ready in 376 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

ลองทำการเปิด project สำหรับไฟล์ และลองทำความเข้าใจโค๊ดก่อน ลองแก้ไขไฟล์ src/App.jsx แล้วเซฟดูการเปลี่ยนแปลงครับ

มาลองสร้าง Component ส่ง props สร้าง state กันดูบ้าง จากไฟล์ src/App.jsx เราจะทำการสร้าง component ชื่อ <Counter> เพื่อเอาไว้แสดงปุ่ม button

1
import { useState } from 'react'
2
import reactLogo from './assets/react.svg'
3
import viteLogo from '/vite.svg'
4
import './App.css'
5

6
function App() {
7
  const [count, setCount] = useState(0)
8

9
  return (
10
    <>
11
      <div>
12
        <a href="https://vite.dev" target="_blank">
13
          <img src={viteLogo} className="logo" alt="Vite logo" />
14
        </a>
15
        <a href="https://react.dev" target="_blank">
16
          <img src={reactLogo} className="logo react" alt="React logo" />
17
        </a>
18
      </div>
19
      <h1>Vite + React</h1>
20
      <div className="card">
21
        <button onClick={() => setCount((count) => count + 1)}>count is {count}</button>
22
        <p>
23
          Edit <code>src/App.jsx</code> and save to test HMR
24
        </p>
25
      </div>
26
      <p className="read-the-docs">Click on the Vite and React logos to learn more</p>
27
    </>
28
  )
29
}
30

31
export default App

ยกเอาส่วน ใน class card ไปสร้างใหม่เป็น Counter.jsx สร้างไว้ใน folder ใหม่ชื่อ components (ลบ <p> ตรง Edit code ออก)

1
const Counter = () => {
2
  return (
3
    <div className="card">
4
      <button onClick={() => setCount((count) => count + 1)}>count is {count}</button>
5
    </div>
6
  )
7
}
8

9
export default Counter

ทีนี้ จะมี error คือมันไม่รู้จัก count และ setCount เราก็จะใช้วิธีรับมาจาก props แบบนี้

1
const Counter = ({ count, setCount }) => {
2
  return (
3
    <div className="card">
4
      <button onClick={() => setCount((count) => count + 1)}>count is {count}</button>
5
    </div>
6
  )
7
}
8

9
export default Counter

ในส่วน App.jsx เราก็ใช้ <Counter> แทนที่เก่า ส่ง props ไปด้วย แบบนี้

1
import { useState } from 'react'
2
import reactLogo from './assets/react.svg'
3
import viteLogo from '/vite.svg'
4
import './App.css'
5
import Counter from './components/Counter'
6

7
function App() {
8
  const [count, setCount] = useState(0)
9

10
  return (
11
    <>
12
      <div>
13
        <a href="https://vite.dev" target="_blank">
14
          <img src={viteLogo} className="logo" alt="Vite logo" />
15
        </a>
16
        <a href="https://react.dev" target="_blank">
17
          <img src={reactLogo} className="logo react" alt="React logo" />
18
        </a>
19
      </div>
20
      <h1>Vite + React</h1>
21

22
      <Counter count={count} setCount={setCount} />
23

24
      <p className="read-the-docs">Click on the Vite and React logos to learn more</p>
25
    </>
26
  )
27
}
28

29
export default App

ผลลัพธ์ไม่มีอะไรเปลี่ยน เราแค่ย้ายโค๊ดไปเป็น Component

ทีนี้ สมมติเราอยากได้ปุ่ม Counter 3-4 ตัว การทำแบบนี้ มีปัญหาแน่ๆ เพราะว่า เวลาคลิ๊กแค่อันแรก แต่อันอื่นๆ ก็แสดง จำนวน click แชร์กันทั้งหมด

1
<Counter count={count} setCount={setCount} />
2
<Counter count={count} setCount={setCount} />
3
<Counter count={count} setCount={setCount} />

ถ้ากรณีแบบนี้ เราก็ต้องทำการเก็บ state ของใครของมัน ไว้ใน component แทนที่จะไว้ข้างนอก นั่นเอง (ทั้งนี้ทั้งนั้น การออกแบบว่าจะเป็น state หรือ props ไม่มีตายตัวครับ ขึ้นอยู่กับความต้องการและจุดประสงค์ของเรา)

เปลี่ยน Counter.jsx ให้ใช้ state ในตัวเอง

1
import { useState } from 'react'
2

3
const Counter = () => {
4
  const [count, setCount] = useState(0)
5

6
  return (
7
    <div className="card">
8
      <button onClick={() => setCount((count) => count + 1)}>count is {count}</button>
9
    </div>
10
  )
11
}
12

13
export default Counter

และส่วน src/App.jsx ส่วนที่ render Counter เราก็จะเหลือแค่นี้

1
<Counter />
2
<Counter />
3
<Counter />

CSS ใน React

การเขียน CSS ใน react component ทำได้หลายวิธีครับ ตัวอย่างแรก

1. inline styles - กำหนดผ่าน attribute style ไปตรงๆ ในรูปแบบ JavaScript object ธรรมดาเลย key, value (แต่ property จะเป็นรูปแบบ camelCase)

1
const myStyle = {
2
  color: 'red',
3
  backgroundColor: 'green',
4
  fontSize: '20px'
5
}
6

7
return <p style={myStyle}>>Hello</p>

2. ไฟล์ css ธรรมดา แบบเดียวกับที่เราเขียน HTML/CSS ปกติเลย ใช้งานก็แค่ import file css แล้วก็จะเป็น className แทน class

1
.my-class {
2
  color: red;
3
  background-color: green;
4
  font-isze: 20px;
5
}

ใช้งาน

1
import './style.css'
2

3
return <p className="my-class">Hello</p>

3. CSS Module - คล้ายๆกับแบบ css ธรรมดา แต่จะแก้ปัญหาเรื่อง global scope ของ CSS ไม่ให้ชนกัน เนื่องจากมันจะสร้าง class name แบบ unique ให้เราอัตโนมัติ เมื่อเรา import css ไปใน component

หลักการคือ ต้องสร้างไฟล์ css ลงท้ายด้วย .module เช่น styles.module.css

1
.myClass {
2
  color: red;
3
  background-color: green;
4
  font-isze: 20px;
5
}

การใช้งาน ก็ import มาแบบเดียวกัน

1
import styles from './styles.module.css'
2

3
return <p className={styles.myClass}>Hello</p>

โดยตัวอย่าง styles.myClass จะถูกแปลงเป็น Component_RandomHash ครับ

Conditional Rendering

เราสามารถแสดงผลแบบมีเงื่อนไขใน React ได้ ตัวอย่างเช่น สมมติ เรามี condition ใน render component นี้ โดยเช็คว่า user logged in อยู่หรือเปล่า เราก็จะใช้ประมาณนีี้ครับ

1
function Greeting({ isLoggedIn }) {
2
  // แบบที่ 1. ใช้ ternary operator
3
  return <div>{isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please log in</h1>}</div>
4
}
5

6
// แบบที่ 2. ใช้ && operator
7
function Notification({ message }) {
8
  return <div>{message && <p>{message}</p>}</div>
9
}

ทีนี้ ลองมาปรับ logic แก้ Counter เล่นๆ ให้แสดงเลขคู่/คี่ คนละสี ก็จะเป็นแบบนี้

1
import { useState } from 'react'
2

3
const Counter = () => {
4
  const [count, setCount] = useState(0)
5

6
  const blue = { color: 'blue' }
7
  const red = { color: 'red' }
8
  const countStyle = count % 2 === 0 ? blue : red
9

10
  return (
11
    <div className="card">
12
      <button onClick={() => setCount((count) => count + 1)}>
13
        count is <span style={countStyle}>{count}</span>
14
      </button>
15
    </div>
16
  )
17
}
18

19
export default Counter

Lists และ Keys

การแสดงผล List ใน React เราจะใช้ Arrap map แบบ JavaScript ได้เลย แบบนี้

1
function TodoList() {
2
  const todos = [
3
    { id: 1, text: 'ตื่นนอน' },
4
    { id: 2, text: 'อาบน้ำ' },
5
    { id: 3, text: 'กินข้าว' }
6
  ]
7

8
  return (
9
    <ul>
10
      {todos.map((todo) => (
11
        <li key={todo.id}>{todo.text}</li>
12
      ))}
13
    </ul>
14
  )
15
}

• ต้องกำหนด key ให้กับแต่ละ item ใน list เสมอ
• key ควรเป็นค่าที่ unique ในระดับของ list นั้นๆ

สรุป

ทั้งหมดนี้เป็นพื้นฐานเบื้องต้นของ React นะครับ ยังมีอีกหลายเรื่องที่น่าสนใจเช่น Form, Event, Data Fetching, Context API, Custom Hooks, Error Boundaries, และอื่นๆ อีกมากมาย แนะนำให้ลองศึกษาเพิ่มเติมจากเอกสารอ้างอิงที่ให้ไว้ข้างต้นครับ

สุดท้ายนี้ขอให้สนุกกับการเรียนรู้ React นะครับ หวังว่าบทความนี้จะเป็นประโยชน์กับผู้ที่กำลังเริ่มต้นศึกษา React ไม่มากก็น้อยครับ

Happy Coding ❤️

แหล่งเรียนรู้ต่อเพิ่มเติม

Quick Start – React

The library for web and native user interfacesreact.dev

React Foundations | Next.js

Learn the fundamental JavaScript and React concepts that'll help you get started with Next.js.nextjs.org

Learn React | Codecademy

Learn React in our course for front-end web development. Create interactive user interfaces and dynamic web apps.codecademy.com

React Developer Roadmap: Learn to become a React developer

Community driven, articles, resources, guides, interview questions, quizzes for react development. Learn to become a modern React developer by following the steps, skills, resources and guides listed in this roadmap.roadmap.sh