React

by samur3

HTML

<div id="container"></div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

.done {
  color: rgba(0, 0, 0, 0.3);
  text-decoration: line-through;
}

input {
  margin-right: 5px;
}

React

class CounterDisplay extends React.Component{
	constructor(props) {
  	super(props);    
  }

	render() {
  	// Calls the handler props once events are fired
  	return <div>
    		<div>{this.props.counterProp}</div>
        <br />
        <button onClick={this.props.incrementCounter}>+</button>
        <button onClick={this.props.decrementCounter}>-</button>
    	</div>
  }
}

class Counter extends React.Component{
	constructor(props) {
  	super(props);    
    this.state = {counter: 0};  
    this.handleIncrement = this.handleIncrement.bind(this);
    this.handleDecrement = this.handleDecrement.bind(this);
  }
  
  handleIncrement(){  
  	this.setState({counter : this.state.counter+1});
  }
  
  handleDecrement(){   
  	this.setState({counter : this.state.counter-1});
  }
  render() {
  	// Pass down handlers to CounterDisplay component
    return <div>
    		<h2>{this.props.name}</h2>
    		<CounterDisplay 
        	counterProp={this.state.counter}
          incrementCounter={this.handleIncrement}
          decrementCounter={this.handleDecrement}></CounterDisplay>
      </div>;
  }
};

ReactDOM.render(
  <Counter name={'Counter'} />,
  document.getElementById('container')
);