คู่มือเริ่มต้น React: สร้างส่วนติดต่อผู้ใช้แรกของคุณตั้งแต่เริ่มต้น

React คือไลบรารี JavaScript สำหรับสร้างส่วนติดต่อผู้ใช้ (User Interface) พัฒนาและดูแลรักษาโดย Facebook และได้กลายเป็นหนึ่งในเครื่องมือที่ได้รับความนิยมมากที่สุดในการพัฒนาส่วนหน้า (Frontend) คู่มือนี้จะนำคุณไปทีละขั้นตอนตั้งแต่เริ่มต้น เพื่อทำความเข้าใจแนวคิดพื้นฐานของ React และสร้างส่วนติดต่อผู้ใช้แบบง่ายๆ

ทำไมต้องเลือก React?

React มีข้อดีดังนี้:

• Componentization (การแบ่งส่วนประกอบ): React แบ่งส่วนติดต่อผู้ใช้ออกเป็นส่วนประกอบ (Component) ที่เป็นอิสระและนำกลับมาใช้ใหม่ได้ ทำให้โค้ดบำรุงรักษาและเข้าใจได้ง่ายขึ้น
• Declarative (เชิงประกาศ): React ใช้รูปแบบการเขียนโปรแกรมเชิงประกาศ ซึ่งหมายความว่าคุณเพียงแค่อธิบายสิ่งที่คุณต้องการนำเสนอ React จะจัดการการอัปเดตและการเรนเดอร์โดยอัตโนมัติ
• Efficient (มีประสิทธิภาพ): React ใช้ Virtual DOM และอัลกอริทึม diff ที่ชาญฉลาด ซึ่งสามารถอัปเดตส่วนติดต่อผู้ใช้ได้อย่างมีประสิทธิภาพ ลดการเรนเดอร์ที่ไม่จำเป็น
• Large Community Support (การสนับสนุนจากชุมชนขนาดใหญ่): React มีชุมชนขนาดใหญ่และระบบนิเวศที่สมบูรณ์ คุณสามารถค้นหาบทช่วยสอน ไลบรารี และเครื่องมือมากมายเพื่อช่วยคุณในการพัฒนา
• Cross-Platform Capability (ความสามารถข้ามแพลตฟอร์ม): React Native ช่วยให้คุณสามารถใช้ React เพื่อพัฒนาแอปพลิเคชันมือถือแบบเนทีฟ (iOS และ Android) ได้

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

ก่อนเริ่มต้น คุณต้องแน่ใจว่าคุณได้ติดตั้งเครื่องมือต่อไปนี้บนคอมพิวเตอร์ของคุณ:

• Node.js: Node.js คือสภาพแวดล้อมรันไทม์ JavaScript สำหรับเรียกใช้เครื่องมือพัฒนา React คุณสามารถดาวน์โหลดและติดตั้งได้จาก https://nodejs.org/
• npm หรือ yarn: npm (Node Package Manager) และ yarn คือตัวจัดการแพ็กเกจ JavaScript สำหรับติดตั้งและจัดการ dependencies (ส่วนประกอบที่ต้องพึ่งพา) ของ React โดยปกติ npm จะถูกติดตั้งพร้อมกับ Node.js คุณสามารถติดตั้ง yarn ได้จาก https://yarnpkg.com/

สร้างแอปพลิเคชัน React แรกของคุณ

เราจะใช้ create-react-app เพื่อสร้างโปรเจ็กต์ React อย่างรวดเร็ว

1. สร้างโดยใช้ npm:

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

2. สร้างโดยใช้ yarn:

   yarn create react-app my-first-react-app
   cd my-first-react-app
   yarn start
   

หลังจากรันคำสั่งข้างต้น create-react-app จะสร้างไดเร็กทอรีชื่อ my-first-react-app โดยอัตโนมัติ และเริ่มต้นโปรเจ็กต์ React ในไดเร็กทอรีนั้น คำสั่ง npm start หรือ yarn start จะเริ่มเซิร์ฟเวอร์พัฒนา คุณสามารถเข้าถึง http://localhost:3000 ในเบราว์เซอร์ของคุณเพื่อดูแอปพลิเคชัน React ของคุณ

