Kharkiv JS 2015: §¢§à§Ý§î §Ú §â§Ñ§Õ§à§ã§ä§î §ã§à§Ù§Õ§Ñ§ß§Ú§ñ §Ú§Ù§à§Þ§à§â§æ§ß§í§ç §á§â§Ú§Ý§à§Ø§Ö§ß§Ú§Û §ß§Ñ ReactJS (RU)
?
2 likes?1,647 views
§°§á§í§ä §ã§à§Ù§Õ§Ñ§ß§Ú§ñ §Ú§Ù§à§Þ§à§â§æ§ß§à§Ô§à §á§â§Ú§Ý§à§Ø§Ö§ß§Ú§ñ §ß§Ñ React - §á§à§Õ§Ó§à§Õ§ß§í§Ö §Ü§Ñ§Þ§ß§Ú, §ã §Ü§à§ä§à§â§í§Þ§Ú §á§â§Ö§Õ§Ö§ä§ã§ñ §ã§ä§à§Ý§Ü§ß§å§ä§î§ã§ñ. §±§â§Ú§Ý§à§Ø§Ö§ß§Ú§Ö - http://wall.itsquiz.com §ª§ã§ç§à§Õ§ß§Ú§Ü§Ú - https://github.com/WebbyLab/itsquiz-wall
Kharkiv JS 2015: §¢§à§Ý§î §Ú §â§Ñ§Õ§à§ã§ä§î §ã§à§Ù§Õ§Ñ§ß§Ú§ñ §Ú§Ù§à§Þ§à§â§æ§ß§í§ç §á§â§Ú§Ý§à§Ø§Ö§ß§Ú§Û §ß§Ñ ReactJS (RU)
- 1. §¢§à§Ý§î §Ú §â§Ñ§Õ§à§ã§ä§î §ã§à§Ù§Õ§Ñ§ß§Ú§ñ §Ú§Ù§à§Þ§à§â§æ§ß§í§ç §á§â§Ú§Ý§à§Ø§Ö§ß§Ú§Û §ß§Ñ ReactJS Viktor Turskyi Kharkiv JS 2015
- 2. §ª§Ù§à§Þ§à§â§æ§Ú§Ù§Þ o_O §£ §à§Ò§ë§Ú§ç §é§Ö§â§ä§Ñ§ç §Ö§Ô§à §Þ§à§Ø§ß§à §à§á§Ú§ã§Ñ§ä§î §ä§Ñ§Ü: §á§å§ã§ä§î §Õ§Ñ§ß§í §Õ§Ó§Ö §Ñ§Ý§Ô§Ö§Ò§â§Ñ§Ú§é§Ö§ã§Ü§Ú§Ö §ã§ä§â§å§Ü§ä§å§â§í (§Ô§â§å§á§á§í, §Ü§à§Ý§î§è§Ñ, §Ý§Ú§ß§Ö§Û§ß§í§Ö §á§â§à§ã§ä§â§Ñ§ß§ã§ä§Ó§Ñ §Ú §ä. §á.). §°§Ò§â§Ñ§ä§Ú§Þ§à§Ö §à§ä§à§Ò§â§Ñ§Ø§Ö§ß§Ú§Ö (§Ò§Ú§Ö§Ü§è§Ú§ñ) §Þ§Ö§Ø§Õ§å §ß§Ú§Þ§Ú §ß§Ñ§Ù§í§Ó§Ñ§Ö§ä§ã§ñ §Ú§Ù§à§Þ§à§â§æ§Ú§Ù§Þ§à§Þ, §Ö§ã§Ý§Ú §à§ß§à §ã§à§ç§â§Ñ§ß§ñ§Ö§ä §ï§ä§å §ã§ä§â§å§Ü§ä§å§â§å. (Wikipedia)
- 3. §ª§Ù§à§Þ§à§â§æ§ß§à§Ö §á§â§Ú§Ý§à§Ø§Ö§ß§Ú§Ö? §°§Õ§ß§à§ã§ä§â§Ñ§ß§Ú§é§ß§à§Ö §á§â§Ú§Ý§à§Ø§Ö§ß§Ú§Ö, §Ü§à§ä§à§â§à§Ö §Þ§à§Ø§ß§à §Ù§Ñ§á§å§ã§ä§Ú§ä§î §Ú §ß§Ñ §ã§Ö§â§Ó§Ö§â§Ö
- 8. §©§Ñ§é§Ö§Þ §ï§ä§à §ß§Ñ§Õ§à? (§à §â§Ñ§Õ§à§ã§ä§ñ§ç) §±§à§Ú§ã§Ü§à§Ó§Ñ§ñ §à§á§ä§Ú§Þ§Ú§Ù§Ñ§è§Ú§ñ §³§Ü§à§â§à§ã§ä§î
- 9. §°§ä§ä§Ö§ß§Ü§Ú §Ú§Ù§à§Þ§à§â§æ§ß§à§ã§ä§Ú 1) §ª§Ù§à§Þ§à§â§æ§ß§í§Û View 2) §ª§Ù§à§Þ§à§â§æ§ß§í§Ö §ã§ä§Ú§Ý§Ú 3) §ª§Ù§à§Þ§à§â§æ§ß§í§Û §â§à§å§ä§Ú§ß§Ô 4) §ª§Ù§à§Þ§à§â§æ§ß§Ñ§ñ §â§Ñ§Ò§à§ä§Ñ §ã REST API (fetching) 5) §ª§Ù§à§Þ§à§â§æ§ß§Ñ§ñ §Ü§à§ß§æ§Ú§Ô§å§â§Ñ§è§Ú§ñ 6) §ª§Ù§à§Þ§à§â§æ§ß§í§Û ES6 7) §ª§Ù§à§Þ§à§â§æ§ß§Ñ§ñ §Ý§à§Ü§Ñ§Ý§Ú§Ù§Ñ§è§Ú§ñ
- 10. §²§Ñ§Õ§à§ã§ä§î §á§Ö§â§Ó§Ñ§ñ - React
- 13. §¢§à§Ý§î §á§Ö§â§Ó§Ñ§ñ - §ß§Ö §â§Ñ§Ò§à§ä§Ñ§Ö§ä import §ã§ä§Ú§Ý§Ö§Û §Ó nodejs
- 14. §²§Ö§ê§Ö§ß§Ú§Ö - inline styles (§ã§ä§Ú§Ý§Ú - §á§â§à§ã§ä§à javascript)
- 15. §±§â§à§Ò§Ý§Ö§Þ§í §ã inlines styles 1) §á§ã§Ö§Ó§Õ§à-§Ñ§ä§â§Ú§Ò§å§ä§í :hover, :active, :focus 2) media queries 3) §Ñ§Ó§ä§à§á§â§Ö§æ§Ú§Ü§ã§Ú§ß§Ô 4) §à§Ò§ì§Ö§Õ§Ú§ß§Ö§ß§Ú§Ö §ã§ä§Ú§Ý§Ö§Û
- 17. §³§Ö§â§Ó§Ö§â §Ú §Ü§Ý§Ú§Ö§ß§ä §Ô§Ö§ß§Ö§â§Ú§â§å§ð§ä §â§Ñ§Ù§ß§å§ð §â§Ñ§Ù§Þ§Ö§ä§Ü§å
- 18. §¢§à§Ý§î §Ó§ä§à§â§Ñ§ñ - §Ü§Ý§Ú§Ö§ß§ä§ã§Ü§Ú§Û §Ñ§Ó§ä§à§á§â§Ö§æ§Ú§Ü§ã§Ö§â
- 19. §²§Ö§ê§Ö§ß§Ú§Ö, §Ü§à§ä§à§â§à§Ö §â§Ñ§Ò§à§ä§Ñ§Ö§ä (§Ó §ï§ä§à§ä §â§Ñ§Ù §â§Ñ§Ò§à§ä§Ñ§Ö§ä)
- 21. §¢§à§Ý§î §ä§â§Ö§ä§î§ñ - §Ó ¡°Material UI¡± §ä§à§Ø§Ö §Ü§Ý§Ú§Ö§ß§ä§ã§Ü§Ú§Û §Ñ§Ó§ä§à§á§â§Ö§æ§Ú§Ü§ã§Ö§â
- 22. §®§í §á§Ö§â§Ö§Ü§Ý§ð§é§Ú§Ý§Ú§ã§î §ß§Ñ Material Design Lite react-mdl (Material Design Lite) §â§Ñ§Ò§à§ä§Ñ§Ö§ä!!! ) §¹§ä§à §Õ§Ö§Ý§Ñ§ä§î?
- 23. §µ§â§Ñ §á§â§à§Ò§Ý§Ö§Þ§å §ã§à §ã§ä§Ú§Ý§ñ§Þ§Ú §Þ§í §â§Ö§ê§Ú§Ý§Ú!!!
- 24. §·..§â §ä§Ñ§Þ!!!
- 25. §¢§à§Ý§î §é§Ö§ä§Ó§Ö§â§ä§Ñ§ñ - §á§à§â§ñ§Õ§à§Ü §Ù§Ñ§Ô§â§å§Ù§Ü§Ú
- 26. §¬§Ñ§Ü §á§â§Ñ§Ó§Ú§Ý§î§ß§à? CSS §Ù§Ñ§Ô§â§å§Ø§Ñ§ä§î §Ó §ß§Ñ§é§Ñ§Ý§Ö Javascript §Ù§Ñ§Ô§â§å§Ø§Ñ§ä§î §Ó §Ü§à§ß§è§Ö
- 28. §²§Ö§ê§Ö§ß§Ú§Ö - Text Extract Plugin §Õ§Ý§ñ Webpack
- 29. §²§Ñ§Õ§à§ã§ä§î §Ó§ä§à§â§Ñ§ñ - React Router
- 33. §²§Ñ§Õ§à§ã§ä§î §ä§â§Ö§ä§î§ñ - Redux
- 34. §°§Õ§Ú§ß store §ß§Ñ §á§â§Ú§Ý§à§Ø§Ö§ß§Ú§Ö
- 35. §²§Ñ§Ò§à§ä§Ñ §ã REST API
- 36. §±§à§â§ñ§Õ§à§Ü §Ù§Ñ§Ô§â§å§Ù§Ü§Ú §¬§Ý§Ú§Ö§ß§ä: 1. §²§Ö§ß§Õ§Ö§â§Ú§ß§Ô React §Ü§à§Þ§á§à§ß§Ö§ß§ä§Ñ 2. §°§ä§à§Ò§â§Ñ§Ø§Ö§ß§Ú§Ö §ã§á§Ú§ß§ß§Ö§â§Ñ 3. §©§Ñ§Ô§â§å§Ù§Ü§Ñ §Õ§Ñ§ß§ß§í§ç 4. §°§Ò§ß§à§Ó§Ý§Ö§ß§Ú§ñ §ã§ä§â§Ñ§ß§Ú§è§í (§á§à§Ó§ä§à§â§ß§í§Û §â§Ö§ß§Õ§Ö§â§Ú§ß§Ô React §Ü§à§Þ§á§à§ß§Ö§ß§ä§Ñ) §³§Ö§â§Ó§Ö§â: 1. §©§Ñ§Ô§â§å§Ù§Ü§Ñ §Ó§ã§Ö§ç §ß§Ö§à§Ò§ç§à§Õ§Ú§Þ§í§ç §Õ§Ñ§ß§ß§í§ç 2. §²§Ö§ß§Õ§Ö§â§Ú§ß§Ô §ã§ä§â§Ñ§ß§Ú§è§í §ã§â§Ñ§Ù§å §ã §Õ§Ñ§ß§ß§í§Þ§Ú 3. §°§ä§Õ§Ñ§é§Ñ HTML §ß§Ñ §Ü§Ý§Ú§Ö§ß§ä
- 37. REST API - §à§Ò§ë§Ú§Û §Ü§à§Õ (isomorphic-fetch)
- 38. §¹§ä§à §à§ã§ä§Ñ§Ý§à§ã§î §Ù§Ñ §á§â§Ö§Õ§Ö§Ý§Ñ§Þ§Ú §Õ§à§Ü§Ý§Ñ§Õ§Ñ 1) §ª§Ù§à§Þ§à§â§æ§ß§Ñ§ñ §Ü§à§ß§æ§Ú§Ô§å§â§Ñ§è§Ú§ñ 2) §ª§Ù§à§Þ§à§â§æ§ß§Ñ§ñ §Ý§à§Ü§Ñ§Ý§Ú§Ù§Ñ§è§Ú§ñ 3) §ª§Ù§à§Þ§à§â§æ§ß§í§Û ES6
- 39. §³§ä§Ñ§ä§Ú§ã§ä§Ú§Ü§Ñ §µ§ß§Ú§Ó§Ö§â§ã§Ñ§Ý§î§ß§í§Û §Ü§à§Õ - 1778 SLOC (93%) §¬§à§Õ§Ö §ã§á§Ö§è§Ú§æ§Ú§é§Ö§ã§Ü§Ú§Û §Õ§Ý§ñ §Ü§Ý§Ú§Ö§ß§ä§Ñ - 33 SLOC (2%) §¬§à§Õ§Ö §ã§á§Ö§è§Ú§æ§Ú§é§Ö§ã§Ü§Ú§Û §Õ§Ý§ñ §ã§Ö§â§Ó§Ö§â§Ñ - 95 SLOC (5%)
- 40. §³§ã§í§Ý§Ü§Ú Redux http://rackt.org/redux/index.html React Router https://github.com/rackt/react-router Tutorial: Handcrafting an Isomorphic Redux Application (With Love) https://medium.com/@bananaoomarang/handcrafting-an-isomorphic-redux- application-with-love-40ada4468af4