<div id='app'></div>
@import url(https://fonts.googleapis.com/css?family=Roboto:100);

h2 {
  font-family: 'Roboto', sans-serif;
  font-weight: 100;
}

button {
	background-color:transparent;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	border:1px solid #bdbdbd;
	display:inline-block;
	cursor:pointer;
	color:#bdbdbd;
	font-family:Arial;
	font-size:16px;
	padding:10px 20px;
  margin-right: 8px;
	text-decoration:none;
  transition: all 0.4s ease;
}
button:hover {
	color: #76daff;
  border: 1px solid #76daff;
}
button:focus {
  outline: 0;
}
class Counter extends React.Component {
  constructor(props){
    super(props);
    
    this.state = {
      currentCount: 0
    }
  }
  
  // Basic parent increment handler
  increment() {
    this.setState({
      currentCount: this.state.currentCount+1
    })
  }
  
  // Basic parent decrement handler
  decrement() {
    this.setState({
      currentCount: this.state.currentCount-1
    })
  }
  
  render() {
    // Here we are passing references to the increment and decrement functions to our child components as props. 
    return(
      <div>
        <h2>Current Count: {this.state.currentCount}</h2>
        <Increment increment={this.increment.bind(this)} />
        <Decrement decrement={this.decrement.bind(this)} />
      </div>
    );
  }
}

class Increment extends React.Component {
  // This allows us to change the state of the parent component when we click the button in the child component using this.props.increment
  render() {
    return(
      <button onClick={this.props.increment}>Higher</button>
    );
  }
}

class Decrement extends React.Component {
  // And again for this.props.decrement
  render() {
    return(
      <button onClick={this.props.decrement}>Lower</button>
    );
  }
}

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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://fb.me/react-15.1.0.min.js
  2. https://fb.me/react-dom-15.1.0.min.js