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