Летняя практика DataArt & ПММ 2016

1. Докладчик: Кашеверов Александр
Дата: 19 июля 2016 года
Обзор React.js

3. О чём расскажу
• Про React
• Virtual DOM
• JSX
• Примеры
• Routing
• Flux

4. Про React

5. Клиентские фреймворки / библиотеки

6. Статистика на Github
commits 5015 12643 3322 6968
contributors 306 601 289 746
stars 1779 1117 25141 3251
open issues 1230 169 37 490
1 commit date Sep 18, 2014 Apr 30, 2011 Sep 30, 2010 May 29, 2013
состояние на 17 июля 2016

7. Статистика Stackoverflow за 2016 год

8. Статистика Stackoverflow за 2016 год

9. Статистика Stackoverflow за 2016 год

10. Кто использует React.js
Facebook
InstagramCodeacademy
Yahoo
New York Times
Watsapp for web
Airbnb

11. React.js это
“A JAVASCRIPT LIBRARY FOR
BUILDING USER INTERFACES”
(c) facebook.github.io/react/

12. Виртуальный DOM

13. Реальный DOM (Document Object Model)

14. Виртуальный DOM
- это техника и набор библиотек / алгоритмов, которые
позволяют улучшить производительность на
клиентской стороне, избегая прямой работы с DOM
путем работы с легким JavaScript-объектом,
имитирующем DOM-дерево.

15. JSX

16. Как создать element в JS

17. JSX is a XML-like syntax extension to
ECMAScript
JSX = JS+XML

18. Jsx в react

19. Нелогично? Абсурдно вставлять html в js?

20. Нелогично? Абсурдно вставлять html в js?
JSX упрощает работу с html
элементами в javascript

21. Примеры

22. Hello world

23. Props
- нельзя изменить из компонента

24. React - пример timer

25. React - пример TODO list

26. React - пример TODO list

27. React - пример TODO list

28. React - пример TODO list

29. React - пример TODO list

30. Подключить библиотеку

31. React router

32. React router

33. React router

34. Подключить библиотеку

35. Некоторые особенности

36. Жизненный цикл
• ComponentWillMount
• render
• componentDidMount
• componentWillUpdate
• shouldComponentUpdate
• componentWillReceiveProps
• componentDidUpdate
• componentWillUnmount

37. Особенности
• Нет 2-way binding (только от parent к child)
• Декларативный
• Возвращаясь к проекту через год,
ты вероятно поймешь, о чем шла
речь

38. Flux

39. Flux - паттерн проектирования

40. Flux особенности
• Однонаправленность
• Состояния
• События
• Не MVC

41. Популярные Flux фреймворки
• Redux
• Alt
• Reflux
• Fluxxor

42. Что рассмотрели

43. Что рассмотрели
• Про React в этом мире
• Virtual DOM
• JSX
• Простейшие примеры react
• React-router
• Несколько слов о Flux

44. Домашнее задание
Что почитать
• Alexander.Kasheverov@dataart.com
• https://github.com/kashesandr
• https://twitter.com/kashesandr
Контакты
Электронная очередь в банк • http://bit.ly/summer2016react
• http://bit.ly/summer2016react-ru
• http://bit.ly/summer2016babel
• http://bit.ly/summer2016react-router
• http://bit.ly/summer2016redux

45. Пожалуйста, ответьте на 3 вопроса
bit.ly/web-summer-2016