Введение в react и react-native

1. Введение в react и
react-native

2. Олег Нечипоренко
Toughbyte
http://toughbyte.com

3. Web 1.0 (HTTP)
Backend
PHP, Java, .NET …
Frontend
HTML, CSS
GET, POST
Backend
PHP, Java, .NET …
Frontend
HTML, CSS
GET, POST

4. WEB 2.0 (AJAX)
Backend
PHP, Java, .NET …
Frontend
HTML, CSS, Javascript
(jQuery, Zepto, Prototype…)
Frontend
HTML, CSS, Javascript
(jQuery, Zepto, Prototype…)
XHRXHR JSON, XML

5. Single Page Apps
Frontend
XHR
Browser
Events
Web
Sockets …

6. SPA Frameworks
• Ember
• Backbone
• Knockout
• Angular
• Batman
• CanJS
• …

8. Преимущества Angular
• Двусторонний биндинг (two-way binding)
• Простой механизм внедрения зависимостей (DI)
• Директивы
• Большой выбор сервисов “из коробки”
• Быстрое прототипирование
• Огромный выбор open source плагинов

9. Двусторонний
биндинг

10. Внедрение зависимостей
(Dependency injection)

11. Директивы

12. Недостатки Angular
• Двусторонний биндинг (two-way binding)
• Внедрение зависимостей (DI)
• Директивы
• Дебаггинг
• Отсутствие server-side rendering
• Ограниченность фреймворком

13. Двусторонний биндинг

14. Внедрение зависимостей

15. Директивы

16. Дебаггинг

17. Отсутствие server-
side rendering

18. Ограниченность
фреймворком

19. Кривая изучения Angular

22. Web 1.0 (HTTP)
Backend
PHP, Java, .NET …
Frontend
HTML, CSS
GET, POST
Backend
PHP, Java, .NET …
Frontend
HTML, CSS
GET, POST

23. React.js
• DOM-манипуляции очень дорого обходятся
• Javascript очень быстрый
• Virtual DOM
• Очень быстрый diff-алгоритм (O(n3) -> O(n))

24. React не MVC
фреймворк
React - это библиотека для построения
UI, которая автоматически управляет
всеми обновлениями интерфейса при
изменении данных приложения

25. React не использует
шаблонов
• Javascript очень мощный и гибкий язык
программирования и это очень важно для
построения больших приложений
• React объединяет логику представления с
разметкой, что позволяет гораздо проще
поддерживать и расширять приложение
• Разметка и содержание находятся в Javascript.
Нет конкатенации строк, что создает меньше
пространства для XSS-атак

26. React-компоненты

27. JSX - Javascript syntax
extension

28. JSX - то не шаблонизатор

29. React-компонент
props state
Rendered view

30. Жизненный цикл
компонента

31. Stateful-компонент

32. Приложение

33. Управление данными в
react-приложении - Flux

34. Однонаправленный поток
данных

35. Redux

36. Reduce

37. Redux
Initial app state
Reduce(appState, action)
New app state

38. Пример

39. React + Redux

40. Actions

41. Reducer

42. Component

43. React-native

44. “Learn once, write
everywhere”, вместо
“Write once, run everywhere”

45. Пример кода

46. Что почитать
• React (https://facebook.github.io/react/)
• React-native (https://facebook.github.io/react-
native/)
• Flux (https://facebook.github.io/flux/)
• Redux (http://redux.js.org)
• React tutorials (https://medium.com/react-tutorials)

47. Кого почитать
• Dan Abramov (https://github.com/gaearon, https://
twitter.com/dan_abramov, https://medium.com/
@dan_abramov)
• Michael Jackson (https://github.com/mjackson,
https://twitter.com/mjackson)
• https://twitter.com/Vjeux
• Cheng Lou (https://github.com/chenglou, https://
twitter.com/_chenglou)

48. Я
• Facebook - https://www.facebook.com/meafmira
• Github - https://github.com/miafmira
• Twitter - https://twitter.com/meafmira