Embed Size (px)
Citation preview
Докладчик: Кашеверов АлександрДата: 19 июля 2016 года
Обзор React.js
О чём расскажу
• Про React• Virtual DOM• JSX• Примеры• Routing• Flux
Про React
Клиентские фреймворки / библиотеки
Статистика на 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
Статистика Stackoverflow за 2016 год
Статистика Stackoverflow за 2016 год
Статистика Stackoverflow за 2016 год
Кто использует React.js
InstagramCodeacademy
Yahoo
New York Times
Watsapp for web
Airbnb
React.js это
“A JAVASCRIPT LIBRARY FOR
BUILDING USER INTERFACES”
(c) facebook.github.io/react/
Виртуальный DOM
Реальный DOM (Document Object Model)
Виртуальный DOM
- это техника и набор библиотек / алгоритмов, которые позволяют улучшить производительность на клиентской стороне, избегая прямой работы с DOM путем работы с легким JavaScript-объектом, имитирующем DOM-дерево.
JSX
Как создать element в JS
JSX is a XML-like syntax extension to ECMAScript
JSX = JS+XML
Jsx в react
Нелогично? Абсурдно вставлять html в js?
Нелогично? Абсурдно вставлять html в js?
JSX упрощает работу с html элементами в javascript
Примеры
Hello world
Props
- нельзя изменить из компонента
React - пример timer
React - пример TODO list
React - пример TODO list
React - пример TODO list
React - пример TODO list
React - пример TODO list
Подключить библиотеку
React router
React router
React router
Подключить библиотеку
Некоторые особенности
Жизненный цикл
• ComponentWillMount• render• componentDidMount
• componentWillUpdate• shouldComponentUpdate• componentWillReceiveProps• componentDidUpdate• componentWillUnmount
Особенности
• Нет 2-way binding (только от parent к child)• Декларативный• Возвращаясь к проекту через год, ты вероятно поймешь, о чем шла речь
Flux
Flux - паттерн проектирования
Flux особенности
• Однонаправленность• Состояния• События• Не MVC
Популярные Flux фреймворки
• Redux• Alt• Reflux• Fluxxor
Что рассмотрели
Что рассмотрели
• Про React в этом мире• Virtual DOM• JSX• Простейшие примеры react• React-router• Несколько слов о Flux
Домашнее задание
Что почитать
• 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
