An attempt at doing an Elm architecture style React component.

Counter.js

import React, { Component } from 'react'
import { render } from 'react-dom'

const INCREMENT = 'increment'
const DECREMENT = 'decrement'

class App extends Component {
  // model
  state = {
    counter: 0
  }

  // update
  update(action) {
    switch(action.type) {
      case INCREMENT:
        this.setState({
          counter: this.state.counter + 1,
        })
        return
      case DECREMENT:
        this.setState({
          counter: this.state.counter - 1,
        })
        return
      default:
        return
    }
  }
  
  // view
  render() {
    return (
      <div>
        <h1>
          {`The count: ${this.state.counter}`}
        </h1>
        <div>
          <button onClick={() => this.update({type: INCREMENT})}>
            Increment +
          </button>
          <button onClick={() => this.update({type: DECREMENT})}>
            Decrement -
          </button>
        </div>
      </div>
    )
  }
}

render(<App />, document.getElementById('root'))