8 lưu ý khi làm việc với React. https://blog.duyetdev.com/2016/06/8-dieu-reactjs-beginner-nen-biet.html
1. JSX làm gì trong REACTJS 2. Babel là gì?- Props là gì? giong nhu property ngoai truyen vao trong comp. khong thay doi ben trong.
- State là gì? Trang thai gia tri ben trong 1 Comp, thay doi lien tuc ben trong.
- Props VS State ? props cha truyen xuong con dc, con truyen ra ngoai.
| Props VS State | ||
| Features | props | state |
| Can get initial value from parent Component? | Yes | Yes |
| Can be changed by parent Component? | Yes | No |
| Can set default values inside Component? | No | Yes |
| Can change inside Component? | Yes | Yes |
| Can change in child Components? | Yes | No |
18 * Truyền gia tri qua cac comp:
- 18.1 http://stackoverflow.com/questions/40377118/reactjs-parent-component-communicate-with-child-of-child-component
- 18.2 http://stackoverflow.com/documentation/reactjs/6567/communication-between-components#t=201702060643011229497
19 * Nên dùng bộ này để làm Project thật. react-starter-kit : https://github.com/kriasoft/react-starter-kit
19.1 Add sass https://github.com/kriasoft/react-starter-kit/blob/master/docs/recipes/how-to-use-sass.md
19.2 Add Redux, thì clone nhánh redux. https://github.com/kriasoft/react-starter-kit/tree/feature/redux
19.3 Cmd cho react starter kit: https://github.com/kriasoft/react-starter-kit/blob/master/docs/getting-started.md
20 * ADMIN template based on *19: https://github.com/start-react/sb-admin-react
21 * Reference https://www.icicletech.com/blog/16-opensource-reactjs-projects-to-learn-from
Study : https://github.com/andrewngu/sound-redux ReactJS + Redux + backend.
22 * Redux Study.
- --> Lý thuyết và từng bước: http://stackoverflow.com/documentation/react-redux/5797/getting-started-with-react-redux#t=201702230437586729831
https://github.com/erikras/react-redux-universal-hot-example https://medium.com/@rajaraodv/a-guide-for-building-a-react-redux-crud-app-7fe0b8943d0f#.koqrvuca8
Study how does redux work .
- DEMO: https://protected-escarpment-79486.herokuapp.com/signup
- https://github.com/rajaraodv/react-redux-blog/tree/master/public/src/reducers
TOP starter: http://andrewhfarmer.com/starter-project/
- Understand How Redux works:
- Giúp quản lý từng Page có các actions và states gì? đồng thời lưu thông tin hành động đó cùng state từng trường hợp. VD: trang login có
- Actions: Submit - Check Valid - Cancle - Success
- State là Success - InValid - Begin (blank)
22.1. Elements:
-
Actions: Là các hành động tương tác làm thay đổi State của Comp đó. submit hay là data dc load ve thành công. --> Nơi đăng ký các hành động, kể cả request API và trả ra payload. Payload là bất kỳ kết quả nào để thay doi giá trị state của page đó. vd: https://github.com/rajaraodv/react-redux-blog/blob/master/public/src/actions/posts.js Trong file trên có 2 phần. -.1 dispatch action : tạo action với các constant hệ thống, dẫn đường cho action. -.2 action creator : xử lý action và kết quả trả về paypload.
-
Reducers: Nơi đăng ký mỗi hành động sẽ tương ứng với các state như nào. --> Đồng thời file này cũng giúp theo dõi và chuyển đổi state theo các action. Vd: https://github.com/rajaraodv/react-redux-blog/blob/master/public/src/reducers/reducer_posts.js -.1 Gọi actions -.2 đăng ký state khởi tạo. -.3 kết nối action và state. -.4 Sau khi tạo dc các reducer, cần tạo 1 file gọi các reducer lớp Global trước https://github.com/rajaraodv/react-redux-blog/blob/master/public/src/reducers/index.js#L3 các reducer dùng giới hạn trong 1 page thì sẽ gọi sau khi cần.
-
Store: Khai báo de lưu trữ và Middleware de theo dõi ghi log action va state. https://github.com/rajaraodv/react-redux-blog/blob/master/public/src/store/configureStore.dev.js trong này gọi cac reducer vào để theo dõi. file trên setup theo kiểu hot module.
-
Middleware: Là phần thứ 3 giúp hỗ trợ theo dõi trong redux. --> Có thể override middleware, phần lớn là để promise chuyển tiếp giữa các action.
22.2. Workflow: -.2.1- Async Actions: là các xử lý trong action, rõ nhất là lấy data từ api. vd: https://github.com/rajaraodv/react-redux-blog/blob/master/public/src/actions/posts.js
-.2.2- Async Workflow: Đó là việc tạo reducer kết nối action với các state. và khai báo store để chờ theo dõi.
-.2.3- Redux Router: Đây là việc khai báo kết nối giữa việc thay đổi router (đi qua lại giữa các trang) và lưu trữ history -.2.3.1. npm install --save react-router -.2.3.2. xem file https://github.com/rajaraodv/react-redux-blog/blob/master/public/src/index.js
# Xem cấu trúc file 1 redux đơn giản có tương tác API: https://github.com/codeaholicguy/react-redux-tutorial/tree/master/authentication-with-soundcloud/src
24 * Auth in React by Router. : https://github.com/erikras/react-redux-universal-hot-example/blob/master/src/routes.js
Xem các bước làm: https://gist.github.com/iNikNik/f39c7dbeef384966c5ec#file-0-redux-auth-md
action({ store }) {
if (store.getState().user) {
/* user is logged in */
}
/* else */
}
https://github.com/kriasoft/react-starter-kit/pull/1183/files
https://github.com/kriasoft/react-starter-kit/pull/1053/files
Lý thuyết flow: https://auth0.com/blog/adding-authentication-to-your-react-flux-app/
25 * Context React
Để truyển và sửa, tác động data vượt cấp từ root tới con
https://facebook.github.io/react/docs/context.html
26 * LogOutkriasoft/react-starter-kit#1069
https://learnnextjs.com/basics/getting-started
1. SASS CSS: https://github.com/zeit/next.js/tree/master/examples/with-global-stylesheet
2. Set Up server: https://github.com/zeit/next.js/tree/master/examples/custom-server-express
3. Redux + redux Observer: https://github.com/zeit/next.js/tree/master/examples/with-redux-observable
4. Config route: https://github.com/gvergnaud/nextjs-dynamic-routes/tree/master/example/express