Cách cấu trúc dự án React

Giới thiệu

Khác với Angular, Vue. React là một thư viện và không phải là một framework, vì vậy nó không đưa ra bất kỳ cấu trúc nào khi xây dựng một app. Điều này giúp các dev có thể tự do tạo ra cấu trúc dự án theo ý muốn của mình. Dẫn đến việc khi muốn mở rộng, maintain thì sẽ vô cùng khó khăn.

Mỗi dự án, sẽ có cấu trúc khác nhau để giải quyết riêng cho từng dự án. Có thể sẽ có những thành phần nhất định tương tự nhau. Bài viết này có thể giúp ích bạn có cái nhìn khái quát hơn.

1. Cấu trúc dự án

Base structure of Nextjs

Nơi chưa các config cơ bản của App:

public: Nơi chứa các file có thể truy cập trực tiếp mà ko thông qua compile như css,js,image hoặc 1 số thư viện tích hợp
src: Nơi chứa source code của dự án
node_modules: Module cần thiết để dự án có thể chạy trơn tru
1 số file config khác

1.1 Folder Public

1.2 Folder Src

Cách cấu trúc thư mục./src

Thư mục này thường sẽ chứa các folder sau:

/component : chứa các Component có thể Reusable
/service : các khai báo về endpoint API
/pages : chứa các React component đại diện cho các trang riêng lẻ trong ứng dụng.
/configs : các config về kết nối http, axios, .v.v.
/assets: nơi chứa những file css, hình ảnh, icons, fonts và các file media khác

và 1 số thư mục khác để phục vụ cho dự án, như trên hình sẽ có thêm

/store : nơi khai báo store bao gồm các state, action và reducer
/helper : nơi chứa các hàm phục vụ cho quá trình phát triển dự án
/constant : nơi khai báo các hằng số tham chiếu giá trị, type / model đối với ts.

2. Lưu ý

Trong quá trình làm việc, chúng ta nên lưu ý những điều này:

Để tránh việc folder assets thành thùng rác, ta nên tạo folder riêng cho mỗi thể loại file được thêm vào và đặt tên theo Component nếu sử dụng riêng cho Component.
Component phải là một Presentational component, có nghĩa là nó không kết nối trực tiếp với state của ứng dụng và chắc chắn không fetch hoặc post dữ liệu. Nó có thể giao tiếp với các Component khác hoặc Component Cha thông qua các props.

3.Tổng kết

Có rất nhiều các cách tiếp cận khi tạo cấu trúc cho một dự án React. Với cách tiếp cận này, chúng ta giúp cho dự án scale nhanh hơn, hoạt động một cách hiệu quả, cho phép maintenance nhanh chóng mà không ảnh hưởng đến chất lượng của codebase.

Điều quan trọng nhất chính là duy trì được sự nhất quán trong toàn bộ dự án và các thành viên cần tuân thủ chính xác theo rules mà cấu trúc đưa ra.