Skip to main content

React structure design

my-react-ts-app/
├── src/
│ ├── components/ #重複使用的元件
│ │ ├── Button.tsx
│ │ ├── Card.tsx
│ │ ├── Header.tsx
│ │ └── ...
│ ├── pages/ #頁面
│ │ ├── Home.tsx
│ │ ├── About.tsx
│ │ ├── Contact.tsx
│ │ └── ...
│ ├── utils/ # 函式
│ │ ├── api.ts
│ │ ├── helpers.ts
│ │ └── ...
│ ├── hooks/ # 自定義 hook
│ │ ├── useAuth.ts
│ │ ├── useLocalStorage.ts
│ │ └── ...
│ ├── styles/ # 樣式相關
│ │ ├── main.css
│ │ ├── components/
│ │ │ ├── Button.module.css
│ │ │ └── ...
│ │ └── ...
│ ├── types/ # 類型定義相關
│ │ ├── AppTypes.ts
│ │ ├── ApiTypes.ts
│ │ ├── ...
│ ├── api/ # API請求相關
│ │ ├── userService.ts
│ │ ├── routes.ts # 路由設定
│ │ ├── apiConfig.ts # API設定
│ ├── assets/ # 靜態資源
│ │ ├── images/
│ │ │ ├── logo.png
│ │ │ └── ...
│ │ ├── fonts/
│ │ │ ├── font.woff
│ │ │ └── ...
│ │ └── ...
│ ├── constants/ # 定義常數
│ │ ├── colors.ts
│ │ ├── ...
│ │ ├── ...
│ │ └── ...
│ ├── App.tsx # 根元件
│ ├── index.tsx # 專案入口
└── ...