The document discusses the key concepts and components of React and Redux, emphasizing the significance of building complex applications that handle changing data. It outlines the principles of Redux, including the single source of truth, state immutability, and the use of pure functions for state management. Additionally, it covers practical examples of creating React components and managing state and props, along with the advantages and challenges of using these technologies.

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!