สื่อการเรียนการสอนพิวเตอร์และเทคโนโลยีเบื้องต้น

บทนำ

React เป็นไลบรารี JavaScript ที่ได้รับความนิยมสูงสำหรับการสร้าง user interfaces โดยเฉพาะอย่างยิ่งสำหรับเว็บแอปพลิเคชันที่มีความซับซ้อน บทเรียนนี้จะพาคุณเรียนรู้พื้นฐานการใช้งาน React ตั้งแต่การติดตั้ง การสร้างคอมโพเนนต์ ไปจนถึงการจัดการสถานะและการเชื่อมต่อกับ API

หัวข้อที่ครอบคลุม

• การติดตั้งและตั้งค่าโปรเจกต์ React ด้วย Create React App
• การสร้างและใช้งาน React Components
• การจัดการ State และ Props
• การจัดการเหตุการณ์ (Event Handling)
• การใช้ React Hooks เช่น useState และ useEffect
• การเชื่อมต่อกับ API และการดึงข้อมูลแบบอะซิงโครนัส
• การจัดการเส้นทางด้วย React Router
• การปรับแต่งและจัดการสไตล์ใน React
• การทดสอบและดีบักแอปพลิเคชัน React
• การเพิ่มประสิทธิภาพและการปรับแต่งแอป React

ตัวอย่างโค้ดเบื้องต้น

import React, { useState } from 'react';

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

  return (
    <div className="p-4 bg-gray-700 rounded-lg text-white">
      <h1 className="text-2xl mb-4">ตัวนับ: {count}</h1>
      <button
        className="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded"
        onClick={() => setCount(count + 1)}
      >
        เพิ่ม
      </button>
      <button
        className="bg-red-600 hover:bg-red-700 px-4 py-2 rounded ml-2"
        onClick={() => setCount(count - 1)}
      >
        ลด
      </button>
    </div>
  );
}

export default Counter;

การติดตั้งและตั้งค่าโปรเจกต์ React

คุณสามารถเริ่มต้นโปรเจกต์ React ได้อย่างรวดเร็วด้วยคำสั่ง Create React App:

npx create-react-app my-app
cd my-app
npm start

คำสั่งเหล่านี้จะสร้างโปรเจกต์ React ใหม่และเปิดเซิร์ฟเวอร์สำหรับพัฒนา ที่คุณสามารถดูแอปพลิเคชันในเบราว์เซอร์ได้ทันที

การจัดการ State และ Props

State คือข้อมูลที่เปลี่ยนแปลงได้ภายในคอมโพเนนต์ ส่วน Props คือข้อมูลที่ส่งผ่านจากคอมโพเนนต์แม่ไปยังคอมโพเนนต์ลูก การเข้าใจและใช้งาน State และ Props อย่างถูกต้องเป็นหัวใจสำคัญของ React

function Greeting(props) {
  return <h1>สวัสดี, {props.name}!</h1>;
}

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

การเชื่อมต่อกับ API

React สามารถดึงข้อมูลจาก API ภายนอกได้โดยใช้ฟังก์ชัน useEffect ร่วมกับ fetch หรือ axios

import React, { useState, useEffect } from 'react';

function DataFetcher() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(json => setData(json));
  }, []);

  if (!data) return <div>กำลังโหลดข้อมูล...</div>;

  return <div>ข้อมูล: {JSON.stringify(data)}</div>;
}