Cấu Trúc Dự Án ReactJS Hiệu Quả với React Signify

👋 Giới thiệu về cấu trúc dự án ReactJS

Trong loạt bài viết React Signify, chúng ta đã khám phá cách ứng dụng React vào các dự án thực tế thông qua một ví dụ đơn giản. Nếu bạn đã thực hiện các bước trong bài viết trước, bây giờ là lúc để xây dựng cấu trúc dự án một cách hiệu quả và tối ưu cho công việc phát triển. 👍️

🧱 Hướng Dẫn Xây Dựng Cấu Trúc Dự Án

Cài Đặt Mặc Định

Đầu tiên, chúng ta bắt đầu bằng việc tạo ra một dự án mẫu thông qua câu lệnh create-react-app:

npx create-react-app my-app

Tiếp theo, cần cài đặt những thư viện cần thiết cho dự án của chúng ta:

• React Router Dom: thư viện quản lý các route trong ứng dụng.

npm install react-router-dom

• React Signify: thư viện hỗ trợ quản lý global state trong ứng dụng.

npm install react-signify

Cấu Trúc Thư Mục Hệ Thống

Sau khi đã cài đặt xong, hãy xây dựng cấu trúc thư mục cho dự án của bạn theo mẫu dưới đây. Mỗi thư mục sẽ được đi sâu vào giải thích cụ thể:

• node_modules: thư mục chứa tất cả các thư viện phụ thuộc của dự án.
• public: thư mục chứa các tài liệu tĩnh như index.html, favicon, và các tài nguyên khác.
• src: thư mục chứa mã nguồn chính của dự án.
  • app: thư mục chứa các mã nguồn dùng chung.
    • assets: thư mục chứa các tài nguyên như hình ảnh, tệp văn bản, và các tài liệu khác.
    • components: thư mục chứa các component chung như button, input, và các thành phần UI khác.
    • hooks: thư mục chứa các custom hooks dùng chung cho dự án.
    • layouts: thư mục chứa các component layout tĩnh như header, footer, trang không có nội dung, trang 404, và các giao diện khác.
    • locales: thư mục chứa các tệp ngôn ngữ dùng cho dự án; ví dụ: en.json, vn.json.
    • modules: thư mục chứa các thư viện được xây dựng riêng cho dự án.
    • pages: thư mục chứa mã nguồn cho từng màn hình trong ứng dụng.
    • routes: thư mục quản lý thông tin về router và các guard trong dự án.
    • styles: thư mục chứa mã nguồn CSS chung cho toàn bộ ứng dụng.
  • mocks: thư mục dùng để chứa dữ liệu mock cho việc phát triển và thử nghiệm.
  • settings: thư mục này chứa các thông tin cấu hình dự án, môi trường làm việc, và cấu hình cho hosting.
  • App.js: file đại diện cho toàn bộ ứng dụng.
  • index.js: file khởi động ứng dụng.
• .gitignore: tệp cấu hình cho Git để loại bỏ các file/folder không cần thiết.
• package-lock.json: tệp liệt kê các thư viện mà dự án sử dụng.
• package.json: tệp mô tả thông tin dự án như tên, phiên bản và các thư viện cần thiết.

Đến đây, bạn đã có được cái nhìn tổng quan về cấu trúc chính của một dự án ReactJS. Hãy tiếp tục đến phần tiếp theo.

Xây Dựng Cấu Trúc Thư Mục cho Mỗi Màn Hình

Sau khi đã hoàn thiện cấu trúc thư mục tổng thể, bước tiếp theo là thiết lập cấu trúc file và thư mục cho từng màn hình. Hãy tham khảo cấu trúc được triển khai trong thư mục pages như sau:

• pages: thư mục chứa mã nguồn cho từng màn hình.
  • Home: thư mục dành cho màn hình chính (Home).
    • models: thư mục chứa các đối tượng cần thiết trên màn hình.
    • partials: thư mục chứa các phần nhỏ của giao diện để dễ dàng quản lý và tái sử dụng.
    • schemas: thư mục lưu trữ mã nguồn của các điều kiện kiểm tra và xác thực dữ liệu trên màn hình.
    • services: thư mục chứa mã nguồn cho các tác vụ có ảnh hưởng đến trạng thái, như yêu cầu API và theo dõi thời gian.
    • usecases: thư mục chứa mã nguồn xử lý các nghiệp vụ phức tạp trên màn hình.
    • home.css: file CSS của màn hình đó.
    • Home.js: file component chính đại diện cho màn hình Home.
    • homeStore.js: file chứa biến global state cần thiết cho màn hình.
    • index.js: file export của màn hình, giúp đơn giản hóa việc import.
  • [Tên thư mục màn hình khác]: thư mục đại diện cho các màn hình khác trong ứng dụng.

🌟 Đây là toàn bộ cấu trúc dự án ReactJS mà tôi đã áp dụng và thấy hiệu quả trong quá trình phát triển.

Demo

😉 Bạn có thể tự mình khám phá cấu trúc dự án này qua link dưới đây, hoặc tải về để áp dụng cho dự án của mình ngay hôm nay:

Link: react-project-template

🚀 Kết Luận

😀 Đây là mẫu dự án mà tôi đang sử dụng, nó rất ổn định khi mở rộng. Tôi hy vọng bài viết này đã cung cấp cho bạn cái nhìn tổng quát hơn về một dự án ReactJS chuyên nghiệp và giúp bạn khởi động dự án một cách trơn tru nhất. Nếu có bất kỳ thắc mắc nào, hãy để lại nhận xét để chúng ta cùng nhau trao đổi nhé. 👇️

👏 Chúc bạn lập trình vui vẻ !!!
source: viblo