JSFiddle - React, Tailwind, and code Playground

by kyllle

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css">
<script src="https://npmcdn.com/classnames/index.js"></script>
<div class="js-app"></div>

CSS

* {
    -webkit-font-smoothing: antialiased;
}

body {
    padding: 5%;
}

Babel + JSX

console.clear();

const Input = React.createClass({
  getInitialState() {
    return {
      quantity: 0
    }
  },

  updateQuantity() {
    this.setState({
      quantity: this.state.quantity + 1
    });
  },
  
  isNumeric(input){
    return (input - 0) == input && (''+input).trim().length > 0;
  },

  handleChange(e) {
  	var num = e.target.value,
    	quantity = num.slice(num.length - 1) === '.' ? num : +num;
    
    if(!this.isNumeric(quantity)) {
    	return;
    }
  	
    this.setState({ 
    	quantity: quantity
    });
  },

  render() {
    return <div>
      <input 
        type="text" 
        value={this.state.quantity} 
        onChange={this.handleChange}
      />
      
      <button onClick={this.updateQuantity}>Update</button>
    </div>
  }
});

ReactDOM.render(<Input />, document.body.querySelector('.js-app'));