Blockdit Logo (Mobile)
Shoper Gamer
•
18 ส.ค. เวลา 06:58 • การศึกษา

React คืออะไร

โดย
ในโลกของการพัฒนาเว็บแอปพลิเคชันที่เปลี่ยนแปลงอย่างรวดเร็ว React ได้กลายเป็นหนึ่งในไลบรารี JavaScript ที่ได้รับความนิยมสูงสุด บทความนี้จะพาคุณทำความรู้จักกับ React ตั้งแต่พื้นฐาน ไปจนถึงการนำไปใช้งานจริง เหมาะสำหรับทั้งผู้เริ่มต้น และ ผู้ที่ต้องการทบทวนความรู้
  • ★
    ​React คืออะไร
React คือ ไลบรารี JavaScript สำหรับสร้างส่วนติดต่อผู้ใช้ (UI) ที่พัฒนาโดย Facebook โดยมีลักษณะเด่นคือ:
- ใช้แนวคิด Component-Based Architecture
- มี Virtual DOM สำหรับเพิ่มประสิทธิภาพการแสดงผล
- ใช้ JSX สำหรับเขียนโค้ดที่ผสมผสานระหว่าง HTML และ JavaScript
- เป็น Single Page Application (SPA) Framework
  • ★
    ​React ทำงานอย่างไร
1) สร้าง Component - แบ่ง UI เป็นส่วนย่อยๆ
2) Render ไปยัง DOM - แสดงผลบนเบราว์เซอร์
3) จัดการ State - ควบคุมข้อมูล และ การเปลี่ยนแปลง
4) รับการอัปเดต - เมื่อมีข้อมูลเปลี่ยนแปลง
5) Re-render - แสดงผลเฉพาะส่วนที่เปลี่ยนแปลง
☆ Virtual DOM
React สร้าง Virtual DOM (สำเนาของ DOM จริง) เพื่อ:
- เปรียบเทียบการเปลี่ยนแปลง (Diffing Algorithm)
- อัปเดตเฉพาะส่วนที่จำเป็น (Efficient Reconciliation)
- ลดการทำงานกับ DOM จริงที่ใช้ทรัพยากรสูง
  • ★
    ​ประเภทของ React
1) แบ่งตามขนาด
- Small Scale : เว็บไซต์ขนาดเล็ก (Portfolio, Landing Page)
- Medium Scale : เว็บแอปพลิเคชัน (E-commerce, Blog)
- Large Scale : แอปพลิเคชันระดับองค์กร (Social Media, SaaS)
2) แบ่งตามสถาปัตยกรรม
- CSR (Client-Side Rendering) : แสดงผลฝั่งไคลเอนต์ทั้งหมด
- SSR (Server-Side Rendering) : แสดงผลจากเซิร์ฟเวอร์ (Next.js)
- SSG (Static Site Generation) : เตรียมหน้าเว็บล่วงหน้า (Gatsby)
  • ★
    ​ประโยชน์
✅ การเขียนโค้ดแบบ Reusable Components
✅ ประสิทธิภาพสูงด้วย Virtual DOM
✅ เรียนรู้ครั้งเดียว เขียนได้ทุกที่ (Web, Mobile, Desktop)
✅ ระบบ Ecosystem ที่แข็งแกร่ง (เครื่องมือ และ ไลบรารีเสริมมากมาย)
✅ เหมาะสำหรับการทำงานเป็นทีม
✅ รองรับทั้ง CSR, SSR และ SSG
  • ★
    ​ ตัวอย่างการใช้งาน
1) การสร้าง Component พื้นฐาน
```jsx
import React from 'react';
function Greeting(props) {
return <h1>Hello, {props.name}!</h1>;
}
export default Greeting;
```
2) การใช้ State
```jsx
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
```
3) การใช้ Effect
```jsx
import React, { useState, useEffect } from 'react';
function Example() {
const [data, setData] = useState(null);
useEffect(() => {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => setData(data));
}, []); // ทำงานครั้งเดียวเมื่อ Component ถูกสร้าง
return (
<div>
{data ? <p>{data.message}</p> : <p>Loading...</p>}
</div>
);
}
```
  • ★
    ​เครื่องมือที่ใช้ร่วมกับ React
🛠️ Create React App : สร้างโปรเจค React เบื้องต้น
🛠️ Next.js : Framework สำหรับ Server-Side Rendering
🛠️ React Router : จัดการ Routing
🛠️ Redux : จัดการ State ระดับแอปพลิเคชัน
🛠️ Material-UI : ชุด Component UI สำเร็จรูป
2
✏️ Shoper Gamer
>> https://shopergamer.vercel.app/
  • ✓
    ​Frontend คืออะไร 👇
  • ✓
    ​React เป็น Library หรือ Framework 👇
Credit :
👇
  • ●
    ​https://react.dev/
  • ●
    ​https://www.borntodev.com/2020/05/15/react-101/
  • ●
    ​https://www.blockdit.com/posts/5e0184c01394220cf67ddf59
  • ●
    ​https://tinyurl.com/bdfcek8x
โฆษณา