react, redux, es2015 by max petruck
TRANSCRIPT
![Page 1: React, Redux, ES2015 by Max Petruck](https://reader033.vdocuments.net/reader033/viewer/2022042605/586fbb4e1a28abe57d8b8a0f/html5/thumbnails/1.jpg)
React, Redux,ES2015
![Page 2: React, Redux, ES2015 by Max Petruck](https://reader033.vdocuments.net/reader033/viewer/2022042605/586fbb4e1a28abe57d8b8a0f/html5/thumbnails/2.jpg)
React
![Page 3: React, Redux, ES2015 by Max Petruck](https://reader033.vdocuments.net/reader033/viewer/2022042605/586fbb4e1a28abe57d8b8a0f/html5/thumbnails/3.jpg)
Why React?ComponentsVirtualDOMJSX
![Page 4: React, Redux, ES2015 by Max Petruck](https://reader033.vdocuments.net/reader033/viewer/2022042605/586fbb4e1a28abe57d8b8a0f/html5/thumbnails/4.jpg)
ComponentsBreaking UI into a compoent hierarchy is logicalThey usually great at one thingComponents are highly reusable epecially in large appsJSX is great for this
![Page 5: React, Redux, ES2015 by Max Petruck](https://reader033.vdocuments.net/reader033/viewer/2022042605/586fbb4e1a28abe57d8b8a0f/html5/thumbnails/5.jpg)
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 ); } });
![Page 6: React, Redux, ES2015 by Max Petruck](https://reader033.vdocuments.net/reader033/viewer/2022042605/586fbb4e1a28abe57d8b8a0f/html5/thumbnails/6.jpg)
VirtualDOMEfficiencyIt has full event systemNo direct DOM manipulations... Well you can manipulate DOMdirectly if you want
![Page 7: React, Redux, ES2015 by Max Petruck](https://reader033.vdocuments.net/reader033/viewer/2022042605/586fbb4e1a28abe57d8b8a0f/html5/thumbnails/7.jpg)
Data Flow - Flux
![Page 8: React, Redux, ES2015 by Max Petruck](https://reader033.vdocuments.net/reader033/viewer/2022042605/586fbb4e1a28abe57d8b8a0f/html5/thumbnails/8.jpg)
What is Flux?
![Page 9: React, Redux, ES2015 by Max Petruck](https://reader033.vdocuments.net/reader033/viewer/2022042605/586fbb4e1a28abe57d8b8a0f/html5/thumbnails/9.jpg)
Redux
![Page 10: React, Redux, ES2015 by Max Petruck](https://reader033.vdocuments.net/reader033/viewer/2022042605/586fbb4e1a28abe57d8b8a0f/html5/thumbnails/10.jpg)
What is Redux?Is it Flux? Yes, and noOne store to rule them all.Three principles of Redux make state mutations predictable andreversable
![Page 11: React, Redux, ES2015 by Max Petruck](https://reader033.vdocuments.net/reader033/viewer/2022042605/586fbb4e1a28abe57d8b8a0f/html5/thumbnails/11.jpg)
Three principles of Redux1. Single source of truth2. State is read-only3. Mutations are written as pure functions - reducers
![Page 12: React, Redux, ES2015 by Max Petruck](https://reader033.vdocuments.net/reader033/viewer/2022042605/586fbb4e1a28abe57d8b8a0f/html5/thumbnails/12.jpg)
Redux actions
{ type: MY_ACTION_TYPE, // And here can be any data you need to transfer along with action // If you need any }
![Page 13: React, Redux, ES2015 by Max Petruck](https://reader033.vdocuments.net/reader033/viewer/2022042605/586fbb4e1a28abe57d8b8a0f/html5/thumbnails/13.jpg)
ReducersPure functions, that take action and state and return new state
State and Action ==> New State
![Page 14: React, Redux, ES2015 by Max Petruck](https://reader033.vdocuments.net/reader033/viewer/2022042605/586fbb4e1a28abe57d8b8a0f/html5/thumbnails/14.jpg)
Reducer compositionIt 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.
![Page 15: React, Redux, ES2015 by Max Petruck](https://reader033.vdocuments.net/reader033/viewer/2022042605/586fbb4e1a28abe57d8b8a0f/html5/thumbnails/15.jpg)
StoreHolds application stateAllows access to stateAllows state to be updated
![Page 16: React, Redux, ES2015 by Max Petruck](https://reader033.vdocuments.net/reader033/viewer/2022042605/586fbb4e1a28abe57d8b8a0f/html5/thumbnails/16.jpg)
Data Flow1. You call store.dispatch(action)2. Redux store calls the root reducer3. The Redux store saves state returned by the root reducer.
![Page 17: React, Redux, ES2015 by Max Petruck](https://reader033.vdocuments.net/reader033/viewer/2022042605/586fbb4e1a28abe57d8b8a0f/html5/thumbnails/17.jpg)
MiddlewareIt provides a third-party extension point between dispatching an
action, and the moment it reaches the reducer.
![Page 18: React, Redux, ES2015 by Max Petruck](https://reader033.vdocuments.net/reader033/viewer/2022042605/586fbb4e1a28abe57d8b8a0f/html5/thumbnails/18.jpg)
ES2015
![Page 19: React, Redux, ES2015 by Max Petruck](https://reader033.vdocuments.net/reader033/viewer/2022042605/586fbb4e1a28abe57d8b8a0f/html5/thumbnails/19.jpg)
ModulesStatic module structureHelps avoid global variablesSupport for cyclic dependencies between modules
![Page 20: React, Redux, ES2015 by Max Petruck](https://reader033.vdocuments.net/reader033/viewer/2022042605/586fbb4e1a28abe57d8b8a0f/html5/thumbnails/20.jpg)
Class
![Page 21: React, Redux, ES2015 by Max Petruck](https://reader033.vdocuments.net/reader033/viewer/2022042605/586fbb4e1a28abe57d8b8a0f/html5/thumbnails/21.jpg)
Lambda functionsNew function creation syntaxLexical bindingHas no 'arguments'
![Page 22: React, Redux, ES2015 by Max Petruck](https://reader033.vdocuments.net/reader033/viewer/2022042605/586fbb4e1a28abe57d8b8a0f/html5/thumbnails/22.jpg)
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 () => ({}) // {}
![Page 23: React, Redux, ES2015 by Max Petruck](https://reader033.vdocuments.net/reader033/viewer/2022042605/586fbb4e1a28abe57d8b8a0f/html5/thumbnails/23.jpg)
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); }
![Page 24: React, Redux, ES2015 by Max Petruck](https://reader033.vdocuments.net/reader033/viewer/2022042605/586fbb4e1a28abe57d8b8a0f/html5/thumbnails/24.jpg)
Rest operator
function f(x, ...y) { ··· } f('a', 'b', 'c'); // x = 'a'; y = ['b', 'c'] f(); // x = undefined; y = []
![Page 25: React, Redux, ES2015 by Max Petruck](https://reader033.vdocuments.net/reader033/viewer/2022042605/586fbb4e1a28abe57d8b8a0f/html5/thumbnails/25.jpg)
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]) {...}
![Page 26: React, Redux, ES2015 by Max Petruck](https://reader033.vdocuments.net/reader033/viewer/2022042605/586fbb4e1a28abe57d8b8a0f/html5/thumbnails/26.jpg)
let, constlet and const are block scopedlet and const don't get hoisted have TDZ (Temporal Dead Zone)Variables defined with let/const can't be defined more than oncein the same scope
![Page 27: React, Redux, ES2015 by Max Petruck](https://reader033.vdocuments.net/reader033/viewer/2022042605/586fbb4e1a28abe57d8b8a0f/html5/thumbnails/27.jpg)
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 ';
![Page 28: React, Redux, ES2015 by Max Petruck](https://reader033.vdocuments.net/reader033/viewer/2022042605/586fbb4e1a28abe57d8b8a0f/html5/thumbnails/28.jpg)
Async stuffPromisesGeneratorsES7 Proposals
![Page 29: React, Redux, ES2015 by Max Petruck](https://reader033.vdocuments.net/reader033/viewer/2022042605/586fbb4e1a28abe57d8b8a0f/html5/thumbnails/29.jpg)
The EndUseful links:
- -
- -
Why React?Flux overview
Redux documentationES6 Overview
My email: [email protected]
Our organization on Github: github.com/Lingvokot