React, Redux,ES2015

React

Why React?ComponentsVirtualDOMJSX

ComponentsBreaking UI into a compoent hierarchy is logicalThey usually great at one thingComponents are highly reusable epecially in large appsJSX is great for this

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 ); } });

VirtualDOMEfficiencyIt has full event systemNo direct DOM manipulations... Well you can manipulate DOMdirectly if you want

Data Flow - Flux

What is Flux?

Redux

What is Redux?Is it Flux? Yes, and noOne store to rule them all.Three principles of Redux make state mutations predictable andreversable

Three principles of Redux1. Single source of truth2. State is read-only3. Mutations are written as pure functions - reducers

Redux actions

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

ReducersPure functions, that take action and state and return new state

State and Action ==> New State

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.

StoreHolds application stateAllows access to stateAllows state to be updated

Data Flow1. You call store.dispatch(action)2. Redux store calls the root reducer3. The Redux store saves state returned by the root reducer.

MiddlewareIt provides a third-party extension point between dispatching an

action, and the moment it reaches the reducer.

ES2015

ModulesStatic module structureHelps avoid global variablesSupport for cyclic dependencies between modules

Class

Lambda functionsNew function creation syntaxLexical bindingHas no 'arguments'

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 () => ({}) // {}

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); }

Rest operator

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

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]) {...}

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

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 ';

Async stuffPromisesGeneratorsES7 Proposals

The EndUseful links:

- -

- -

Why React?Flux overview

Redux documentationES6 Overview

My email: maxim.petruck@lingvokot.com

Our organization on Github: github.com/Lingvokot