I-Cấu trúc dự án :
1- 2 file .env.development, và env.production là 2 file config api trên dev và live để sử dụng chung.
2 - Folder asset gồm ảnh, font , file scss của
3-Folder servies : lơi chứa các file viết các funciton gọi api tương ứng cho từng trang, như trang home, trang đăng ký đăng nhập vvv… bên trong thư mục có file axiosService.js là file config viết các hàm get, post put, error dùng chung và xử lý các lỗi khi request.
4- Folder redux : nơi config store, thêm các thử viện redux saga hoặc reduxthunk, của project.
5-Folder reducers: nơi config, import các reducer tương ứng với từng trang lớn nhỏ trong của project.
6- Folder constants : nơi lưu các file config dùng chung cho project,như các type,các sctionsType của redux, các event name cho clevatap, các text , các routerName vv…..
7- Folder component : là folder chứa các component dùng chung cho toàn project như các component popup, các game,banner, các Form, chú ý bên trong có folder Router nơi config router của toàn dự án , và file configGame.js nơi config các tương tác game của project vvv ….
-Folder Modules : là folder chính chứa các trang chính của dự án, như trang home, tủ sách, quiz tập huấn vvv …..

• Các thư viện hay dùng styleComponent, reduxThunk, react-hook-form,react hook, và canvas (
  . fab ric.js)

II-Tạo mới một trang
-Tạo một thư mục mới tướng ứng với trang mình cần tạo trong thư mục modules. Tạo file containter.js , file này chỉ xử lý logic import các data từ store và các dispatch. Tạo thư mục componet bên trong là chứa một file index.js nơi import các component dùng chung ( folder 7 ở trên) hoặc các component mới của trang mới tạo, rui import file index đó vào trong component container.js ngoài . ( chú ý ko render phần UI ở trong component conatiner.js )
III- thư mục app trong modules là nơi render router và xử lý phần quyền.
-Phần authen xử dụng function PrivateRouter kết hợp data config với key là 1,2 để chia quyền, 1 là khong co token , 2 là có token ( cần tối ưu hơn phần này )

• function onShowPoup là nơi config tất cả các popup của project , nó dùng chung chỉ thay đổi nội dung content bằng các component chuyền vào và được show hide bằng các type. (vào đọc code). Để thay đổi đc type của các popup thì xử dụng onDispathTogglePopupSuccess vào các trang signIn, signOut xem vidu

IV- Muốn tìm các trang trong project tưng ứng với các parameter
vd : https://www.hoc10.com/bo-sach-canh-dieu.html
Muốn tìm compnent của trang bộ sách cánh diều , copy “bo-sach-canh-dieu.html” tìm kiếm sẽ ra đc file path.js chữa nó rui copy cái key “ROUTE_PATH_GENERAL” vào edu_lms/components/router là sẽ tìm đc.

V - Các Tương tác hiện giờ được để trong edu_lms/ components/Game.

• Câu trúc phần trang đọc sách: Modules/ReadingBooks : đây là nơi render các trang sách và xử lý các điểm trạm
• Khi click vào các điểm trạm ta sẽ lưu id của các điểm trạm đó trong stores,và sau đó thực hiện show popup giao diện lên với hàm xử onQuestionGame,
• Giao diện popup và nội dung bên trong được xử lý trong component : edu_lms/components/ListQuestion/ : đây là nơi gọi api lấy ra data của các tương tac game dựa vào id ta đã lưu trước đó trong stores, là nơi xử lý giao diện đầu tiền gồm ảnh của điểm trạm xử lý hiệu ứng zoom in , zoom out của anh. Cùng với đó là giao diện thứ 2 nơi show các tương tác của sách khi ta nhấn bắt đầu . ở trong Component QuestionWrapper.js là nơi show các dạng game tướng ứng với type,

I-Cấu trúc dự án :
1- 2 file .env.development, và env.production là 2 file config api trên dev và live để sử dụng chung.
2 - Folder asset gồm ảnh, font , file scss của
3-Folder servies : lơi chứa các file viết các funciton gọi api tương ứng cho từng trang, như trang home, trang đăng ký đăng nhập vvv… bên trong thư mục có file axiosService.js là file config viết các hàm get, post put, error dùng chung và xử lý các lỗi khi request.
4- Folder redux : nơi config store, thêm các thử viện redux saga hoặc reduxthunk, của project.
5-Folder reducers: nơi config, import các reducer tương ứng với từng trang lớn nhỏ trong của project.
6- Folder constants : nơi lưu các file config dùng chung cho project,như các type,các sctionsType của redux, các event name cho clevatap, các text , các routerName vv…..
7- Folder component : là folder chứa các component dùng chung cho toàn project như các component popup, các game,banner, các Form, chú ý bên trong có folder Router nơi config router của toàn dự án , và file configGame.js nơi config các tương tác game của project vvv ….
-Folder Modules : là folder chính chứa các trang chính của dự án, như trang home, tủ sách, quiz tập huấn vvv …..

• Các thư viện hay dùng styleComponent, reduxThunk, react-hook-form,react hook, và canvas (
  . fab ric.js)

II-Tạo mới một trang
-Tạo một thư mục mới tướng ứng với trang mình cần tạo trong thư mục modules. Tạo file containter.js , file này chỉ xử lý logic import các data từ store và các dispatch. Tạo thư mục componet bên trong là chứa một file index.js nơi import các component dùng chung ( folder 7 ở trên) hoặc các component mới của trang mới tạo, rui import file index đó vào trong component container.js ngoài . ( chú ý ko render phần UI ở trong component conatiner.js )
III- thư mục app trong modules là nơi render router và xử lý phần quyền.
-Phần authen xử dụng function PrivateRouter kết hợp data config với key là 1,2 để chia quyền, 1 là khong co token , 2 là có token ( cần tối ưu hơn phần này )

• function onShowPoup là nơi config tất cả các popup của project , nó dùng chung chỉ thay đổi nội dung content bằng các component chuyền vào và được show hide bằng các type. (vào đọc code). Để thay đổi đc type của các popup thì xử dụng onDispathTogglePopupSuccess vào các trang signIn, signOut xem vidu

IV- Muốn tìm các trang trong project tưng ứng với các parameter
vd : https://www.hoc10.com/bo-sach-canh-dieu.html
Muốn tìm compnent của trang bộ sách cánh diều , copy “bo-sach-canh-dieu.html” tìm kiếm sẽ ra đc file path.js chữa nó rui copy cái key “ROUTE_PATH_GENERAL” vào edu_lms/components/router là sẽ tìm đc.

V - Các Tương tác hiện giờ được để trong edu_lms/ components/Game.

• Câu trúc phần trang đọc sách: Modules/ReadingBooks : đây là nơi render các trang sách và xử lý các điểm trạm
• Khi click vào các điểm trạm ta sẽ lưu id của các điểm trạm đó trong stores,và sau đó thực hiện show popup giao diện lên với hàm xử onQuestionGame,
• Giao diện popup và nội dung bên trong được xử lý trong component : edu_lms/components/ListQuestion/ : đây là nơi gọi api lấy ra data của các tương tac game dựa vào id ta đã lưu trước đó trong stores, là nơi xử lý giao diện đầu tiền gồm ảnh của điểm trạm xử lý hiệu ứng zoom in , zoom out của anh. Cùng với đó là giao diện thứ 2 nơi show các tương tác của sách khi ta nhấn bắt đầu . ở trong Component QuestionWrapper.js là nơi show các dạng game tướng ứng với type,