react best practice

react best practice

Transcript

1. react  best  prac*ce yiminghe@gmail.com   承玉
2. Outline •  Technology  stack   – react/koa/webpack/npm   •  Prac*ce   •  Summary
3. •  Technology  stack
4. react •  react:    library  for  build  user  interface  
5. react •  render
6. react •  diff
7. React-­‐components •  Components  based  on  react   •  hDps://github.com/react-­‐component  
8. react-­‐component
9. koa •  Koa:  next  genera*on  web  framework  for   node.js
10. chain
11. chair •  基于 koa，整合支付宝基础服务   – Session   – Hsf(Tr)   – Drm   – Tair   – Ls
12. chair •  Router   •  logger   •  Proxy  (generate  from  jar)
13. webpack •  hDp://webpack.github.io/   •  Module  bundler
14. npm •  Package  manager  for  javascript   (react,jquery,angular…)
15. tnpm •  集团内部源，支持私有包
16. •  prac*ce
17. tnpm •  package.json:
18. commonjs   •  commonjs  for  browser  and  server
19. react •  Components  Composi*on
20. Custom  page •  aliloan
21. React  rerender •  Render  on  data  change
22. webpack •  commonjs  compile,  sourcemap   •  Common  code  extrac*on   •  Css  extrac*on
23. webpack •  Development   – Build  into  memory   – koa  middleware   – No  hash  
24. webpack •  Build   – Compress   – hash  
25. jsx  on  server •  jsx  as  skeleton  on  server
26. share  code  with  server •  u*l/enum/jsx  …   •  app/common/getUserFromIvr.js:
27. dev.assets •  Half  dead   – Serve  sta*c  resources  in  nodejs  memory   (webpack)   – Speedy  cbd  cycle
28. summary •  server-­‐browser  harmony   – js  rules  all   – Use  React  on  server  and  browser   – Use  npm  on  server  and  browser   – Use  webpack  on  server  and  browser