React 101

by arunoda

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.0/react-dom.min.js"></script>
<div id="app"/>

Babel + JSX

class Counter extends React.Component {
	constructor(...args) {
  	super(...args);
    this.state = { count: 0 };
  }
  
  add(amount) {
  	const { count } = this.state;
    this.setState({
    	count: count + amount,
    });
  }
  
  render() {
  	const { count } = this.state;
    return (
    	<div>
        <p>Count: {count}</p>
        <button onClick={() => this.add(1)}>Add</button>
        <button onClick={() => this.add(-1)}>Remove</button>
      </div>
    );
  }
}

ReactDOM.render(
	<Counter />,
  document.getElementById('app')
);