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/
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
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.
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);
}
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 de ned with let/const can't be de ned 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 ';