โครงสร้างไดเร็กทอรี

โครงสร้างไดเร็กทอรีของโปรเจ็กต์ที่สร้างโดย create-react-app มีดังนี้:

my-first-react-app/
├── node_modules/         # ไลบรารีที่โปรเจ็กต์ใช้เป็น dependency
├── public/               # แหล่งข้อมูล static (เช่น ไฟล์ HTML)
│   ├── index.html        # ไฟล์ HTML หลักของแอปพลิเคชัน
│   └── ...
├── src/                  # โค้ด React
│   ├── App.css           # สไตล์ CSS ของคอมโพเนนต์ App
│   ├── App.js            # คอมโพเนนต์ App
│   ├── App.test.js       # ไฟล์ทดสอบของคอมโพเนนต์ App
│   ├── index.css         # สไตล์ CSS ทั่วโลก
│   ├── index.js          # ไฟล์ JavaScript หลักของแอปพลิเคชัน
│   ├── logo.svg          # โลโก้ React
│   └── ...
├── .gitignore            # ไฟล์ที่ Git จะไม่สนใจ
├── package.json          # ข้อมูล metadata และ dependency ของโปรเจ็กต์
├── README.md             # เอกสารอธิบายโปรเจ็กต์
└── yarn.lock             # ไฟล์ล็อคเวอร์ชัน dependency (ถ้าใช้ yarn)

ทำความเข้าใจ React Component

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

ในไฟล์ src/App.js คุณจะเห็นคอมโพเนนต์ App เริ่มต้น:

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    
      
        
        
          Edit `src/App.js` and save to reload.
        

        [
          Learn React
        ](https://reactjs.org)
      
    
  );
}

export default App;

คำอธิบายโค้ด:

• import React from 'react'; นำเข้าไลบรารี React
• function App() { ... } กำหนดฟังก์ชันคอมโพเนนต์ชื่อ App
• return ( ... ) ส่งกลับนิพจน์ JSX ที่อธิบายสิ่งที่คอมโพเนนต์ควรเรนเดอร์
• export default App; ส่งออกคอมโพเนนต์ App เพื่อให้สามารถใช้งานในไฟล์อื่นได้

JSX (JavaScript XML)

JSX คือส่วนขยายไวยากรณ์ JavaScript ที่ช่วยให้คุณเขียนโค้ดที่คล้ายกับ HTML ในโค้ด JavaScript ของคุณ ในตัวอย่างข้างต้น ... คือนิพจน์ JSX โค้ด JSX จะถูกแปลงเป็นโค้ด JavaScript มาตรฐานโดย Babel เพื่อให้เบราว์เซอร์สามารถเข้าใจได้

แก้ไขคอมโพเนนต์ App

มาแก้ไขคอมโพเนนต์ App เพื่อสร้างตัวนับอย่างง่าย

import React, { useState } from 'react';
import './App.css';

