React là gì?
Đây là một thư viện Javascript được tạo ra bởi Facebook. Nó được dùng để xây dựng giao diện người dùng, và là công cụ để xây dựng các UI component. Hầu hết mọi lúc, chúng ta dùng create-react-app để tạo một ứng dụng react. Trong bài viết này, chúng ta sẽ xây dựng boilerplate riêng cho ứng dụng react với vite.
Cách tổ chức cấu trúc ứng dụng React?
Chúng ta đã đọc nhiều bài viết giải thích về boilerplate, và có thể sẽ bối rối không biết cách tiếp cận nào là tốt nhất.
Cấu trúc dưới đây sẽ đi theo thứ tự từ đơn giản đến phức tạp nhất, nhưng đừng vội nhảy thẳng vào cấu trúc nâng cao/phức tạp nhất vì còn tùy vào quy mô dự án của bạn. Vì vậy bạn có thể dùng một phần hoặc toàn bộ cho dự án của mình.
Cấu trúc thư mục
Cấu trúc thư mục React trông như thế nào?
Nó trông như thế này.
- thư mục styles
- thư mục assets
- thư mục components
- thư mục configs
- thư mục context
- thư mục layouts
- thư mục helpers
- thư mục hooks
- thư mục services
- thư mục types
- thư mục states
- thư mục pages
styles
Thư mục styles chứa các file css style của dự án. Ở đây chúng ta có thể lưu các style tùy chỉnh theo từng component.
assets
Thư mục assets chứa toàn bộ hình ảnh, file css, file font, v.v… cho dự án của bạn.
contexts
Thư mục contexts lưu trữ toàn bộ các file React context dùng để chia sẻ state giữa các component với nhau. Với các dự án lớn, bạn sẽ có nhiều context được dùng xuyên suốt ứng dụng. Nếu bạn dùng một thư viện quản lý state khác như Redux, bạn có thể thay thế thư mục này để chia sẻ state.
configs
Thư mục configs chứa các file cấu hình nơi chúng ta lưu các biến môi trường. Chúng ta sẽ dùng thư mục này để thiết lập cấu hình cho ứng dụng. Ngoài ra bạn có thể dùng nó để lưu các biến hằng số, khi đó bạn chỉ cần thay đổi ở một nơi, và nó sẽ áp dụng cho tất cả những nơi sử dụng.
layouts
Thư mục layouts chứa các layout động mà bạn muốn hiển thị dựa trên thông tin của client. Đây sẽ là những thứ như sidebar, navbar, v.v… Nếu ứng dụng của bạn chỉ có một layout thì bạn có thể đặt nó trong thư mục components, nhưng nếu bạn có nhiều layout khác nhau được dùng xuyên suốt ứng dụng thì đây là nơi tuyệt vời để lưu trữ chúng.
helpers
Thư mục helpers chứa các hàm tiện ích. Bạn nên lưu các pure function trong thư mục này. Điều đó có nghĩa là mỗi hàm sẽ có trách nhiệm riêng của nó.
hooks
Thư mục hooks chứa các hàm hook để có thể tái sử dụng logic code cho tất cả component, và nó được dùng để tách biệt giữa logic code và component của bạn. Nhờ vậy component chỉ đơn giản là render UI.
services
Thư mục services chứa toàn bộ code để giao tiếp với bất kỳ API bên ngoài nào. Với các dự án lớn, bạn sẽ có nhiều API khác nhau cần truy cập và thư mục này là nơi để đặt code tương tác với các API đó.
types
Nếu ứng dụng của bạn được tạo bằng react typescript, bạn có thể dùng thư mục này để chứa các interface, type mà bạn dùng để định nghĩa trên component. Thư mục này giúp dễ dàng chia sẻ interface giữa các component.
states
Thư mục states sẽ được thêm vào nếu bạn dùng redux trong dự án. Có 2 thư mục tên là actions, reducers để quản lý state. Chúng sẽ được gọi ở hầu hết các trang, vì vậy hãy tạo actions, reducers theo tên trang.
components
Thư mục này rất quan trọng trong dự án của bạn. Component là những khối xây dựng nền tảng của bất kỳ dự án react nào. Thư mục này chứa tập hợp các UI component như button, card, modal, input, v.v…, có thể được dùng ở nhiều file khác nhau trong dự án.
pages
Thư mục cuối cùng là thư mục pages, thể hiện route của ứng dụng react. Mỗi file trong thư mục này tương ứng với một route. Một page có thể chứa thư mục con riêng. Và mỗi thư mục con đại diện cho route riêng của nó. Thư mục này dễ gây nhầm lẫn cho chính bạn khi xác định component nào nằm trong thư mục pages, hay trong thư mục feature. Vì vậy, mình đề xuất chúng ta có thể tham khảo cách mà framework NextJS dùng app router để tách biệt component.
Chúng ta sẽ tạo file index dùng để export hoặc import các component đã đặt tên. Chúng ta sẽ không viết logic code vào file index. Điều đó sẽ giúp chúng ta tìm tên component dễ dàng hơn.
Kết luận
Đây là một trong những kiến trúc được sử dụng nhiều nhất. Như mình đã đề cập, không có kiến trúc nào là tốt nhất phù hợp cho mọi dự án. Vì vậy chúng ta sẽ tự quyết định phần nào đưa vào dự án của mình và luôn nhớ duy trì cấu trúc thư mục để mọi dự án đều đơn giản và dễ hiểu đối với bất kỳ lập trình viên nào.