Cấu trúc Dự án React Thực Tiễn Có Thể Tái Sử Dụng

Giữ cho ứng dụng của bạn có thể đoán trước, mô-đun và mở rộng ngay từ ngày đầu. Cấu trúc này kết hợp ý tưởng Bulletproof React với bố cục đơn giản theo tính năng, tránh các chi tiết về miền và dễ dàng điều hướng.

Mục tiêu

• Ranh giới rõ ràng: Tách biệt mã chung với mã cụ thể cho tính năng.
• Nhập nhanh: Sử dụng bí danh đường dẫn thay vì phải duyệt qua cấu trúc tệp trong mã của bạn.
• Mẫu lặp lại: “Sao chép cấu trúc,” không sáng tạo lại.

Bố cục Cơ bản (toàn ứng dụng)

Sử dụng một tập hợp nhỏ các thư mục cấp cao và tuân thủ chúng.
Lưu ý rằng cấu trúc này tồn tại dưới thư mục 'src', vì gốc của dự án của bạn có thể khác nhau tùy thuộc vào framework bạn đang sử dụng (tôi đang dùng Vite)

src/
  app/            # Điểm nhập ứng dụng, providers, styles toàn cầu, khởi động
  routes/         # Tệp định tuyến (phân tách mã khi có thể)
  components/     # UI chung, tái sử dụng (không có logic tính năng)
  features/       # Các module tính năng (tự chứa)
  hooks/          # Các hooks tái sử dụng xuyên tính năng
  utils/          # Tiện ích và trợ giúp thuần túy
  services/       # Tích hợp với các hệ thống bên ngoài
  types/          # Các kiểu TypeScript toàn cục/ chia sẻ
  store/          # Logic lưu trữ và quản lý trạng thái
  assets/         # Tài sản tĩnh

• app: kết nối trung tâm (providers, theming, biên giới lỗi).
• routes: phân tách mã theo cấp độ định tuyến và tải lười.
• components: chỉ dành cho mã chung; nếu bạn cảm thấy bị cám dỗ để thêm logic tính năng vào đây, nó thuộc về features/.
• features: sao chép một phiên bản mini của cấu trúc cơ bản cho mỗi tính năng (xem bên dưới).
• store: mã quản lý trạng thái chung, như khởi động/xuất provider chính. Các bộ giảm/selector cụ thể thường sẽ tồn tại trong tính năng tương ứng của chúng.
• services: bất kỳ mã nào cần thiết để kết nối với hệ thống bên ngoài
• hooks/utils/types: chia sẻ và không phụ thuộc vào framework khi có thể.

Bí danh Đường dẫn

Giữ cho các import ngắn gọn và nhất quán:

import { Button } from "@components/ui/Button";
import { loadUser } from "@features/user/services/api";
import { formatDate } from "@utils/date";

• Bí danh phổ biến: @/, @components/, @features/, @hooks/, @utils/.

Thuộc tính paths trong tsconfig của bạn có thể cần trông giống như sau:

    "paths": {
      "@/*": ["./src/*"],
      "@app/*": ["./src/app/*"],
      "@components/*": ["./src/components/*"],
      "@features/*": ["./src/features/*"],
      "@hooks/*": ["./src/hooks/*"],
      "@types/*": ["./src/types/*"],
      "@utils/*": ["./src/utils/*"],
      "@store/*": ["./src/store/*"],
      "@services/*": ["./src/services/*"],
      "@assets/*": ["./src/assets/*"]
    }

Mẫu Thư mục Tính năng

Mỗi tính năng là một lát tự chứa. Sao chép cùng một mẫu nội bộ cho mỗi tính năng để mở rộng một cách sạch sẽ. Dưới đây là một ví dụ, nhưng ý tưởng cốt lõi là bạn có thể/nên sao chép cấu trúc đã định nghĩa ở trên để xây dựng phù hợp với tính năng.

src/features/<tên-tính-năng>/
  components/     # UI tính năng (dumb-first; kết hợp các phần nhỏ, nhưng không cần căng thẳng về việc làm cho mọi thứ 'quá chung')
  hooks/          # Các hooks riêng cho tính năng
  services/       # Lấy dữ liệu, adapters, caching, tác dụng phụ
  types/          # Các loại/interfaces chỉ cho tính năng
  index.ts        # Bề mặt công khai (xuất barrel)

• Giữ các mối quan tâm về tính năng bên trong tính năng. Tránh việc truy cập vào các tính năng khác. Nếu bạn thấy cần phải nhập một hook từ một tính năng khác, thì xin chúc mừng, bạn vừa tìm thấy một trường hợp sử dụng thực tiễn để tạo một hook chung.
• Chỉ xuất những gì mà phần còn lại của ứng dụng nên sử dụng từ index.ts.
• Nếu một cái gì đó trở nên chung giữa các tính năng, nâng cấp nó lên @components/, @hooks/, hoặc @utils/.

Nguyên tắc Bulletproof React (cơ bản)

Cấu trúc này được lấy từ Bulletproof React, đây là một nền tảng tuyệt vời để mở rộng tùy thuộc vào nhu cầu của bạn.

Một số khái niệm cốt lõi là:

• Tính năng trước: đặt logic, UI và types theo tính năng.
• Tệp Barrel (index.ts): xác định rõ API công khai cho mỗi thư mục.
• An toàn kiểu: TypeScript nghiêm ngặt, không có any; xác định các props và types dịch vụ.
• Trả về sớm hơn so với lồng: giữ các thành phần/chức năng nông.
• Các mô-đun nhỏ, tập trung: trách nhiệm duy nhất; trích xuất khi các tệp lớn lên.
• Tiện ích thuần túy trong @utils/: xác định và dễ kiểm tra.

Cách Thêm Tính Năng Mới (lặp lại)

1. Tạo src/features/<tên-tính-năng>/.
2. Thêm components/, hooks/, services/, types/, index.ts (hoặc thêm các thư mục cần thiết tại thời điểm bạn cần chúng).
3. Xây dựng UI riêng cho tính năng trong components/, logic trạng thái trong hooks/, tác dụng phụ trong services/.
4. Xuất bề mặt công khai tối thiểu từ index.ts.
5. Kết nối nó vào routes/.
6. Kiểm tra tại ranh giới tính năng; thêm bao phủ E2E nếu nó ảnh hưởng đến các luồng người dùng.

Cái Gì Đi Đâu (quy tắc nhanh)

• UI chung: @components/
• UI/logic tính năng: @features/<tính năng>/
• Hooks tái sử dụng: @hooks/
• Tiện ích thuần túy: @utils/
• Các loại chia sẻ: types/
• Đường dẫn & phân tách: routes/
• Khởi động ứng dụng: app/

Kết luận

Hy vọng bạn thấy điều này hữu ích. Hãy chia sẻ suy nghĩ của bạn về những gì hoạt động và những gì không với cấu trúc này. Nếu không, chúc bạn phát triển suôn sẻ và may mắn với dự án tiếp theo của bạn.

Tìm tôi ở đây:
LinkedIn
GitHub