https://xdevclass.com/cau-truc-react-folder-toi-uu-de-bao-tri-de-nang-cap/?fbclid=IwAR1z18irNI7DTnxlV89Zo77VG88ofD7G2vyxxGP99XCfRiN4iy7DkW0-wXI#Quy_uoc_dat_ten_file_de_doc
Last updated
Was this helpful?
Nội dung bài viết
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à
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é.
├───.vscode├───public└───src ├───@types ├───api ├───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
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
Đố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…
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ê 
.
Link Github: https://github.com/duthanhduoc/React-Folder-Structure
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
