Basic concepts of React, Flux, Redux and the most important ES2015 (ES6) features. Presentation on Github pages: http://lingvokot.github.io/React-Redux-ES6-presentation/

1. React, Redux,
ES2015

2. React

3. Why React?
Components
VirtualDOM
JSX

4. Components
Breaking UI into a compoent hierarchy is logical
They usually great at one thing
Components are highly reusable epecially in large apps
JSX is great for this

5. JSX JS
var HelloMessage = React.createClass({
render: function() {
return <div>Hello {this.props.name}</div>;
}
});
var HelloMessage = React.createClass({
displayName: "HelloMessage",
render: function render() {
return React.createElement(
"div",
null,
"Hello ",
this.props.name
);
}
});

6. VirtualDOM
Efficiency
It has full event system
No direct DOM manipulations... Well you can manipulate DOM
directly if you want

7. Data Flow - Flux

8. What is Flux?

9. Redux

10. What is Redux?
Is it Flux? Yes, and no
One store to rule them all.
Three principles of Redux make state mutations predictable and
reversable

11. Three principles of Redux
1. Single source of truth
2. State is read-only
3. Mutations are written as pure functions - reducers

12. Redux actions
{
type: MY_ACTION_TYPE,
// And here can be any data you need to transfer along with action
// If you need any
}

13. Reducers
Pure functions, that take action and state and return new state
State and Action ==> New State

14. Reducer composition
It helps to split data handling logic, when each of reducers is
managing its own part of the global state
Redux provides util combineReducers()that makes it easy to use.

15. Store
Holds application state
Allows access to state
Allows state to be updated

16. Data Flow
1. You call store.dispatch(action)
2. Redux store calls the root reducer
3. The Redux store saves state returned by the root reducer.

17. Middleware
It provides a third-party extension point between dispatching an
action, and the moment it reaches the reducer.

18. ES2015

19. Modules
Static module structure
Helps avoid global variables
Support for cyclic dependencies between modules

20. Class

21. Lambda functions
New function creation syntax
Lexical binding
Has no 'arguments'

22. Examples
function () { return 1; }
() => { return 1; }
() => 1
function (a) { return a * 2; }
(a) => { return a * 2; }
(a) => a * 2
a => a * 2
function (a, b) { return a * b; }
(a, b) => { return a * b; }
(a, b) => a * b
function () { return arguments[0]; }
(...args) => args[0] // ES6 rest syntax helps to work without 'arguments'
() => {} // undefined
() => ({}) // {}

23. Spread operator
Math.max(-1, 5, 11, 3) // 11
Math.max(...[-1, 5, 11, 3]) // 11
Math.max(-1, ...[5, 11], 3) // 11
// example from Tic Tac Toe React
// with ES6 spread operator
function getMaxElement(arr) {
return Math.max(...arr);
}
// without ES6 spread
function getMaxElement(arr) {
return Math.max.apply(null, arr);
}

24. Rest operator
function f(x, ...y) {
···
}
f('a', 'b', 'c'); // x = 'a'; y = ['b', 'c']
f(); // x = undefined; y = []

25. Destructuring
// Can work with objects
let {one, two} = {one: 1, two: 2} // one = 1, two = 2
// And arrays
let [,,x] = ['a', 'b', 'c', 'd']; // x = 'c'
// Is that it? Nope, array destructuring works with iterable objects
// Like strings
let [x,y] = 'abc'; // x='a'; y=['b', 'c']
// And Set
let [x, y] = new Set(['x', 'y']); // x = 'x', y = 'y'
// and etc.
// It's works great with rest operator
let [x,...y] = 'abc'; // x='a'; y=['b', 'c']
// And looks great in functions
function ([x, y, ...rest]) {...}

26. let, const
let and const are block scoped
let and const don't get hoisted have TDZ (Temporal Dead Zone)
Variables defined with let/const can't be defined more than once
in the same scope

27. Template strings
// Can contain multiline strings
let multiline = `line 1
line2`; // and spaces matter
let x = 1;
// Can evaluate variables, or expressions inside ${...}
let str = `${x + 41}` // str = '42'
// Can be tagged
function firstString(stringsArray, ...allValues) { // using the new ES6 rest syntax
// allValues is array of values passed inside ${}
return stringsArray[0];
}
let firstStr = firstString `Some text ${x} bla-bla`;
// firstStr = 'Some text ';

28. Async stuff
Promises
Generators
ES7 Proposals

29. The End
Useful links:
-
-
-
-
Why React?
Flux overview
Redux documentation
ES6 Overview
My email: maxim.petruck@lingvokot.com
Our organization on Github: github.com/Lingvokot