terrierscript
1/3/2017 - 3:34 PM

esnextbin sketch

esnextbin sketch

transpiled.js
content_copyfile_download
'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _redux = require('redux');

var _reactRedux = require('react-redux');

var _reduxCandy = require('redux-candy');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var initialState = {
  counter: 0
};

var reducer = (0, _reduxCandy.createReducer)(initialState);

// counter
var increment = (0, _reduxCandy.createAction)('INCREMENT', 'counter', function (i) {
  return i + 1;
});
var decrement = (0, _reduxCandy.createAction)('DECREMENT', 'counter', function (i) {
  return i - 1;
});

var Counter = function Counter(_ref) {
  var dispatch = _ref.dispatch;
  var counter = _ref.counter;

  return _react2.default.createElement(
    'div',
    null,
    _react2.default.createElement(
      'div',
      null,
      counter
    ),
    _react2.default.createElement(
      'button',
      { onClick: function onClick() {
          return dispatch(increment());
        } },
      'increment'
    ),
    _react2.default.createElement(
      'button',
      { onClick: function onClick() {
          return dispatch(decrement());
        } },
      'decrement'
    )
  );
};

var CounterContainer = (0, _reactRedux.connect)(function (state) {
  return state;
})(Counter);

var App = function (_Component) {
  (0, _inherits3.default)(App, _Component);

  function App() {
    (0, _classCallCheck3.default)(this, App);

    var _this = (0, _possibleConstructorReturn3.default)(this, (0, _getPrototypeOf2.default)(App).call(this));

    _this.store = (0, _redux.createStore)(reducer);
    return _this;
  }

  (0, _createClass3.default)(App, [{
    key: 'render',
    value: function render() {
      return _react2.default.createElement(
        _reactRedux.Provider,
        { store: this.store },
        _react2.default.createElement(CounterContainer, null)
      );
    }
  }]);
  return App;
}(_react.Component);

exports.default = App;
package.json
content_copyfile_download
{
  "name": "esnextbin-sketch",
  "version": "0.0.0",
  "dependencies": {
    "react": "15.3.1",
    "redux": "3.6.0",
    "react-redux": "5.0.1",
    "redux-candy": "2.0.0",
    "babel-runtime": "6.20.0"
  }
}
index.js
content_copyfile_download
import React, { Component } from 'react';
import { createStore } from 'redux'
import { Provider, connect } from 'react-redux'
import { createReducer, createAction } from 'redux-candy'

const initialState = {
  counter: 0
}

const reducer = createReducer(initialState)

// counter
const increment = createAction('INCREMENT', 'counter', (i) => i + 1 )
const decrement = createAction('DECREMENT', 'counter', (i) => i - 1 )

const Counter = ({dispatch, counter}) => {
  return (
    <div>
      <div>{counter}</div>
      <button onClick={() => dispatch(increment())}>increment</button>
      <button onClick={() => dispatch(decrement())}>decrement</button>
    </div>
  )
}

const CounterContainer = connect(state => state)(Counter)

class App extends Component {
  constructor(){
    super()
    this.store = createStore(reducer)
  }
  render() {
    return (
      <Provider store={this.store}>
        <CounterContainer />
      </Provider>
    );
  }
}

export default App;
index.html
content_copyfile_download
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>ESNextbin Sketch</title>
  <!-- put additional styles and scripts here -->
</head>
<body>
</body>
</html>
esnextbin.md
content_copyfile_download
  • Rendered
  • Source

made with esnextbin