Khi mới học React, rất nhiều người để toàn bộ component, page, API và CSS chung trong thư mục src. Điều này có thể chấp nhận được với những dự án nhỏ, nhưng khi ứng dụng phát triển lên hàng chục hoặc hàng trăm màn hình thì việc quản lý sẽ trở thành "ác mộng".
Xây dựng dự án kiến trúc Feature-Based Architecture. Đây cũng là cách tổ chức mã nguồn mà rất nhiều công ty và đội ngũ phát triển React chuyên nghiệp đang sử dụng.
Ví dụ cấu trúc như sau:
src/
├── app/
├── assets/
├── components/
│ ├── ui/
│ ├── common/
│ └── layouts/
├── features/
│ ├── auth/
│ ├── dashboard/
│ ├── fanpages/
│ ├── posts/
│ ├── scheduler/
│ ├── analytics/
│ ├── users/
│ ├── settings/
│ └── integrations/
│ ├── facebook/
│ ├── zalo/
│ ├── tiktok/
│ └── youtube/
├── hooks/
├── services/
├── store/
├── routes/
├── contexts/
├── constants/
├── types/
├── utils/
├── styles/
├── App.tsx
└── main.tsx
Hãy cùng tìm hiểu ý nghĩa của từng thư mục.
1. app/
Đây là nơi khởi tạo toàn bộ ứng dụng.
Thông thường sẽ chứa:
App.tsx
Theme
Provider
Global Config
Router Provider
Query Provider
Authentication Provider
Ví dụ:
app/
AppProvider.tsx
ThemeProvider.tsx
QueryProvider.tsx
Mục đích:
Khởi tạo React
Đăng ký Provider
Khởi tạo Theme
Khởi tạo Redux
Khởi tạo React Query
Đây được xem là "bộ não" khi ứng dụng khởi động.
2. assets/
Nơi chứa toàn bộ tài nguyên tĩnh.
Ví dụ:
assets/
images/
icons/
fonts/
videos/
svg/
Không nên để ảnh lung tung trong các component.
Ví dụ:
✔ assets/images/logo.png
✘ components/logo.png
Việc tập trung toàn bộ tài nguyên vào một nơi sẽ giúp quản lý dễ dàng hơn.
3. components/
Đây là nơi chứa các component có thể tái sử dụng.
Ví dụ:
Button
Input
Table
Modal
Card
Loading
Một component ở đây có thể được sử dụng ở rất nhiều màn hình.
Ví dụ:
components/
ui/
Button.tsx
Input.tsx
Select.tsx
Table.tsx
Sau này khi đổi giao diện Button, chỉ cần sửa đúng một file.
ui/
Đây là các component cơ bản.
Ví dụ:
Button
Input
Checkbox
Badge
Avatar
Dropdown
Modal
Tabs
Tooltip
Đây gần giống như bộ LEGO của toàn bộ dự án.
common/
Là các component nghiệp vụ nhưng được dùng ở nhiều nơi.
Ví dụ:
Header
Sidebar
Breadcrumb
SearchBox
Pagination
EmptyState
Không phải component nào cũng chỉ có giao diện.
Ví dụ SearchBox có thể chứa logic debounce.
layouts/
Định nghĩa bố cục của website.
Ví dụ:
DashboardLayout
AuthLayout
BlankLayout
LandingLayout
Thay vì mỗi trang tự viết Header và Sidebar thì chỉ cần:
<DashboardLayout>
<DashboardPage />
</DashboardLayout>
4. features/
Đây là thư mục quan trọng nhất.
Mỗi chức năng lớn sẽ có một module riêng.
Ví dụ:
features/
auth/
users/
products/
orders/
Mỗi module sẽ tự quản lý:
component
api
hook
type
page
service
Ví dụ:
features/
users/
components/
hooks/
pages/
services/
types.ts
Nhờ vậy code rất dễ bảo trì.
auth/
Quản lý:
Login
Register
Forgot Password
Change Password
JWT
Refresh Token
dashboard/
Màn hình tổng quan.
Ví dụ:
Card thống kê
Biểu đồ
Recent Activity
Doanh thu
fanpages/
Đây là module dành riêng cho Fanpage Facebook.
Ví dụ:
Danh sách Fanpage
Thêm Fanpage
Đồng bộ Fanpage
Xóa Fanpage
posts/
Quản lý bài viết.
Ví dụ:
Draft
Published
Queue
AI Generate
Lịch sử đăng
scheduler/
Lập lịch.
Ví dụ:
Đăng bài lúc 8h sáng
Đăng định kỳ
Hàng tuần
Hàng tháng
analytics/
Phân tích.
Ví dụ:
Reach
Like
Comment
Click
Conversion
users/
Quản lý người dùng.
Ví dụ:
Danh sách
Vai trò
Quyền
Nhật ký hoạt động
settings/
Toàn bộ cấu hình hệ thống.
Ví dụ:
Dark Mode
API Key
SMTP
Webhook
Notification
integrations/
Tích hợp với nền tảng bên ngoài.
Ví dụ:
facebook/
zalo/
tiktok/
youtube/
Mỗi nền tảng có:
API
OAuth
Token
Webhook
Đồng bộ dữ liệu
Việc tách riêng giúp sau này thêm nền tảng mới mà không ảnh hưởng phần còn lại.
5. hooks/
Đây là nơi chứa Custom Hook.
Ví dụ:
useAuth()
usePagination()
useDebounce()
useLoading()
useWindowSize()
Hook giúp tái sử dụng logic thay vì copy code.
6. services/
Toàn bộ API sẽ nằm ở đây.
Ví dụ:
auth.service.ts
user.service.ts
facebook.service.ts
axios.ts
Không nên viết:
fetch(...)
ngay trong component.
7. store/
Nếu dùng Redux hoặc Zustand.
Ví dụ:
store/
authStore.ts
themeStore.ts
userStore.ts
Toàn bộ dữ liệu dùng chung sẽ được quản lý tại đây.
8. routes/
Định nghĩa Router.
Ví dụ:
/
dashboard
/users
/settings
/login
Có thể phân quyền ngay tại Router.
9. contexts/
Nếu dùng React Context.
Ví dụ:
ThemeContext
LanguageContext
PermissionContext
10. constants/
Chứa dữ liệu không thay đổi.
Ví dụ:
Role
Permission
Country
Status
Language
Ví dụ:
export const USER_STATUS = {
ACTIVE: 1,
BLOCK: 2
}
11. types/
Toàn bộ interface và type.
Ví dụ:
User.ts
Post.ts
Fanpage.ts
Api.ts
Giúp tránh việc định nghĩa interface nhiều lần.
12. utils/
Các hàm tiện ích.
Ví dụ:
formatDate()
formatMoney()
slugify()
downloadFile()
generateUUID()
Các hàm này không liên quan tới React.
13. styles/
CSS dùng chung.
Ví dụ:
variables.css
theme.css
animation.css
Nếu dùng Tailwind thì thư mục này thường khá nhỏ.
14. App.tsx
Đây là component gốc của ứng dụng.
Thông thường chỉ còn:
<AppProvider>
<Router />
</AppProvider>
Không nên viết hàng nghìn dòng code trong App.tsx.
15. main.tsx
Đây là điểm khởi động của React.
Ví dụ:
createRoot(...)
File này gần như rất ít khi phải sửa.
Vì sao nên tổ chức theo Feature-Based Architecture?
So với cách tổ chức truyền thống (chia theo pages, components, services...), Feature-Based Architecture mang lại nhiều lợi ích:
Dễ mở rộng khi dự án ngày càng lớn.
Nhiều lập trình viên có thể làm song song mà ít xung đột.
Mỗi module độc lập, dễ bảo trì và kiểm thử.
Google AI Studio, Gemini CLI, Cursor, Codex hay các AI hỗ trợ lập trình cũng hiểu cấu trúc rõ ràng hơn, từ đó sinh mã nhất quán và ít phá vỡ kiến trúc hiện có.
Khi cần thêm một tính năng mới (ví dụ tích hợp LinkedIn hoặc Telegram), chỉ cần tạo thêm một module trong
featureshoặcintegrationsmà không ảnh hưởng đến các phần khác.
Kết luận
Một dự án React chuyên nghiệp không chỉ nằm ở giao diện đẹp hay code chạy được, mà còn ở cách tổ chức mã nguồn. Một cấu trúc rõ ràng sẽ giúp dự án dễ mở rộng, dễ bảo trì và tận dụng AI hiệu quả hơn.
Nếu bạn đang bắt đầu một dự án React mới, hãy dành thời gian thiết kế kiến trúc ngay từ đầu. Điều này sẽ giúp bạn tiết kiệm rất nhiều công sức khi dự án phát triển lên hàng chục nghìn dòng mã và có nhiều lập trình viên cùng tham gia.
Nhận xét
Đăng nhận xét