JAMJA Web ReactJS

Get Started. It's Free
or sign up with your email address
Rocket clouds
JAMJA Web ReactJS by Mind Map: JAMJA Web ReactJS

1. Folder construction

1.1. actions

1.1.1. mỗi container có 1 file tương ứng

1.2. assets

1.2.1. có folder css để build các file css vào, còn lại là file copy

1.3. components

1.3.1. gồm các component con

1.3.2. folder layout để chứa các layout template, có nhiều template cho các page khác nhau

1.4. config

1.4.1. file index.js: cấu hình cho các third-party như onesignal, branch-io, facebook (app_id, secret_id...), google universal analytics

1.4.2. các folder dev, prod, stagging: lưu các file .env để cấu hình các biến môi trường cho server. Tương ứng với các nhánh của git sẽ có cấu hình khác nhau. ví dụ: các nhánh có ký tự "release" sẽ sử dụng biến môi trường production, nhánh stagging sử dụng cấu hình của bản dùng thử (dữ liệu thật), các nhánh còn lại sử dụng cấu hình của môi trường dev

1.5. containers

1.5.1. chứa các file container, là nơi cấu hình cho load api, mỗi page sẽ có api khác nhau và đây là nơi sẽ gọi action tương ứng cho page

1.5.2. xử lý google analytics ở đây (pageview)

1.5.3. có 1 container đặc biệt: chuyên xử lý load css cho từng page, mỗi page sẽ load 1 phần css của nó. tất cả các container đều được extends từ thằng loadCSS container này

1.6. middleware

1.6.1. hàm sử dụng chung để load api, có thể là gọi 1 api hoặc lần lượt nhiều api (CALL hoặc CHAIN) sử dụng promise trong ES6

1.7. reducers

1.7.1. xử lý dữ liệu sau khi load từ api trả về, dữ liệu được lưu ở dạng Map hoặc List (ImmutableJS)

1.8. routes

1.8.1. Cấu hình toàn bộ đường dẫn của product

1.9. server

1.9.1. sử dụng expressJS và 1 cơ số các module phục vụ cho việc server side render (nếu là bot.. google bot, facebook auto crawler). Nếu là người dùng bình thường thì trả về khung html và sẽ không xử lý gì cả

1.10. stores

1.10.1. cấu hình cho store, sử dụng các middleware cho việc debug như redux-thunk....

1.11. styles

1.11.1. chứa tất cả các file scss

1.12. các file webpack

1.12.1. cấu hình cho webpack

1.13. gulpfile

1.13.1. cấu hình cho auto compress scss file, copy file, auto build js

2. Yêu cầu

2.1. nodejs

2.1.1. version 7+

2.2. npm

3. Cài đặt

3.1. npm install

3.2. npm start

3.2.1. chú ý: nếu lỗi thì xem thiếu module gì cài thêm cái đó, cài đủ sẽ hết lỗi :v vì vài lý do mà cái package.json nó chưa đủ các module cần thiết

3.3. https://localhost:3000

3.4. webpack đang sử dụng IP của máy cho red hot module, và nó dùng https. vậy nên cần cho phép quyền thực thi khi SSL trên local ko chính xác cần vào https://ip-may:3001 và https://ip-may:3000 để cho phép - tại sao lại làm thế này: để có thể test trên mobile luôn, mobile sẽ truy cập website bằng ip

4. các chú ý

4.1. react-route

4.1.1. sử dụng version 2.x, bản mới của nó là 4.x, cách sử dụng khác nhau hoàn toàn

4.2. reactjs

4.2.1. version 15.x

4.2.1.1. lưu ý khi sử dụng