React

Why React?

• Components
• VirtualDOM
• JSX

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

										
var HelloMessage = React.createClass({
  render: function() {
    return 

										
var HelloMessage = React.createClass({
  displayName: "HelloMessage",

  render: function render() {
    return React.createElement(
      "div",
      null,
      "Hello ",
      this.props.name
    );
  }
});
										
									

VirtualDOM

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

Data Flow - Flux

What is Flux?

Redux

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

Three principles of Redux

Redux actions

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

Reducers

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

State and Action ==> New State

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.

Store

• Holds application state
• Allows access to state
• Allows state to be updated

Data Flow

Middleware

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

ES2015

Modules

• Static module structure
• Helps avoid global variables
• Support for cyclic dependencies between modules

Class

Lambda functions

• New function creation syntax
• Lexical binding
• Has 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, 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

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 stuff

• Promises
• Generators
• ES7 Proposals