04.07.2015 WebCamp:Front-end Developers Day Артем Тритяк (Lead FrontEnd developer at Electric Cloud) "React.js LiveCoding session" В реальном времени мы разработаем приложение на React / Flux / ES6 / Webpack Подробнее: http://geekslab.co, http://webcamp.in.ua/ https://www.facebook.com/GeeksLab.co , https://www.facebook.com/OdessaInnovationWeek https://www.youtube.com/user/GeeksLabVideo

1. • Сделаем сложный UI без боли и страданий
• Ваще просто - перерисуем страницу на изменение
• React.js сделает DIFF и внесет изменения в DOM
Реакт? Че-че?

2. Nested elements

3. React elements composition

5. Flux

6. Flux: one directional data flow

7. onClick
onSelect
onChange
…
Actions.actionName(params)
!
UserActions.createUser(…)
UserActions.selectGroup(…) 1
2
3
Flux: Who is owner? React is owner

8. 1
2
3
4

9. Flux: Action -> WebUtils -> Dispatcher
1
2
3

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

11. EventEmitter
EventEmitter Events
1
2
3

12. Flux: «умные» и «глупые» компоненты
Smart component
(state)
STORE
ACTIONS

13. Flux: «умные» и «глупые» компоненты
Smart component
(state)
STORE
ACTIONS
Dumb
component
(props)
Dumb
component
(props)
Dumb
component
(props)
props
ФЫВ
callbacks

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

15. React Router

16. React Router

17. React Router

18. +Bonus
React Native
October 2015
https://github.com/facebook/react-native

19. Facebook groups app

20. • 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

21. iOS / Android devs: «But…»