การใช้งาน Ant Design ในโปรเจกต์ React

การใช้งาน Ant Design ในโปรเจกต์ React

หลังจากที่เราได้ทำความเข้าใจและใช้งาน Material UI ในการสร้าง Reusable Component ไปแล้ว ในบทนี้เราจะมาทำความรู้จักกับ Component Library อีกตัวที่ได้รับความนิยมอย่างมากในวงการ Frontend นั่นก็คือ Ant Design หรือที่เรียกกันสั้นๆ ว่า Antd ครับ Antd เป็น Component Library ที่พัฒนาโดย Ant Financial ซึ่งเป็นบริษัทในเครือ Alibaba Group จุดเด่นของ Antd คือความสวยงามของดีไซน์, Component ที่หลากหลาย และ Documentation ที่ละเอียด

Antd เหมาะสำหรับโปรเจกต์ที่ต้องการ UI ที่ดูทันสมัยและใช้งานง่าย โดยเฉพาะอย่างยิ่งโปรเจกต์ที่ต้องการสร้าง Dashboard หรือ Web Application ที่เน้นการจัดการข้อมูล

ทำไมต้อง Ant Design?

ก่อนที่เราจะไปลงมือใช้งาน Antd จริงๆ เรามาดูกันก่อนว่าทำไม Antd ถึงเป็นตัวเลือกที่น่าสนใจสำหรับโปรเจกต์ React ของเรา:

• ดีไซน์ที่สวยงามและสม่ำเสมอ: Antd มี Design Language ที่ชัดเจน ทำให้ UI ของเราดูเป็นมืออาชีพและสอดคล้องกัน
• Component ที่หลากหลาย: Antd มี Component ให้เลือกใช้งานมากมาย ตั้งแต่ Button, Input, Table ไปจนถึง Modal, Notification และ DatePicker ทำให้เราสามารถสร้าง UI ที่ซับซ้อนได้อย่างรวดเร็ว
• Documentation ที่ละเอียด: Antd มี Documentation ที่ครอบคลุมและใช้งานง่าย ทำให้เราสามารถเรียนรู้วิธีการใช้งาน Component ต่างๆ ได้อย่างรวดเร็ว
• รองรับ TypeScript: Antd รองรับ TypeScript อย่างเต็มรูปแบบ ทำให้เราสามารถเขียนโค้ดที่ปลอดภัยและบำรุงรักษาง่าย
• Community ที่แข็งแกร่ง: Antd มี Community ที่ใหญ่และ active ทำให้เราสามารถขอความช่วยเหลือหรือแลกเปลี่ยนความรู้กับนักพัฒนาคนอื่นๆ ได้

แน่นอนว่าทุก Component Library ก็มีข้อดีข้อเสีย Antd เองก็เช่นกัน ข้อเสียเปรียบเทียบกับ Material UI อาจจะเป็นเรื่องของขนาด bundle ที่อาจจะใหญ่กว่าเล็กน้อย แต่ด้วยประสิทธิภาพของ Browser ในปัจจุบัน และเทคนิคต่างๆ ในการ Optimize ขนาด Bundle (เช่น Tree Shaking) ก็สามารถลดผลกระทบนี้ได้

การติดตั้ง Ant Design

ขั้นตอนแรกในการใช้งาน Antd คือการติดตั้ง Package ลงในโปรเจกต์ React ของเรา สามารถทำได้ง่ายๆ โดยใช้คำสั่ง npm หรือ yarn:

npm install antd
# หรือ
yarn add antd

หลังจากติดตั้งเสร็จแล้ว เราก็ต้อง Import CSS Stylesheet ของ Antd เข้ามาในไฟล์ index.js หรือ App.js ของเรา:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css'; // ไฟล์ CSS ทั่วไปของเรา
import 'antd/dist/reset.css'; // Import Ant Design CSS
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

ใน Code ตัวอย่างด้านบน เราทำการ Import 'antd/dist/reset.css' ซึ่งเป็น Stylesheet ที่จะ Reset Styles ของ HTML Elements ให้มีความสอดคล้องกับ Design System ของ Antd ครับ

การนำเข้า Component ของ Ant Design

เมื่อติดตั้งและ Import CSS เสร็จแล้ว เราก็สามารถเริ่มนำ Component ของ Antd มาใช้งานในโปรเจกต์ React ของเราได้เลยครับ ตัวอย่างเช่น ถ้าเราต้องการใช้ Button Component เราสามารถ Import ได้ดังนี้:

import { Button } from 'antd';

function MyComponent() {
  return (
    <Button type="primary">Click Me</Button>
  );
}

