React: Cách tổ chức thư mục trong React Js - Day 13

Bài này mang tính chất tổng hợp từ các nguồn khác nhau.

Cấu trúc project

my-app/
  README.md
  node_modules/
  package.json
  public/
    index.html
    favicon.ico
  src/
    common/
      ...
    components/
      common/
        Link.js
        ...
      forms/
        TextBox.js
        TextBox.container.js /* Container component */
        TextBox.res/style.css
        TextBox.locale/vi-VN/...
        ...
      layout/
        App.js - The top-level React component
        App.res/style.css
        App.locale/en-US/...
        Navigation.js
        Navigation.res/style.css
        Navigation.res/data.json
        Navigation.locale/en-US/...
        ...
      pages/
        Home.js
        Home.css
        Account/index.js
        Account/index.css
        ...
    core/
      ...
    constants/
      ...
    helpers/
      ...
    reducers/
      ...
    stores/
      ...

Trong đó:

• common: Chứa các thành phần được sử dụng chung trong toàn bộ dự án.
• components: Chứa các thành phần của ứng dụng. Mỗi thành phần nên được đặt trong một thư mục riêng biệt và có cấu trúc như sau:
• ComponentName.js: File chứa mã nguồn của component.
• ComponentName.container.js: File chứa logic xử lý dữ liệu của component.
• ComponentName.res/style.css: File chứa CSS cho component.
• ComponentName.locale/vi-VN/...: Thư mục chứa ngôn ngữ cho component.
• core: Chứa các hàm xử lý logic nghiệp vụ của dự án.
• constants: Chứa các hằng số được sử dụng trong toàn bộ dự án.
• helpers: Chứa các hàm hỗ trợ cho toàn bộ dự án.
• reducers: Chứa các reducer của Redux.
• stores: Chứa các store của Redux

Tham khảo

Cấu trúc thư mục và cách viết component chuẩn trong React

REACT JS VÀ CÁC THÀNH PHẦN CƠ BẢN 

Cấu trúc dự án