React.js คืออ่ะไร

แน่นอนครับ! มาดูพื้นฐานของ React.js กันแบบเข้าใจง่าย พร้อมตัวอย่างโค้ดสำหรับมือใหม่ที่อยากเริ่มต้นพัฒนาเว็บแอปพลิเคชันด้วย React 🎯

---

⚛️ React.js คืออะไร?

React.js เป็น JavaScript library ที่ใช้สร้าง User Interface (UI) โดยเฉพาะสำหรับเว็บแอปพลิเคชันที่มีความซับซ้อนและต้องการการตอบสนองแบบ real-time

- พัฒนาโดย Facebook

- ใช้แนวคิด Component-based (แบ่ง UI เป็นส่วนย่อย ๆ)

- ทำงานแบบ Single Page Application (SPA)

---

🛠️ สิ่งที่ควรรู้ก่อนเริ่ม React

- HTML & CSS: ใช้ JSX ซึ่งคล้าย HTML

- JavaScript (ES6+): ใช้ฟีเจอร์ใหม่ เช่น arrow functions, destructuring

- Node.js & npm: ใช้สำหรับติดตั้งและรันโปรเจกต์

---

🚀 วิธีเริ่มต้นใช้งาน React

1. ติดตั้ง Node.js และ npm

ดาวน์โหลดจาก nodejs.org

2. สร้างโปรเจกต์ React

`bash

npx create-react-app my-app

cd my-app

npm start

`

จะเปิดเว็บที่ http://localhost:3000

---

🧩 โครงสร้างโปรเจกต์

`

my-app/

├── public/

│ └── index.html

├── src/

│ ├── App.js

│ └── index.js

`

- index.js: จุดเริ่มต้นของแอป

- App.js: Component หลักของแอป

---

🧪 ตัวอย่าง Component

`jsx

// App.js

function App() {

  return (

    <div>

      <h1>สวัสดีจาก React!</h1>

      <p>นี่คือเว็บแอปแรกของคุณ</p>

    </div>

  );

}

export default App;

`

---

🧠 คำศัพท์สำคัญ

| คำศัพท์ | ความหมาย |

|---------|-----------|

| JSX | JavaScript + XML ใช้เขียน UI |

| Component | ส่วนย่อยของ UI ที่ใช้ซ้ำได้ |

| Props | ข้อมูลที่ส่งเข้า Component |

| State | ข้อมูลภายใน Component ที่เปลี่ยนแปลงได้ |

---

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

- Designil: React คืออะไร

- BorntoDev: React เบื้องต้น

- CodingGun: React คืออะไร

---

อยากให้ผมสอนเรื่องไหนต่อ เช่น useState, props, หรือ การจัดการ event ก็ถามมาได้เลยครับ 😊