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  :mrgreen:

À, 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à

Cấu trúc thư mục hiện tại mà mình dùng thì áp dụng TypescriptStyled-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

Quy ước đặt tên file dễ đọc

Đối với component, page thì mình sẽ đặt tên folder là tên component, viết hoa mỗi chữ cái đầu.

Đối với style thì mình sẽ đặt đuôi .styles.ts phía sau, tương tự với reducer, actions, constants…

React structure

Mỗi page sẽ có mỗi reducer riêng nhé.

Những thứ này kết hợp với việc setting VSCode sẽ giúp cho anh em có một project code thật là phê 😆 .

Bài này ngắn thôi, chủ yếu là sự tự trải nghiệm của anh em. Cám ơn anh chị em đã đọc đến đây, nếu có góp ý gì cứ comment để mình cải thiện nhaaa :mrgreen:

Link Github: https://github.com/duthanhduoc/React-Folder-Structure