Презентация подготовлена по материалам выступления Ярослава Савченко на Vitebsk Anticrisic Meetup (11.03.2016). http://devowl.org/

1. Реактивная
тяга
Ярослав Савченко
EPAM

2. Problem

3. Complicated and unpredictable state

4. MVC

5. Real MVC

6. UI = f(state)

7. Flux

8. Flux

9. React

10. “ We built React to solve one problem: building
large applications with data that changes over
time. “
React documentation

11. Virtual DOM

12. React - Hello world
class HelloMessage extends React.Component {
constructor(props) {
super(props);
}
render() {
return <div>Hello {this.props.name}</div>;
}
}

13. React - Hello world
class HelloMessage extends React.Component {
constructor(props) {
super(props);
}
render() {
return <div>Hello {this.props.name}</div>;
}
}

14. React - JSX
render() {
return <div>Hello {this.props.name}</div>;
}
render() {
return React.createElement("div", null, "Hello ", this.props.name);
}

15. “ We think that markup and the code that
generates it are intimately tied together. ”
React documentation

16. React - component creation
class HelloMessage extends React.Component {
constructor(props) {
super(props);
}
render() {
return <div>Hello {this.props.name}</div>;
}
}
ReactDOM.render(<HelloMessage name="World" />, mountNode);

17. React - props
class HelloMessage extends React.Component {
constructor(props) {
super(props);
}
render() {
return <div onClick={this.props.handleClick}>
Hello {this.props.name}
</div>;
}
}
ReactDOM.render(<HelloMessage
name="World"
handleClick={someCallback} />, mountNode);

18. React - props validation
class HelloMessage extends React.Component {
propTypes: {
name: React.PropTypes.string,
name: React.PropTypes.oneOf(["World", "People"])
},
constructor(props) { /* … */ }
render() {
return <div>Hello {this.props.name}</div>;
}
}

19. React - state
class HelloMessage extends React.Component {
constructor(props) {
super(props);
this.state = { name: this.props.name || "World" };
}
handleClick = (event) => {
this.setState({ name: event.target.value });
}
render() {
return (<div>Hello
<input
value={this.state.name}
onChange={this.handleClick}/>
</div>);
}
}

20. React - stateless function
const HelloMessage = (props) => {
let name = props.name.toUpperCase();
return <div>Hello {this.props.name}</div>
}
/* or */
const HelloMessage = ({name}) => <div>Hello {name}</div>;

21. Component Lifecycle
Mount
Update
Unmount
...
Update

22. Component Lifecycle
Mount
- getDefaultProps
- getInitialState
- componentWillMount
- render
- componentDidMount
Update
- componentWillReceiveProps
- shouldComponentUpdate
- componentWillUpdate
- render
- componentDidUpdate
Unmount
- componentWillUnmount

23. Redux

24. Redux
… is a predictable state container for JavaScript apps.
Three Principles:
● Single source of truth
● State is read-only
● Changes are made with pure functions

25. Redux
Single source of truth
The state of your whole application is stored in an object tree within a single store
let initialState = {
todos: [ {...}, {...}, … {...} ],
filter: "active"
}

26. Redux
State is read-only
The only way to mutate the state is to emit an action, an object describing what
happened
const action = {
type: SET_VISIBILITY_FILTER,
filter: "active"
}

27. Redux
Changes are made with pure functions
Pure reducers specify the state tree transformations by actions
const todoApp = (state = initialState, action) => {
switch (action.type) {
case SET_VISIBILITY_FILTER:
return {...state, visibilityFilter: action.filter};
default:
return state;
}
}

28. Redux
The Store is the object that brings them together
Create store:
let store = createStore(todoApp, initialState);
Dispatch an action:
store.dispatch(filterAction);
Subscribe/unsubscribe
let unsubscribe = store.subscribe(() =>
console.log(store.getState());
);

29. Why React and Redux?
Because now UI=React(Redux)

30. Advantages of these approach
● Simplify app
● Debugging
● Testing
● Performance
● Reusability
● Bleeding-edge features
(Server-side render, CSS Modules etc.)

31. Problems
● Javascript Fatigue
● Build (React, Redux, react-redux,
react-router, ES2015, Babel,
webpack)
● Only View and Store
● Inconsistent React docs
● Big size (React ~26kb,
Backbone ~20kb, Angular ~40kb)

32. Holywar?

33. Links to start with
● Pete Hunt: React How-to
https://github.com/petehunt/react-howto
● Getting started with React
http://facebook.github.io/react/docs/getting-started.html
● Dan Abramov: Getting started with Redux
https://egghead.io/series/getting-started-with-redux
● 0 to 1 : Getting started with Redux
http://www.jchapron.com/2015/08/14/getting-started-with-redux/
https://habrahabr.ru/post/269831/

34. Thanks,
and have a good flight!