Skip to content

Instantly share code, notes, and snippets.

@rotexhawk

rotexhawk/index.html

Created February 6, 2018 20:45
Show Gist options
  • Save rotexhawk/9f76a0545071ff263dc6fccb7ad7f441 to your computer and use it in GitHub Desktop.
Save rotexhawk/9f76a0545071ff263dc6fccb7ad7f441 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. rotexhawk created this gist Feb 6, 2018.
    130 changes: 130 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,130 @@
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
    <script src="https://unpkg.com/expect@%3C21/umd/expect.min.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/redux.js"></script>
    <script src="https://fb.me/react-15.1.0.js"></script>
    <script src="https://fb.me/react-dom-15.1.0.js"></script>

    </head>
    <body>
    <div id="root"></div>
    <script id="jsbin-javascript">
    "use strict";

    var counter = function counter(state, action) {
    if (state === undefined) state = 0;

    if (action.type === "INCREMENT") {
    return state + 1;
    } else if (action.type === "DECREMENT") {
    return state - 1;
    }
    return state;
    };

    var _Redux = Redux;
    var createStore = _Redux.createStore;

    var store = createStore(counter);

    var Counter = function Counter(_ref) {
    var value = _ref.value;
    var onIncrement = _ref.onIncrement;
    var onDecrement = _ref.onDecrement;
    return React.createElement(
    "div",
    null,
    React.createElement(
    "h1",
    null,
    value
    ),
    React.createElement(
    "button",
    { onClick: onIncrement },
    "+"
    ),
    React.createElement(
    "button",
    { onClick: onDecrement },
    "-"
    )
    );
    };

    var render = function render() {
    return ReactDOM.render(React.createElement(Counter, {
    value: store.getState(),
    onIncrement: function () {
    return store.dispatch({
    type: "INCREMENT"
    });
    },
    onDecrement: function () {
    return store.dispatch({
    type: "DECREMENT"
    });
    }
    }), document.getElementById('root'));
    };

    store.subscribe(render);
    render();
    </script>



    <script id="jsbin-source-javascript" type="text/javascript">const counter = (state = 0, action) => {
    if (action.type === "INCREMENT"){
    return state + 1;
    }
    else if (action.type === "DECREMENT"){
    return state - 1;
    }
    return state;
    }



    const { createStore } = Redux;

    const store = createStore(counter);

    const Counter = (
    {value, onIncrement, onDecrement}) =>
    (
    <div>
    <h1>{value}</h1>
    <button onClick={onIncrement}>+</button>
    <button onClick={onDecrement}>-</button>
    </div>
    );


    const render = () => (
    ReactDOM.render(
    <Counter
    value={store.getState()}
    onIncrement={() =>
    store.dispatch({
    type: "INCREMENT"
    })
    }
    onDecrement={() =>
    store.dispatch({
    type: "DECREMENT"
    })
    }
    />,
    document.getElementById('root')
    ));


    store.subscribe(render);
    render();
    </script></body>
    </html>
    61 changes: 61 additions & 0 deletions jsbin.recuyor.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,61 @@
    "use strict";

    var counter = function counter(state, action) {
    if (state === undefined) state = 0;

    if (action.type === "INCREMENT") {
    return state + 1;
    } else if (action.type === "DECREMENT") {
    return state - 1;
    }
    return state;
    };

    var _Redux = Redux;
    var createStore = _Redux.createStore;

    var store = createStore(counter);

    var Counter = function Counter(_ref) {
    var value = _ref.value;
    var onIncrement = _ref.onIncrement;
    var onDecrement = _ref.onDecrement;
    return React.createElement(
    "div",
    null,
    React.createElement(
    "h1",
    null,
    value
    ),
    React.createElement(
    "button",
    { onClick: onIncrement },
    "+"
    ),
    React.createElement(
    "button",
    { onClick: onDecrement },
    "-"
    )
    );
    };

    var render = function render() {
    return ReactDOM.render(React.createElement(Counter, {
    value: store.getState(),
    onIncrement: function () {
    return store.dispatch({
    type: "INCREMENT"
    });
    },
    onDecrement: function () {
    return store.dispatch({
    type: "DECREMENT"
    });
    }
    }), document.getElementById('root'));
    };

    store.subscribe(render);
    render();