• Сделаем сложный UI без боли и страданий

• Ваще просто - перерисуем страницу на изменение

• React.js сделает DIFF и внесет изменения в DOM

Реакт? Че-че?

Nested elements

React elements composition

Flux

Flux: one directional data flow

onClick onSelect

onChange …

Actions.actionName(params) !

UserActions.createUser(…) UserActions.selectGroup(…) 1

2

3

Flux: Who is owner? React is owner

1

2

3

4

Flux: Action -> WebUtils -> Dispatcher

12

3

Сервер

Fetch.js Superagent jQuery.ajax

EventEmitter

EventEmitter Events

1

2

3

Flux: «умные» и «глупые» компоненты

Smart component (state)

STORE

ACTIONS

Flux: «умные» и «глупые» компоненты

Smart component (state)

STORE

ACTIONS

Dumb component

(props)

Dumb component

(props)

Dumb component

(props)

props

ФЫВcallbacks

Flux: examples

https://github.com/facebook/flux/tree/master/examples

https://github.com/gaearon/flux-react-router-example

React Router

React Router

React Router

+Bonus

React Native

October 2015

https://github.com/facebook/react-native

Facebook groups app

• JavaScript

• NO WebView

• NO browser

• JavaScript logic in separated thread does not block Native UI

• JSX HTML -> Native platform elements

• Learn once, write everywhere

• Example: http://www.facebookgroups.com/

React Native

iOS / Android devs: «But…»