แนวทางเขียนโค้ด ReactJS แบบ Production-ready

การเขียนโค้ด ReactJS ให้พร้อมใช้งานจริงในระดับ Production นั้นมีแนวทางและหลักปฏิบัติหลายอย่างที่คุณควรคำนึงถึง เพื่อให้ได้แอปพลิเคชันที่มีประสิทธิภาพ, บำรุงรักษาง่าย, และปรับขนาดได้ดี ในบทความนี้ผมจะมาแนะนำแนวทางที่สำคัญพร้อมตัวอย่างให้กับทุกคนได้เข้าใจกันครับ

1. โครงสร้างโปรเจกต์ที่ชัดเจน (Clear Project Structure)

การจัดระเบียบไฟล์และโฟลเดอร์ให้เป็นระเบียบจะช่วยให้คุณและทีมทำงานได้ง่ายขึ้น

src/components: เก็บ UI Components ที่นำมาใช้ซ้ำได้ (reusable UI components) เช่น Button, Input, Card

src/pages: เก็บ Page Components ซึ่งเป็นหน้าหลักของแอปพลิเคชัน (views/routes)

src/services: เก็บโค้ดที่เกี่ยวข้องกับการเรียก API หรือการจัดการข้อมูลภายนอก

src/utils: เก็บฟังก์ชันยูทิลิตี้ทั่วไปที่ใช้บ่อย เช่น การจัดรูปแบบวันที่, การตรวจสอบความถูกต้อง

src/hooks: เก็บ Custom Hooks ที่ใช้ Logic ซ้ำๆ กัน

src/context หรือ src/store: เก็บไฟล์ที่เกี่ยวข้องกับการจัดการ State (เช่น React Context API, Redux, Zustand)

src/assets: เก็บรูปภาพ, ไอคอน, หรือไฟล์ static อื่นๆ

src/styles: เก็บไฟล์ CSS/SCSS ทั่วไปหรือไฟล์ Global Styles

ตัวอย่างโครงสร้าง:

Plaintext

src/
├── components/
│   ├── Button/
│   │   ├── Button.js
│   │   └── Button.module.css
│   ├── Card/
│   │   ├── Card.js
│   │   └── Card.module.css
│   └── index.js (Exporting all components)
├── pages/
│   ├── HomePage.js
│   └── ProductPage.js
├── services/
│   └── api.js
├── utils/
│   └── helpers.js
├── hooks/
│   └── useAuth.js
├── context/
│   └── AuthContext.js
├── assets/
│   ├── images/
│   └── icons/
├── styles/
│   └── global.css
├── App.js
├── index.js

src/
├── components/
│   ├── Button/
│   │   ├── Button.js
│   │   └── Button.module.css
│   ├── Card/
│   │   ├── Card.js
│   │   └── Card.module.css
│   └── index.js (Exporting all components)
├── pages/
│   ├── HomePage.js
│   └── ProductPage.js
├── services/
│   └── api.js
├── utils/
│   └── helpers.js
├── hooks/
│   └── useAuth.js
├── context/
│   └── AuthContext.js
├── assets/
│   ├── images/
│   └── icons/
├── styles/
│   └── global.css
├── App.js
├── index.js

2. การจัดการ State ที่มีประสิทธิภาพ (Efficient State Management)

สำหรับการจัดการ State ที่ซับซ้อนขึ้น ควรใช้ไลบรารีหรือ Context API

Context API: เหมาะสำหรับ State ที่ต้องการเข้าถึงได้ทั่วทั้งแอปพลิเคชัน แต่ไม่ซับซ้อนมากนัก เช่น ข้อมูลผู้ใช้, Theme ของแอปพลิเคชัน

Redux/Zustand/Jotai: เหมาะสำหรับ State ที่ซับซ้อน มีการเปลี่ยนแปลงบ่อย หรือต้องการจัดการ Logic ที่ซับซ้อน เช่น ตะกร้าสินค้า, การจัดการฟอร์มที่มีหลายขั้นตอน

