Talk about React, how it works and what makes it special.

1. Разработан в Facebook

2. Перевернул представления WEB разработчиков

3. Переопределил лучшие практики

4. Перевернул представления о разработке
мобильных приложений

6. Как работает React и что делает его особенным

7. Что это ?
Библиотека для создания пользовательских интерфейсов

8. Как появился
Facebook ads page
Скрытые зависимости
Сложность изменения
Поиск и исправления багов

9. Обновлять страницу при каждом изменении
Обновление DOM
Удобно
Теряется фокус, скроллинг и тп
Крайне не эффективно

10. Обновление DOM
html
Структура html элементов из которых состоит web страница
head title
body
h1 p ul
li li

11. DOM
API
JavaScript
DOM
createElement(name)getElementsByTagName(tag)
getElementById(id)

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

13. Diff алгоритм
React контроль версий для DOM
html
body
h1
p ul
li li
html
body
h1
p ul
li li
Virtual React DOM Настоящий DOMO(n)

14. Обновлять страницу при каждом изменении c Virtual DOM
Обновление DOM
Удобно
Быстро, даже быстрее чем раньше

15. Компоненты
Позволяет разделить интерфейс на независимые,
переиспользуемые компоненты.
Данные могут передаваться только сверху вниз в одну
сторону.
function Welcome(props) {
return React.createElement(‘h1’, null, ‘Hello ${props.name}’);
}
class Welcome extends React.Component {
render() {
return React.createElement(‘h1’, null, ‘Hello ${props.name}’);
}
}

16. Декларативный
Plain JavaScript, JQuery - императивно
Найти элемент !->
Выполнить действие
React
Обновляет интерфейс при
изменении state
var element = getElementsByTagName(tag)
element.innerHTML = “New text !”
setState()
forceUpdate()

17. Переопределил лучшие практики
JSX - JavaScript as XML
class Welcome extends React.Component {
render() {
return <h1>Hello, {props.name}</h1>;
}
}
Смешанная логика и разметка

18. Перевернул представления о разработке мобильных приложений
JavaScript
iOS UIKit / Android View System
Асинхронный мост

19. Спасибо ! Вопросы ?