JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/react@15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<app></app>

Babel + JSX

const { Component } = React;

const $app = document.querySelector('app');

class App extends Component {

  constructor() {  
    super();
    
    this.state = {    
      tasks: [
      	'Do Gardening',
        'Return books to library',
        'Go to the Dentist',
      ],      
      inputValue: "",    
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleKeyUp = this.handleKeyUp.bind(this);
  }

  handleChange(event) {  
    this.setState({inputValue: event.target.value});  
  }
  
  handleKeyUp(event) {
  	if(event.keyCode === 13) {
    	if(this.state.inputValue) {
        const newTasks = [...this.state.tasks, this.state.inputValue];
        this.setState({tasks: newTasks, inputValue: ""});
      } else {
      	alert('Please add a Task!');
      }
    }
  }

	render() {
  	return (
      <div className="container">
        <h1>To Do List</h1>
        <input type="text" name="newTask" value={this.state.inputValue} onChange={this.handleChange} onKeyUp={this.handleKeyUp}/>
        <div className="container">
          <ul className="list-group">
            {
            	this.state.tasks.map((task, index) => <li key={index}>{ task }</li>)
            }
          </ul>
        </div>
      </div>
    );
  }

}

ReactDOM.render(
	<App/>,
  $app
);