Александр Кашеверов — Обзор React.js

Докладчик: Кашеверов АлександрДата: 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

Facebook

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

Домашнее задание

Что почитать

• 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

Пожалуйста, ответьте на 3 вопроса

bit.ly/web-summer-2016