Документ обсуждает использование React.js для построения сложных пользовательских интерфейсов, подчеркивая его преимущества в производительности и удобстве разработки. Он включает подробности о таких концепциях, как Virtual DOM, JSX и Flux, а также упоминает серверный рендеринг и его применение с различными серверными технологиями. Также рассматривается React Native как способ разработки кросс-платформенных приложений, выделяя преимущества JavaScript и различных методов стилизации.

1. React.js
Backbone и FLUX
Артем Тритяк

2. • Построение сложного UI без боли
• Все просто - перерисовка всей страницы на
любое изменение
• React.js сделает diff и внесет только изменения в
DOM
Реакт? Что такое Реакт? Зачем Реакт?

3. JSX, Virtual DOM

5. Композиция элементов

6. Вложенные элементы

7. Вложенные элементы

8. Вложенные элементы
this.props.children

9. JSX -> JS compiler
React Rails
PyReact, Django React
Grunt.js React, Gulp.js React, React Tools

10. • SEO - не нужен phantom.js renderer для SPA
• Ускорение первой загрузки
• Подхватывание JS-bindings «на лету»
Server Side Rendering

11. Server Side Rendering: Node.js

12. Server Side Rendering: Node.js
https://github.com/artyomtrityak/react-server-render-node

14. Flux

15. Flux: one directional data flow

16. Сервер
Model.fetch
Model.destroy
Model.saveCollection.fetch
Model.parse

17. onClick
onSelect
onChange
…
Actions.actionName(params)8
!
UserActions.createUser(…)
UserActions.selectGroup(…) 1
2
3
Flux: Кто главный? React главный

18. 1
2
3
4

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

20. Model
Model Events
change
change:fieldName
invalid
…
1
2
3

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

22. +Bonus
React Native

23. Facebook groups app

24. • JavaScript
• НЕ WebView
• НЕ браузер
• JavaScript логика в отдельном потоке, не блокирует Native
UI
• JSX HTML -> Native platform elements
• Learn once, write everywhere
• Example: http://www.facebookgroups.com/
React Native

25. CSS
BEM, MCSS…
!
SASS, Akella SASS :)
LESS, STYLUS…
!
Пре-процессоры
Пост-процессоры
Приоритет: #id .class <div> inline

27. Глобальный namespace
использовать плохо, да?

28. CSS

29. Inline CSS, CSS in JS

30. • Все знают JavaScript
• Функции
• Переменные
• Scopes
• Минификация
• Наследование
Преимущества

31. Но это же…