function App() {
  const [count, setCount] = useState(0);
``` const increment = () => {
 setCount(count + 1);
 };

 const decrement = () => {
 setCount(count - 1);
 };

 return (
 
 

 # ตัวนับ

 ปัจจุบัน: {count}

 +
 -
 
 );
}

export default App;

คำอธิบายการแก้ไข:

• import React, { useState } from 'react'; นำเข้า useState Hook useState คือ React Hook ที่ใช้สำหรับเพิ่มสถานะในฟังก์ชันคอมโพเนนต์
• const [count, setCount] = useState(0); ใช้ useState Hook สร้างตัวแปรสถานะชื่อ count และกำหนดค่าเริ่มต้นเป็น 0 setCount คือฟังก์ชันที่ใช้สำหรับอัปเดตสถานะ count
• const increment = () => { setCount(count + 1); }; กำหนดฟังก์ชันชื่อ increment ที่ใช้สำหรับเพิ่มค่าสถานะ count ขึ้น 1
• const decrement = () => { setCount(count - 1); }; กำหนดฟังก์ชันชื่อ decrement ที่ใช้สำหรับลดค่าสถานะ count ลง 1
• ปัจจุบัน: {count} แสดงค่าของสถานะ count ในหน้า {count} คือนิพจน์ JSX ที่ใช้สำหรับแทรกตัวแปร JavaScript ในโค้ด JSX
• + และ - สร้างปุ่มสองปุ่ม โดยผูกฟังก์ชัน increment และ decrement ตามลำดับ onClick คือตัวจัดการเหตุการณ์ที่ใช้สำหรับเรียกใช้ฟังก์ชันที่ระบุเมื่อมีการคลิกปุ่ม

หลังจากบันทึกไฟล์ src/App.js เบราว์เซอร์จะรีเฟรชโดยอัตโนมัติ และคุณจะเห็นตัวนับอย่างง่าย การคลิกปุ่ม "+" จะเพิ่มจำนวน และการคลิกปุ่ม "-" จะลดจำนวน

การใช้สไตล์ CSS

คุณสามารถใช้ CSS เพื่อตกแต่งแอป React ของคุณได้ create-react-app รองรับ CSS Modules และไฟล์ CSS ธรรมดา

การใช้ CSS Modules:

CSS Modules ช่วยให้คุณสร้างสไตล์ CSS ที่เป็นอิสระสำหรับแต่ละคอมโพเนนต์ เพื่อหลีกเลี่ยงความขัดแย้งของสไตล์ หากต้องการใช้ CSS Modules ในคอมโพเนนต์ คุณต้องสร้างไฟล์ที่ลงท้ายด้วย .module.css

ตัวอย่างเช่น สร้างไฟล์ชื่อ App.module.css และเพิ่มสไตล์ CSS ต่อไปนี้:

.App {
 text-align: center;
}

.App h1 {
 color: blue;
}

.App button {
 padding: 10px 20px;
 font-size: 16px;
 background-color: lightgreen;
 border: none;
 cursor: pointer;
}

จากนั้นนำเข้า CSS Modules ในไฟล์ src/App.js:

import React, { useState } from 'react';
import styles from './App.module.css'; // นำเข้า CSS Modules

function App() {
 const [count, setCount] = useState(0);
 const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
     {/* ใช้ styles object เพื่ออ้างอิง CSS class */}
      

# ตัวนับ

      จำนวนปัจจุบัน: {count}

      +
      -
    
  );
}

export default App;

การใช้ไฟล์ CSS ธรรมดา:

คุณยังสามารถใช้ไฟล์ CSS ธรรมดาเพื่อกำหนดสไตล์ global ได้ ในไฟล์ src/index.css คุณสามารถกำหนดสไตล์ global ได้

ตัวอย่างเช่น เพิ่ม CSS style ต่อไปนี้:

body {
  font-family: sans-serif;
}

style นี้จะถูกนำไปใช้กับ element body ของทั้ง application

ขั้นตอนต่อไป

ขอแสดงความยินดีด้วย คุณได้สร้าง React application ตัวแรกของคุณเสร็จแล้ว! ต่อไป คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับ React ได้ เช่น:

• Component Communication: เรียนรู้วิธีการสื่อสารระหว่าง component ต่างๆ
• Form Handling: เรียนรู้วิธีการสร้างและจัดการ form
• Routing: เรียนรู้วิธีการใช้ React Router เพื่อสร้าง multi-page application
• Redux หรือ Context API: เรียนรู้วิธีการจัดการ state ของ application
• Hooks: ทำความเข้าใจ React Hooks อย่างลึกซึ้ง เช่น useEffect, useContext เป็นต้น

จำไว้ว่า React เป็นเทคโนโลยีที่ต้องฝึกฝนและเรียนรู้อย่างต่อเนื่อง ขอให้สนุกกับการเรียนรู้!