React.js and Flux in details
3 likes2,544 views
This document discusses React.js and Flux. It describes how React.js allows building complex user interfaces without difficulty by re-rendering only changed parts of the DOM. It also covers server-side rendering with React.js for SEO and performance benefits. The document then explains Flux, including its one-directional data flow from Actions to Stores via a Dispatcher. It provides examples of smart and dumb React components using Flux. Finally, it briefly mentions React Router and React Native.
React.js and Flux in details
- 1. React.js и FLUX Artyom Trityak React.js and Flux Artyom Trityak Electric Cloud Skype: art.trityak E-mail: [email protected]
- 2. • Build complex UI without pain • That’s easy - re-render whole page on change • React.js will make a diff and apply only changes to DOM React? What’s React? Why React?
- 7. • SEO - no need phantom.js renderer for SPA • Increase first load speed • JS-bindings «on flight» Server Side Rendering
- 8. Server Side Rendering: Node.js
- 9. Server Side Rendering: Node.js https://github.com/artyomtrityak/react-server-render-node
- 11. Flux
- 12. Flux: one directional data flow
- 13. onClick onSelect onChange … Actions.actionName(params) ! UserActions.createUser(…) UserActions.selectGroup(…) 1 2 3 Flux: Who is owner? React is owner
- 14. 1 2 3 4
- 15. Flux: Action -> WebUtils -> Dispatcher 1 2 3
- 18. ES6 Store
- 19. Immutable.js http://facebook.github.io/immutable-js • Immutable state • One directional data flow
- 20. Flux: «умные» и «глупые» компоненты Smart component (state) STORE ACTIONS
- 21. Flux: «умные» и «глупые» компоненты Smart component (state) STORE ACTIONS Dumb component (props) Dumb component (props) Dumb component (props) props ФЫВ callbacks
- 23. React Router
- 24. React Router
- 25. React Router
- 26. React Router
- 27. React Router
- 28. +Bonus React Native end 2015 - beg 2016 https://github.com/facebook/react-native
- 30. • JavaScript • NO WebView • NO browser • JavaScript logic in separated thread does not block Native UI • JSX HTML -> Native platform elements • Learn once, write everywhere • Example: http://www.facebookgroups.com/ React Native
- 31. iOS / Android devs: «But…»