Tôi muốn đề cập đến một vài điều trước khi bài viết này được bắt đầu. Tất cả các thư mục cấu trúc này sẽ nằm trong thư mục “src”. Ngoài ra, bạn nên biết react basic.
React là gì?
Nó là một thư viện Javascript được tạo bởi Facebook. Nó được sử dụng để xây dựng giao diện người dùng và là công cụ để xây dựng các thành phần UI. Hầu như mọi lúc, chúng tôi sử dụng ứng dụng tạo phản ứng để tạo phản ứng ứng dụng. Trong bài viết này, tôi sẽ xây dựng một bản soạn sẵn cho một ứng dụng react.
Làm thế nào để cấu trúc một ứng dụng React?
Chúng ta có thể đã đọc nhiều bài viết liên quan đến vấn đề structure mà mỗi bài viết đều giải thích cách sử dụng boilerplate, và chúng ta có thể bị nhầm lẫn về cách tiếp cận tốt nhất.
Cấu trúc này sẽ được đi theo thứ tự từ đơn giản nhất đến phức tạp nhất, nhưng đừng chỉ nhảy đến cấu trúc phức tạp nhất vì tùy thuộc vào size dự án của mỗi người. Vì vậy, bạn có thể sử dụng một số phần hoặc tất cả chúng cho dự án của mình.
Cấu trúc folder
Folder Structure trong react là gì?
Nó sẽ trông như thế này
- styles folder
- assets folder
- components folder
- configs folder
- context folder
- layouts folder
- helpers folder
- hooks folder
- services folder
- types folder
- states folder
- pages folder
styles
Styles folder chứa style css của dự án. Ở đây chúng ta có thể lưu trữ các component-based custom styles
assets
Assets folder sẽ chứa tất cả các images, css files, font files, etc, …cho project của mình
contexts
Context folder sẽ lưu trữu tất cả React context files của bạn được sử dụng để share states giữa các components với nhau. Trong các dự án lớn, bạn sẽ có nhiều context mà bạn sử dụng trong toàn bộ ứng dụng của mình. Nếu bạn đang sử dụng một trình quản lý trạng thái khác như Redux, bạn có thể thay thế thư mục này để share states.
configs
Configs folder chứa các tệp cấu hình nơi chúng ta lưu trữ các biến môi trường. Chúng ta sẽ sử dụng thư mục này để thiết lập các cấu hình trong ứng dụng của bạn. Bên cạnh đó, bạn cũng có thể sử dụng nó để lưu trữ các biến hằng số. Khi đó, việc thay đổi chỉ cần thực hiện tại một nơi duy nhất, và các thay đổi sẽ được áp dụng cho tất cả các nơi sử dụng trong ứng dụng của bạn.
layouts
Layouts folder chứa bố cục động mà bạn muốn hiển thị dựa trên thông tin của khách hàng của bạn. Điều này có thể là các thành phần như thanh bên, thanh điều hướng, v.v… Nếu ứng dụng của bạn chỉ có một bố cục duy nhất thì bạn có thể đặt nó trực tiếp trong thư mục “components”. Tuy nhiên, nếu bạn có nhiều bố cục khác nhau được sử dụng trong toàn bộ ứng dụng của mình, đây là một nơi tuyệt vời để lưu trữ chúng.
helpers
Helpers folder chứa các hàm tiện ích. Bạn nên lưu trữ các pure function trong thư mục này. Nghĩa là mỗi hàm sẽ có một trách nhiệm riêng của nó.
hooks
Hooks folder chứa các hàm hook để có thể tái sử dụng logic code cho tất cả components, và nó được sử dụng để phân tách giữa logic code và components của bạn. Điều này giúp cho components của bạn chỉ đơn giản hiển thị giao diện người dùng.
services
Folder services chứa toàn bộ code của bạn để tương tác với bất kỳ API nào. Trong các dự án lớn, bạn sẽ có nhiều API khác nhau mà bạn cần truy cập và thư mục này là nơi để code tương tác với những API đó.
types
Nếu ứng dụng của bạn được tạo bằng React và TypeScript, bạn có thể sử dụng thư mục này để chứa các interfaces và kiểu dữ liệu (types) mà bạn sử dụng để định nghĩa trên các thành phần. Thư mục này dễ dàng sử dụng để chia sẻ các giao diện qua lại giữa các thành phần.
states
Thư mục “states” sẽ được thêm vào nếu bạn sử dụng Redux trong dự án của mình. Có 2 thư mục được đặt tên là “actions” và “reducers” để quản lý trạng thái. Chúng sẽ được gọi trong gần như tất cả các trang, vì vậy hãy tạo các actions, reducers theo tên của các trang.
components
Thư mục này rất quan trọng trong dự án của bạn. Các components là các khối xây dựng của bất kỳ dự án React nào. Thư mục này chứa bộ sưu tập các thành phần giao diện người dùng như buttons, card, modal, input, … mà có thể được sử dụng trong nhiều files khác nhau trong dự án.
pages
Thư mục cuối cùng được gọi là thư mục “pages” và chỉ định các đường dẫn của ứng dụng React. Mỗi tệp trong thư mục này chứa đường dẫn của nó. Một trang có thể chứa các thư mục con của mình. Và mỗi thư mục con đại diện cho một đường dẫn riêng của nó. Thư mục này gây nhầm lẫn cho bản thân bạn khi xác định các thành phần nằm trong thư mục “pages”, hoặc trong thư mục “features”. Do đó, tôi đề xuất chúng ta có thể tham khảo cách NextJS framework sử dụng app router để phân tách các components.
Chúng ta sẽ tạo tệp index được sử dụng để xuất hoặc nhập các thành phần có tên. Chúng ta sẽ không code logic vào tệp index. Điều này sẽ giúp chúng ta dễ dàng tìm tên của các thành phần hơn.
Lời kết
Đây là một trong những kiến trúc được sử dụng nhiều nhất. Như tôi đã đề cập trước đó, không có một kiến trúc tốt nhất nào phù hợp với mọi dự án. Vì vậy, chúng ta sẽ tự quyết định các phần trong dự án của mình và luôn nhớ giữ cho cấu trúc thư mục của mình sao cho 1 dự án đều đơn giản và dễ hiểu đối với bất kỳ nhà phát triển nào.
Ngoài ra, quan trọng hơn, không chỉ là lựa chọn kiến trúc mà còn là cách chúng ta triển khai nó trong dự án của mình. Một cấu trúc thư mục tốt không chỉ giúp cho sự dễ hiểu và bảo trì của mã nguồn mà còn tạo điều kiện thuận lợi cho việc làm việc nhóm và phát triển dự án một cách hiệu quả. Chúng ta cần phải tổ chức mã nguồn của mình sao cho nó dễ dàng tìm kiếm và mở rộng, đồng thời đảm bảo tính linh hoạt và mở rộng trong tương lai. Một cấu trúc thư mục rõ ràng và có tổ chức sẽ giúp cho dự án của bạn trở nên dễ dàng quản lý và phát triển hơn qua các giai đoạn khác nhau của quy trình phát triển phần mềm.
References:
https://legacy.reactjs.org/docs/faq-structure.html
https://blog.webdevsimplified.com/2022-07/react-folder-structure