Download - React Webinar Slides
ВВЕДЕНИЕ В REACT.JS
Вебинар по React.js
Вебинар 09/09/2016 Введение в React.js
ПОЗНАКОМИМСЯ?
ПОРШНЕВА КАТЕРИНА Front-end & UX @ YouScan
https://twitter.com/krambertech
https://www.facebook.com/catherine.porshneva
https://github.com/krambertech
https://vk.com/id180260885
https://www.linkedin.com/in/kporshnieva
React - библиотека для создания пользовательских интерфейсов.
React re-renders the whole app on any data (state) change
DOM IS SLOW 🐌
JavaScript IS FAST 🚀
Вебинар 09/09/2016 Введение в React.js
VIRTUAL DOM
Страница DOM дерево
Страница DOM дерево
<div>
<div>
<img><p>
<bold><span>
<h1>
Виртуальный DOM - легковесная копия реального DOM в виде JavaScript объектов
<div>
<div>
<img><p>
<bold><span>
<h1>
<div>
<div>
<img><p>
<bold><span>
<h1>
DOM diff
ПослеДо
<div>
<div>
<img><p>
<bold><span>
<h1>
<div>
<div>
<img><p>
<bold><span>
<h1>
PATCH
Реальный DOMВиртуальный DOM
‣ React строит новое виртуальное DOM-дерево
‣ Сравнивает с предыдущим
‣ Рассчитывает минимальное количество изменений DOM-дерева и добавляет их в очередь
‣ Применяет все изменения к реальному DOM-дереву
ПРИ КАЖДОМ ИЗМЕНЕНИИ…
Вебинар 09/09/2016 Введение в React.js
JSX
<Nav color="blue"> <Profile> Katya </Profile> </Nav
React.createElement( Nav, {color:"blue"}, React.createElement( Profile, null, "Katya" ) );
до после
Вебинар 09/09/2016 Введение в React.js
KEYS
а
а
b
b
с
сd
var blog = articles.map(function(article) { return ( <div key={article.id}> <h1>{article.title}</h1> <p>{article.text}</p> </div> ); })
Вебинар 09/09/2016 Введение в React.js
СОБЫТИЯ
onClick
onClick
onClick
onClick
onClick
onClick
onClick
onClick
onClick
Вебинар 09/09/2016 Введение в React.js
Q / A