วิธีการติดตั้ง NextUI ใน React ด้วย Vite แบบละเอียด (มือใหม่ก็ทำได้)

ในการพัฒนาเว็บแอปพลิเคชันด้วย React การมี UI ที่สวยงามและใช้งานง่ายเป็นสิ่งสำคัญ NextUI คือหนึ่งใน UI frameworks ที่ช่วยให้การออกแบบอินเทอร์เฟซเป็นเรื่องง่ายและรวดเร็ว ด้วยการออกแบบที่เน้นความเรียบง่ายและประสิทธิภาพสูง ทำให้เราสามารถสร้างหน้าเว็บที่ทันสมัยได้อย่างรวดเร็ว โดยในบทความนี้ เราจะมาแนะนำขั้นตอนการติดตั้ง NextUI ในโปรเจกต์ React ที่สร้างด้วย Vite อย่างละเอียด ตั้งแต่ขั้นเริ่มต้นไปจนถึงการทดสอบการใช้งาน เหมาะสำหรับมือใหม่ที่ต้องการเริ่มต้นพัฒนาเว็บแอปอย่างมืออาชีพ แม้จะไม่มีประสบการณ์มาก่อนก็สามารถทำตามได้ง่ายๆ

ขั้นตอนแรกให้สร้างโปรเจคด้วย vite ก่อน

npm create vite@latest

ตั้งชื่อ Project

เลือก framework ที่เราจะติดตั้ง

เลือกว่าจะใช้อะไร

จากนั้น cd ชื่อ project เรา ทีนี้ก็ทำการพิมพ์คำสั่งตามนี้เลย

npm install

แล้วก็ตามด้วย

npm run dev

เปิดเว็บเบราเซอร์แล้วเข้าผ่าน url ตามที่เห็นเลย ในที่นี้จะเป็น http://localhost:5173/

local: http://localhost:5173/

ก็จะพบกับหน้าเว็บแบบนี้

ขั้นตอนถัดไปเราจะมาติดตั้ง Tailwind CSS ก่อน

เปิดโปรเจคเราใน vs code จากนั้นไปคลิกที่ Terminal > New Terminal

จากนั้นพิมพ์คำสั่งตามนี้เลย

npm install -D tailwindcss postcss autoprefixer

จากนั้นสร้างไฟล์ tailwind.config.js และ postcss.config.js ด้วยคำสั่งนี้

npx tailwindcss init -p

เสร็จแล้วให้เปิดไฟล์ tailwind.config.js แล้วนำโค้ดในี้ไปใส่ (ใส่แทนที่ของเดิมเลย)

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

• 

• 

เพิ่ม @tailwind คำสั่งสำหรับแต่ละเลเยอร์ของ Tailwind ลงในไฟล์ src/index.css (ลบโค้ดเดิมออก แล้วใส่โค้ดนี้ไปแทน)

@tailwind base;
@tailwind components;
@tailwind utilities;

ติดตั้ง NextUI ให้รันคำสั่งต่อไปนี้ในเทอร์มินัลของคุณ

npm install @nextui-org/react framer-motion

จากนั้นเปิดไฟล์ tailwind.config.js แล้วเพิ่มโค้ดนี้

const {nextui} = require("@nextui-org/react");

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    // โค้ดก่อนหน้า
    "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  darkMode: "class",
  plugins: [nextui()],
};

• 

• 

เราต้องทำการนำเข้า NextUIProvider และห่อแอปพลิเคชันของเราด้วยคอมโพเนนต์นี้ ซึ่งเป็นขั้นตอนสำคัญในการทำให้ NextUI ทำงานได้อย่างถูกต้องในแอปพลิเคชันของเรา

import * as React from "react";
// 1. นำเข้า NextUIProvider
import {NextUIProvider} from "@nextui-org/react";

function App() {
  // 2. ห่อ NextUIProvider ที่ root ของแอปพลิเคชัน
  return (
    <NextUIProvider>
      <YourApplication />
    </NextUIProvider>
  );
}

ไปที่ไฟล์ main.tsx

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { NextUIProvider } from "@nextui-org/react";
import App from './App.tsx'
import './index.css'


createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <NextUIProvider>
      <App />
    </NextUIProvider>
  </StrictMode>
);

ใน Terminal ให้กด Ctrl+C (Control + C) เพื่อหยุดการทำงานของโปรแกรมหรือคำสั่งที่กำลังรันอยู่ในขณะนั้นก่อน แล้วก็รันคำสั่ง npm run dev อีกรอบ

npm run dev

จากนั้นให้ไปที่ src/App.tsx ให้ลองเพิ่ม component NextUi

import { User } from "@nextui-org/react";
function App() {
  return (
    <>
      <User
        name="Jane Doe"
        description="Product Designer"
        avatarProps={{
          src: "https://i.pravatar.cc/150?u=a04258114e29026702d",
        }}
      />
    </>
  );
}

export default App;

ลองดูผลลัพธ์

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

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