โครงสร้างโฟลเดอร์และหลักการตั้งชื่อ

ยินดีต้อนรับ

โครงสร้างเริ่มต้น

src/
  main.jsx
  App.jsx
  index.css

โครงสร้างตามฟีเจอร์

src/
  features/
    auth/
      LoginForm.jsx
      LoginForm.test.jsx
      useLogin.js
    dashboard/
      Dashboard.jsx
      useDashboardData.js
  components/     <- shared UI only
  hooks/          <- shared hooks
  lib/            <- utilities

การตั้งชื่อไฟล์คอมโพเนนต์

การตั้งชื่อไฟล์ที่ไม่ใช่คอมโพเนนต์

ไฟล์ดัชนีเพื่อการนำเข้าที่สะอาด

// src/features/auth/index.js
export { LoginForm } from './LoginForm';
export { useLogin } from './useLogin';

// Consumer
import { LoginForm } from '@/features/auth';

การนำเข้าแบบสัมบูรณ์ด้วยนามแฝงเส้นทาง

// vite.config.js
resolve: {
  alias: { '@': path.resolve(__dirname, 'src') }
}

คอมโพเนนต์ที่ใช้ร่วมกันกับคอมโพเนนต์ตามฟีเจอร์

ไฟล์ค่าคงที่และการกำหนดค่า

// src/config.js
export const API_BASE = import.meta.env.VITE_API_URL;

ชนิดข้อมูลและอินเทอร์เฟซ (TypeScript)

ตรวจสอบอย่างรวดเร็ว

สรุปทบทวน

จบหลักสูตร