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à
- 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
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…
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
Link Github: https://github.com/duthanhduoc/React-Folder-Structure
Ngon
có dự án nào anh đã từng làm k ạ share cho em vơi
Dự án cty k share ra ngoài được e nha. Nhưng sắp tới a sẽ làm vài demo về các dự án thực tế
hehe
Cấu trúc này tốt quá, có thể làm thêm phần thêm sửa xóa của Product nữa không bạn ơi
Bạn có thể cho mình hỏi cách như thế nào để import component vào mà sử dụng cdn react js