React.js and Flux in details

React.js, Flux and React router in details + bonus React Native

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?

3. React elements composition

4. Nested elements

5. Nested elements

6. Nested elements
this.props.children

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

16. Сервер
Fetch.js
Superagent
jQuery.ajax

17. EventEmitter
EventEmitter Events
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

22. Flux: examples
https://github.com/facebook/flux/tree/master/examples
https://github.com/gaearon/flux-react-router-example

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

29. Facebook groups app

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…»