React Query/SWR: เป็นไลบรารีที่เน้นการจัดการ Server State โดยเฉพาะ ทำให้การ Fetch, Cache, Synchronize และ Update Data จาก API เป็นเรื่องง่ายและมีประสิทธิภาพ

ตัวอย่างการใช้ React Query:

JavaScript

// services/api.js
import axios from 'axios';

const api = axios.create({
  baseURL: 'https://api.example.com',
});

export const getProducts = async () => {
  const response = await api.get('/products');
  return response.data;
};

// pages/ProductPage.js
import React from 'react';
import { useQuery } from '@tanstack/react-query'; // หรือ '@tanstack/react-query' ในเวอร์ชันใหม่กว่า
import { getProducts } from '../services/api';

function ProductPage() {
  const { data: products, isLoading, error } = useQuery({
    queryKey: ['products'],
    queryFn: getProducts
  });

  if (isLoading) return <div>Loading products...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      <h1>Products</h1>
      <ul>
        {products.map(product => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default ProductPage;

// services/api.js
import axios from 'axios';

const api = axios.create({
  baseURL: 'https://api.example.com',
});

export const getProducts = async () => {
  const response = await api.get('/products');
  return response.data;
};

// pages/ProductPage.js
import React from 'react';
import { useQuery } from '@tanstack/react-query'; // หรือ '@tanstack/react-query' ในเวอร์ชันใหม่กว่า
import { getProducts } from '../services/api';

function ProductPage() {
  const { data: products, isLoading, error } = useQuery({
    queryKey: ['products'],
    queryFn: getProducts
  });

  if (isLoading) return <div>Loading products...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      <h1>Products</h1>
      <ul>
        {products.map(product => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default ProductPage;

3. การเขียน Components ที่มีประสิทธิภาพ (Performant Components)

Pure Components/React.memo: ใช้ React.memo (สำหรับ Functional Components) หรือ PureComponent (สำหรับ Class Components) เพื่อป้องกันการ Re-render ที่ไม่จำเป็น เมื่อ Props หรือ State ไม่มีการเปลี่ยนแปลง

useCallback และ useMemo:

useCallback: ใช้สำหรับ Memoize ฟังก์ชัน เพื่อไม่ให้ฟังก์ชันถูกสร้างใหม่ทุกครั้งที่ Component Re-render ซึ่งมีประโยชน์มากเมื่อส่งฟังก์ชันเป็น Props ไปยัง Child Component ที่ใช้ React.memo
useMemo: ใช้สำหรับ Memoize ค่าที่คำนวณซับซ้อน เพื่อให้ค่าเหล่านั้นถูกคำนวณใหม่เมื่อ Dependencies เปลี่ยนแปลงเท่านั้น

Lazy Loading / Code Splitting: ใช้ React.lazy และ Suspense เพื่อโหลด Component หรือ Page ที่จำเป็นเมื่อถึงเวลาที่ต้องการใช้งานเท่านั้น (ลด Initial Load Time)

ตัวอย่าง React.memo และ useCallback:

JavaScript

// components/MyButton.js
import React from 'react';

const MyButton = React.memo(({ onClick, label }) => {
  console.log('MyButton rendered');
  return <button onClick={onClick}>{label}</button>;
});

export default MyButton;

// pages/ExamplePage.js
import React, { useState, useCallback } from 'react';
import MyButton from '../components/MyButton';

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

  // Function will not be recreated on every render unless 'count' changes
  const handleClick = useCallback(() => {
    setCount(prevCount => prevCount + 1);
  }, []); // Empty dependency array means it's created once

  return (
    <div>
      <h1>Count: {count}</h1>
      <MyButton onClick={handleClick} label="Increment" />
      <input type="text" onChange={(e) => console.log(e.target.value)} />
    </div>
  );
}

export default ExamplePage;

// components/MyButton.js
import React from 'react';

const MyButton = React.memo(({ onClick, label }) => {
  console.log('MyButton rendered');
  return <button onClick={onClick}>{label}</button>;
});

export default MyButton;

// pages/ExamplePage.js
import React, { useState, useCallback } from 'react';
import MyButton from '../components/MyButton';

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

  // Function will not be recreated on every render unless 'count' changes
  const handleClick = useCallback(() => {
    setCount(prevCount => prevCount + 1);
  }, []); // Empty dependency array means it's created once

  return (
    <div>
      <h1>Count: {count}</h1>
      <MyButton onClick={handleClick} label="Increment" />
      <input type="text" onChange={(e) => console.log(e.target.value)} />
    </div>
  );
}

export default ExamplePage;

4. การจัดการ Routing (Routing Management)

ใช้ไลบรารี เช่น React Router DOM ในการจัดการเส้นทางของแอปพลิเคชัน

JavaScript

// App.js
import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import HomePage from './pages/HomePage';
import ProductPage from './pages/ProductPage';
import NotFoundPage from './pages/NotFoundPage';

function App() {
  return (
    <Router>
      <nav>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/products">Products</Link></li>
        </ul>
      </nav>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/products" element={<ProductPage />} />
        <Route path="*" element={<NotFoundPage />} /> {/* Catch-all for 404 */}
      </Routes>
    </Router>
  );
}

export default App;

// App.js
import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import HomePage from './pages/HomePage';
import ProductPage from './pages/ProductPage';
import NotFoundPage from './pages/NotFoundPage';

function App() {
  return (
    <Router>
      <nav>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/products">Products</Link></li>
        </ul>
      </nav>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/products" element={<ProductPage />} />
        <Route path="*" element={<NotFoundPage />} /> {/* Catch-all for 404 */}
      </Routes>
    </Router>
  );
}

export default App;

5. การทดสอบ (Testing)

การเขียน Unit Test และ Integration Test เป็นสิ่งสำคัญเพื่อให้มั่นใจว่าโค้ดทำงานถูกต้องและไม่เกิด Regression เมื่อมีการเปลี่ยนแปลง

Jest: เป็น Test Runner และ Assertion Library ที่นิยมใช้กับ React

React Testing Library: เน้นการทดสอบ Component ในลักษณะที่ผู้ใช้โต้ตอบกับมัน (User-centric testing) ทำให้มั่นใจได้ว่า Component ทำงานได้จริงในมุมมองของผู้ใช้

ตัวอย่าง Unit Test ด้วย React Testing Library และ Jest:

JavaScript

// components/Button/Button.js
import React from 'react';

function Button({ onClick, children }) {
  return (
    <button onClick={onClick}>
      {children}
    </button>
  );
}

export default Button;

// components/Button/Button.test.js
import { render, screen, fireEvent } from '@testing-library/react';
import Button from './Button';

test('renders button with correct text', () => {
  render(<Button>Click Me</Button>);
  const buttonElement = screen.getByText(/click me/i);
  expect(buttonElement).toBeInTheDocument();
});

test('calls onClick prop when clicked', () => {
  const handleClick = jest.fn(); // Mock function
  render(<Button onClick={handleClick}>Click Me</Button>);
  const buttonElement = screen.getByText(/click me/i);
  fireEvent.click(buttonElement);
  expect(handleClick).toHaveBeenCalledTimes(1);
});

// components/Button/Button.js
import React from 'react';

function Button({ onClick, children }) {
  return (
    <button onClick={onClick}>
      {children}
    </button>
  );
}

export default Button;

// components/Button/Button.test.js
import { render, screen, fireEvent } from '@testing-library/react';
import Button from './Button';

test('renders button with correct text', () => {
  render(<Button>Click Me</Button>);
  const buttonElement = screen.getByText(/click me/i);
  expect(buttonElement).toBeInTheDocument();
});

test('calls onClick prop when clicked', () => {
  const handleClick = jest.fn(); // Mock function
  render(<Button onClick={handleClick}>Click Me</Button>);
  const buttonElement = screen.getByText(/click me/i);
  fireEvent.click(buttonElement);
  expect(handleClick).toHaveBeenCalledTimes(1);
});

6. การจัดการ Error (Error Handling)

Error Boundaries: ใช้สำหรับจับข้อผิดพลาดใน UI Tree ที่ไม่ได้เกิดขึ้นใน Event Handlers ของ React Components เพื่อป้องกันไม่ให้แอปพลิเคชันพังทั้งหมด

JavaScript

// components/ErrorBoundary.js
import React from 'react';

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    console.error("Uncaught error:", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

// App.js
import React from 'react';
import ErrorBoundary from './components/ErrorBoundary';
import MyComponentThatMightFail from './components/MyComponentThatMightFail';

function App() {
  return (
    <ErrorBoundary>
      <MyComponentThatMightFail />
    </ErrorBoundary>
  );
}

// components/ErrorBoundary.js
import React from 'react';

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    console.error("Uncaught error:", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

// App.js
import React from 'react';
import ErrorBoundary from './components/ErrorBoundary';
import MyComponentThatMightFail from './components/MyComponentThatMightFail';

function App() {
  return (
    <ErrorBoundary>
      <MyComponentThatMightFail />
    </ErrorBoundary>
  );
}

Try-catch blocks: ใช้ในการจัดการ Error ที่เกิดขึ้นในการเรียก API หรือฟังก์ชัน Asynchronous

JavaScript

async function fetchData() {
  try {
    const response = await fetch('/api/data');
    const data = await response.json();
    // Process data
  } catch (error) {
    console.error('Failed to fetch data:', error);
    // Show error message to user
  }
}

async function fetchData() {
  try {
    const response = await fetch('/api/data');
    const data = await response.json();
    // Process data
  } catch (error) {
    console.error('Failed to fetch data:', error);
    // Show error message to user
  }
}

7. การเพิ่มประสิทธิภาพ (Performance Optimization)

นอกจากการใช้ React.memo, useCallback, useMemo และ Lazy Loading แล้ว ยังมีเทคนิคอื่นๆ:

Virtualization/Windowing: สำหรับ List ที่มีข้อมูลจำนวนมาก เช่น React-window หรือ React-virtualized เพื่อ Render เฉพาะ Item ที่มองเห็นอยู่ใน Viewport เท่านั้น
ลดขนาด Bundle Size: ใช้เครื่องมือเช่น Webpack Bundle Analyzer เพื่อดูว่าส่วนใดของโค้ดที่มีขนาดใหญ่และพิจารณาทำการ Code Splitting หรือลบ Dependencies ที่ไม่จำเป็นออก
Optimize Images: ใช้รูปภาพที่มีขนาดเหมาะสมและ Optimize สำหรับ Web (เช่น WebP format)
ใช้ CDN: สำหรับ Static Assets ต่างๆ

8. การจัดรูปแบบโค้ดและ Linting (Code Formatting & Linting)

เพื่อให้โค้ดมีความสม่ำเสมอและลดข้อผิดพลาด

ESLint: สำหรับการวิเคราะห์โค้ดและแจ้งเตือนข้อผิดพลาดหรือรูปแบบโค้ดที่ไม่ตรงตาม Standard
Prettier: สำหรับการจัดรูปแบบโค้ดอัตโนมัติ

ตัวอย่าง .eslintrc.js (การตั้งค่า ESLint เบื้องต้น):

JavaScript

module.exports = {
  parser: '@babel/eslint-parser',
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:react-hooks/recommended',
    'plugin:jsx-a11y/recommended', // Accessibility rules
    'prettier' // Must be last to override other formatting rules
  ],
  plugins: [
    'react',
    'react-hooks',
    'jsx-a11y'
  ],
  env: {
    browser: true,
    node: true,
    es2021: true,
    jest: true // If using Jest
  },
  settings: {
    react: {
      version: 'detect' // Automatically detect React version
    }
  },
  rules: {
    // Custom rules or overrides
    'react/prop-types': 'off', // Disable prop-types validation if using TypeScript or not needed
    'no-unused-vars': ['warn', { 'argsIgnorePattern': '^_' }], // Warn for unused vars, ignore vars starting with _
  }
};

module.exports = {
  parser: '@babel/eslint-parser',
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:react-hooks/recommended',
    'plugin:jsx-a11y/recommended', // Accessibility rules
    'prettier' // Must be last to override other formatting rules
  ],
  plugins: [
    'react',
    'react-hooks',
    'jsx-a11y'
  ],
  env: {
    browser: true,
    node: true,
    es2021: true,
    jest: true // If using Jest
  },
  settings: {
    react: {
      version: 'detect' // Automatically detect React version
    }
  },
  rules: {
    // Custom rules or overrides
    'react/prop-types': 'off', // Disable prop-types validation if using TypeScript or not needed
    'no-unused-vars': ['warn', { 'argsIgnorePattern': '^_' }], // Warn for unused vars, ignore vars starting with _
  }
};

9. TypeScript (Optional but Recommended)

การใช้ TypeScript จะช่วยเพิ่ม Type Safety ให้กับโค้ด ลดข้อผิดพลาดที่อาจเกิดขึ้นในระหว่าง Development และทำให้การ Refactor โค้ดทำได้ง่ายขึ้น โดยเฉพาะในโปรเจกต์ขนาดใหญ่

JavaScript

// components/Button/Button.tsx
import React from 'react';

interface ButtonProps {
  onClick: () => void;
  children: React.ReactNode;
  type?: 'button' | 'submit' | 'reset';
  disabled?: boolean;
}

const Button: React.FC<ButtonProps> = ({ onClick, children, type = 'button', disabled = false }) => {
  return (
    <button type={type} onClick={onClick} disabled={disabled}>
      {children}
    </button>
  );
};

export default Button;

// components/Button/Button.tsx
import React from 'react';

interface ButtonProps {
  onClick: () => void;
  children: React.ReactNode;
  type?: 'button' | 'submit' | 'reset';
  disabled?: boolean;
}

const Button: React.FC<ButtonProps> = ({ onClick, children, type = 'button', disabled = false }) => {
  return (
    <button type={type} onClick={onClick} disabled={disabled}>
      {children}
    </button>
  );
};

export default Button;

10. การจัดการ Environmental Variables

ใช้ .env ไฟล์เพื่อจัดการค่า Configuration ต่างๆ ที่แตกต่างกันไปในแต่ละ Environment (Development, Staging, Production)

REACT_APP_API_URL=http://localhost:3001/api (สำหรับ Development)
REACT_APP_API_URL=https://api.production.com/api (สำหรับ Production)

สรุปแนวทางสำหรับ Production-Ready ReactJS

การสร้างแอปพลิเคชัน ReactJS ที่พร้อมใช้งานจริงในระดับ Production นั้นต้องอาศัยการวางแผนและปฏิบัติที่ดีในหลายๆ ด้าน เริ่มตั้งแต่โครงสร้างโปรเจกต์ที่ชัดเจน, การจัดการ State ที่มีประสิทธิภาพ, การเขียน Component ที่คำนึงถึง Performance, การทดสอบที่ครอบคลุม, การจัดการ Error, การจัดรูปแบบโค้ด และอาจรวมถึงการใช้ TypeScript ครับ

การนำแนวทางเหล่านี้ไปปรับใช้จะช่วยให้คุณสามารถพัฒนาแอปพลิเคชัน ReactJS ที่แข็งแกร่ง, บำรุงรักษาง่าย และพร้อมสำหรับการขยายในอนาคตได้ครับ

แนวทางเขียนโค้ด ReactJS แบบ Production-ready

1. โครงสร้างโปรเจกต์ที่ชัดเจน (Clear Project Structure)

2. การจัดการ State ที่มีประสิทธิภาพ (Efficient State Management)

3. การเขียน Components ที่มีประสิทธิภาพ (Performant Components)

4. การจัดการ Routing (Routing Management)

5. การทดสอบ (Testing)

6. การจัดการ Error (Error Handling)

7. การเพิ่มประสิทธิภาพ (Performance Optimization)

8. การจัดรูปแบบโค้ดและ Linting (Code Formatting & Linting)

9. TypeScript (Optional but Recommended)

10. การจัดการ Environmental Variables

สรุปแนวทางสำหรับ Production-Ready ReactJS

คำแนะนำการฝึกเขียนโปรแกรมยุคใหม่

เหตุผลที่ Dev เลือกใช้ MacBook

React 19 ฟีเจอร์ใหม่และการปรับปรุงที่สำคัญ

ABOUT US

FOLLOW US