Redux Очень короткая шпаргалка

import {createStore, combineReducers, applyMiddleware} from 'redux';

// Counter

var counterActionType = {
    'UP': 'UP'
};

function couterActionCreator (value) {
    return {
  type: counterActionType.UP,
        value: value
    };
}

function counterReducer (state, action) {
    if (state === undefined) {state = {counter: 0};}
    switch (action.type) {
        case counterActionType.UP: return Object.assign({}, state, {counter: state.counter + action.value});
        default: return state;
     }
}

// Time

var timeActionType = {
    'UPDATE': 'UPDATE'
};

function timeActionCreator (value) {
    return {
        type: timeActionType.UPDATE,
        value: value
    };
}

function timeReducer (state, action) {
    if (state === undefined) {state = {time: new Date()};}
    switch (action.type) {
        case timeActionType.UPDATE: return Object.assign({}, state, {time: new Date(state.time.getTime() + action.value)});
        default: return state;
    }
}

var rootReducer = combineReducers({
    counterObject: counterReducer,
    timeObject: timeReducer
});

var initialState = {
    counterObject: {counter: 2},
    timeObject: {time: new Date()}
};

var store = createStore(rootReducer, initialState, applyMiddleware(/* createLogger(), thunkMiddleware */));

var unsubscribeStore = store.subscribe(function storeChangeListener () {
    console.log(store.getState());
});

console.log(store.getState().counterObject.counter);

store.dispatch(couterActionCreator(1));

console.log(store.getState().counterObject.counter);

unsubscribeStore();

store.dispatch(couterActionCreator(1));

console.log(store.getState().counterObject.counter);

store.dispatch(timeActionCreator(1000000));

console.log(store.getState().timeObject.time);

React Очень короткая шпаргалка

import React, {Component} from 'react';
import ReactDOM from 'react-dom';

class Time extends Component {
  // Actions
  handleCounterUp () {
    this.setState(Object.assign({}, this.state, {counter: this.state.counter + 1}));
  }
  handleInputChange (event) {
    this.setState(Object.assign({}, this.state, {value: event.target.value.toUpperCase()}));
  }
  handleSubmitForm (event) {
    event.preventDefault();
    alert('Value: ' + this.state.value);
  }
  // First render (only once)
  constructor (props) {
    super(props);
    this.state = {
      time: null,
      counter: 0,
      value: ''
    };
    this.handleCounterUp = this.handleCounterUp.bind(this);
    this.handleInputChange = this.handleInputChange.bind(this);
    this.handleSubmitForm = this.handleSubmitForm.bind(this);
  }
  // setState OK
  componentWillMount () {
    this.setState(Object.assign({}, this.state, {time: new Date()}));
  }
  render () {
    return (
      <div>
        {/* Это комментарий */}
        <p>
          <span>пробелы</span>{' '}
          <span>между тэгами</span>{' '}
          <span>на разных строках</span>
        </p>
        <ul>
          {
            [1, 2, 3].map(
              function (value, index) {
                return <li key={index}>{value}</li>;
              }
            )
          }
        </ul>
        <div ref="message">My message</div>
        <div>{this.state.time.toString()}</div>
        <div>{this.props.time.toString()}</div>
        <div>{this.state.counter}</div>
        <div onClick={this.handleCounterUp}>Counter up</div>
        <form onSubmit={this.handleSubmitForm}>
          <input type="text" value={this.state.value} onChange={this.handleInputChange} />
          <input type="submit" value="Submit" />
        </form>
      </div>
    );
  }
  componentDidMount () {
    var self = this;
    this.timeoutId = setTimeout(function () {
      self.setState(Object.assign({}, self.state, {time: new Date()}));
    }, 1000);
    // Actions after we updated DOM
    // Here we can use jQuery to manipulate the DOM
    // $('input-id).val('');
    console.log(this.refs.message.innerText);
  }
  // Unmount in the end
  componentWillUnmount () {
    clearTimout(this.timeoutId);
  }
  // Next Props change - setState OK
  componentWillReceiveProps (nextProps) {
    this.setState(Object.assign({}, this.state, {time: nextProps.time}));
  }
  // Props change or only Next State change
  shouldComponentUpdate (nextProps, nextState) {
    return this.state.time.getTime() !== nextProps.time.getTime();
  }
  // No setState
  componentWillUpdate (nextProps, nextState) {
    // Actions before we updated DOM
  }
  // Render and then
  componentDidUpdate (prevProps, prevState) {
    // Actions after we updated DOM
    // Here we can use jQuery to manipulate the DOM
    // $(this._ref.input).val(');
    console.log(this.refs.message.innerText);
  }
}

ReactDOM.render(<Time time={new Date(new Date().getTime() + 100000000)} />, document.getElementById('root'));