Samples of a simple counter in react, with multiple approaches

component.es6.js

// 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>
    }
  }
}

component.jsx

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;

full.redux.js

// 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')
);

main.jsx

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

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

• First read main.jsx and component.jsx.
• Then look at component.es6.js for an updated es6 version.
• Finally, read the full.redux.js for a flux like modern architecture.