Skip to content

Instantly share code, notes, and snippets.

@mkhoeini

mkhoeini/component.es6.js

Created September 19, 2015 16:19
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mkhoeini/b4e09571a70cef017e6d to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mkhoeini/b4e09571a70cef017e6d to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. mkhoeini created this gist Sep 19, 2015.
    21 changes: 21 additions & 0 deletions component.es6.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,21 @@
    // Using es6 syntax and babel transformer

    import React from 'react';

    export class Component extends React.Component {
    constructor(props) {
    super(props);
    this.state = {counter: 0};
    }

    render() {
    return {
    <div>
    <input type='number' ref={c => this._step = c} />
    <button type='button' onClick={() => this.setState(this.state.counter + this._step.value)}>increase</button>
    <p>{this.state.counter}</p>
    <button type='button' onClick{() => this.setState(this.state.counter - this._step.value)}>decrease</button>
    </div>
    }
    }
    }
    38 changes: 38 additions & 0 deletions component.jsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,38 @@

    var React = require('react');

    var Component = React.createClass({
    getInitialState: function() {
    return {
    counter: 0
    };
    },

    render: function() {
    return (
    <div>
    <input type='number' ref='step' />
    <button type='button' onClick={this._increase}>increase</button>
    <p>{this.state.counter}</p>
    <button type='button' onClick{this._decrease}>decrease</button>
    </div>
    );
    },

    _getStep: function() {
    var node = React.findDOMNode(this.refs.step);
    return node.value;
    },

    _increase: function() {
    var new_val = this.state.counter + this._getStep();
    this.setState({counter: new_val});
    },

    _decrease: function() {
    var new_val = this.state.counter - this._getStep();
    this.setState({counter: new_val});
    }
    });

    module.exports = Component;
    57 changes: 57 additions & 0 deletions full.redux.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,57 @@
    // Full example using es6 and react-redux

    import React, {PropTypes} from 'react';
    import {bindActionCreators, combineReducers, createStore} from 'redux';
    import {Provider, connect} from 'react-redux';

    // State reducer
    function counter(state = 0, action) {
    switch (action.type) {
    case 'INCREMENT':
    return state + action.val;
    case 'DECREMENT':
    return state - action.val;
    default:
    return state;
    }
    }

    const store = createStore(combineReducers({counter}));

    function increment(val) {
    return {type: 'INCREMENT', val}
    }

    function decrement(val) {
    return {type: 'DECREMENT', val}
    }

    @connect(s => {counter: s.counter}, d => bindActionCreators({increment, decrement}, d))
    class Component extends React.Component {
    static propTypes = {
    counter: PropTypes.number,
    increment: PropTypes.func,
    decrement: PropTypes.func
    }

    render() {
    const {counter, increment, decrement} = this.props;

    return (
    <div>
    <input type='number' ref={c => this._step = c}/>
    <button type='button' onClick={() => increment(this._step.value)}>increment</button>
    <p>{counter}</p>
    <button type='button' onClick={() => decrement(this._step.value)}>decrement</button>
    </div>
    );
    }
    }


    React.render(
    <Provider store={store}>
    {() => <Component/>}
    </Provider>,
    document.getElementById('app')
    );
    5 changes: 5 additions & 0 deletions main.jsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,5 @@

    var React = require('react');
    var Component = require('./component');

    React.render(<Component/>, document.querySelector('#app'));