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