export default MyComponent;

ใน Code ตัวอย่างด้านบน เราทำการ Import Button Component จาก antd Package และนำมาใช้ใน MyComponent ของเรา โดยเรากำหนด type เป็น "primary" ซึ่งจะทำให้ Button มีสีฟ้าตาม Design System ของ Antd

การปรับแต่ง Component ของ Ant Design

Antd อนุญาตให้เราปรับแต่ง Component ต่างๆ ได้หลากหลายวิธี เพื่อให้เข้ากับความต้องการของโปรเจกต์ของเรา วิธีที่ง่ายที่สุดคือการใช้ Props ที่ Antd เตรียมไว้ให้ ตัวอย่างเช่น เราสามารถเปลี่ยนขนาดของ Button ได้โดยใช้ size Prop:

import { Button } from 'antd';

function MyComponent() {
  return (
    <div>
      <Button size="small">Small</Button>
      <Button size="middle">Middle</Button>
      <Button size="large">Large</Button>
    </div>
  );
}

export default MyComponent;

นอกจากนี้ เรายังสามารถปรับแต่ง Styles ของ Component ได้โดยใช้ style Prop ซึ่งรับเป็น JavaScript Object:

import { Button } from 'antd';

function MyComponent() {
  return (
    <Button style={{ backgroundColor: 'red', color: 'white' }}>Custom Style</Button>
  );
}

export default MyComponent;

ใน Code ตัวอย่างด้านบน เราทำการเปลี่ยนสีพื้นหลังของ Button เป็นสีแดง และสีตัวอักษรเป็นสีขาว

การใช้ Ant Design ร่วมกับ Form

Antd มี Component ที่เกี่ยวข้องกับ Form มากมาย เช่น Form, Input, Select, DatePicker และอื่นๆ ซึ่งช่วยให้เราสามารถสร้าง Form ที่ซับซ้อนได้อย่างง่ายดาย ตัวอย่างเช่น เราสามารถสร้าง Form สำหรับ Login ได้ดังนี้:

import { Form, Input, Button } from 'antd';

function LoginForm() {
  const onFinish = (values) => {
    console.log('Success:', values);
    // ส่งข้อมูลไปยัง Backend
  };

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };

  return (
    <Form
      name="basic"
      labelCol={{ span: 8 }}
      wrapperCol={{ span: 16 }}
      initialValues={{ remember: true }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      autoComplete="off"
    >
      <Form.Item
        label="Username"
        name="username"
        rules={[{ required: true, message: 'Please input your username!' }]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label="Password"
        name="password"
        rules={[{ required: true, message: 'Please input your password!' }]}
      >
        <Input.Password />
      </Form.Item>

      <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
}

export default LoginForm;

ใน Code ตัวอย่างด้านบน เราใช้ Form Component เป็น Container หลักของ Form และใช้ Form.Item Component เพื่อห่อหุ้ม Input Fields แต่ละตัว เรากำหนด rules Prop เพื่อกำหนด Validation Rules ให้กับ Input Fields และใช้ onFinish และ onFinishFailed Props เพื่อจัดการกับผลลัพธ์ของ Form

ข้อดีของการใช้ Form Component ของ Antd คือ:

• จัดการ State ของ Form: Antd จะจัดการ State ของ Form ให้เราโดยอัตโนมัติ ทำให้เราไม่ต้องเขียน Code เพื่อจัดการ State เอง
• Validation: Antd มีระบบ Validation ที่แข็งแกร่ง ทำให้เราสามารถกำหนด Validation Rules ได้อย่างง่ายดาย
• Submit Handling: Antd จะจัดการกับกระบวนการ Submit Form ให้เรา ทำให้เราไม่ต้องเขียน Code เพื่อจัดการกับ Submit Event เอง

สรุป

ในบทนี้เราได้เรียนรู้วิธีการใช้งาน Ant Design ในโปรเจกต์ React ตั้งแต่การติดตั้ง Package, การนำเข้า Component, การปรับแต่ง Component ไปจนถึงการใช้ Antd ร่วมกับ Form Antd เป็น Component Library ที่มีประโยชน์อย่างมากในการพัฒนา Frontend ที่มีประสิทธิภาพ หวังว่าบทนี้จะเป็นประโยชน์สำหรับผู้ที่สนใจใช้งาน Antd นะครับ

ในบทถัดไป เราจะมาเรียนรู้เกี่ยวกับการสร้าง Design System ของตัวเอง ซึ่งเป็นขั้นตอนที่สำคัญในการสร้างโปรเจกต์ขนาดใหญ่ที่มีความสอดคล้องและความยั่งยืนครับ