Cấu trúc React Folder tối ưu, dễ bảo trì, dễ nâng cấp

Nội dung bài viết

Cấu trúc thư mục React tối ưu
Quy ước đặt tên file dễ đọc

Chào anh em, tiếp nối bài Cài đặt môi trường Visual Studio Code tuyệt vời để code React thì hôm nay các bạn cùng mình sẽ tìm hiểu về cấu trúc thư mục best practice cho dự án React nhé. Theo như chúng ta đã biết thì React chỉ là một thư viện cung cấp giải pháp cho Single Page Application, nó thiếu khá nhiều thứ, và chúng ta phải tự setup bằng tay những thứ đó. Vì thế mà mỗi nơi, mỗi người lại mỗi cách setup cấu trúc dự án khác nhau làm cho các bạn mới khá bối rối. Vậy nên hôm nay mình chia sẽ cách tổ chức file, folder React mà mình đang dùng và theo mình là tối ưu nhất

À, trước khi đi đến giới thiệu về React Folder Structure thì mình nhắc lại một số quan niệm của mình về một dự án React tuyệt vời đó là

Editor được setting tối ưu
Tích hợp ESLint và Prettier
Dùng các giải pháp CSS như Styled-Component, CSS Module… để tránh việc bị leak css ra ngoài
Dùng Typescript. Có thể nhiều bạn chưa quen nhưng muốn rõ ràng, tiện bảo trì nâng cấp thì phải dùng Typescript!
Cấu trúc thư mục rõ ràng, dễ nâng cấp
Testing
CI/CD

Cấu trúc thư mục hiện tại mà mình dùng thì áp dụng Typescript và Styled-Component nhé.

Cấu trúc thư mục React tối ưu

├───.vscode
├───public
└───src
    ├───@types
    ├───apis
    ├───App
    ├───assets
    │   └───images
    ├───components
    │   ├───Header
    │   └───SideNav
    ├───constants
    ├───guards
    ├───helpers
    ├───hooks
    ├───layouts
    ├───pages
    │   ├───Home
    │   ├───Login
    │   └───Product
    │       ├───ProductItem
    │       └───ProductList
    ├───reducer
    ├───routes
    └───store

Giải thích nè

.vscode: Folder chứa các setting cho Visual Studio Code
public: Folder này của React tạo ra, mình không bàn tới nhé
@types: Chứa các file định nghĩa interface, type cho Typescript
apis: Hay còn gọi là services. Chứa các khai báo function get api như axios,…
App: Chứa component App
assets: Chứa ảnh, videos, file, …
components: Chứa các folder component, trong mỗi folder là các file component
constansts: Chứa các các hằng số, enum
guards: Chứa các Route cần quyền truy cập
helpers: Chứa các function hay dùng, lặp đi lặp lại
hooks: Chứa các hook đang dùng
layouts: Chứa layout của dự án
pages: Chứa các trang của dự án
reducer: Chứa file reducer
routes: Chứa các route
store: chứa file store