JSFiddle - React, Tailwind, and code Playground

by infous

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.min.js "></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<div id="c"></div>

<script type="text/babel">
	var Test = React.createClass({
  	render: function () {
    	var f = function (e) {
      	e.preventDefault();
        alert(123);
      };
      
      return <form onSubmit={f}><button>Submit me!</button></form>;
    }
  });
  
  ReactDOM.render(<Test />, document.getElementById("c"));
  
	// #4. Todo app
  /*var TodoList = React.createClass({
  	render: function () {
    	var createItem = function (item) {
      	return <li data-key={item.id}>{item.text}</li>;
      };
      
      return <ul>{this.props.items.map(createItem)}</ul>;
    }
  });
  
  var TodoApp = React.createClass({
  	getInitialState: function () {
    	return {items: [], text: ""};
    },
    onChange: function (e) {
    	this.setState({text: e.target.value});
    },
    handleSubmit: function (e) {
    	e.preventDefault();
      
      var nextItems = this.state.items.concat([{text: this.state.text, id: Date.now()}]);
      var nextText = "";
      
      this.setState({items: nextItems, text: nextText});
    },
  	render: function () {
    	return (
      	<div>
        	<h1>Todo:</h1>
          <TodoList items={this.state.items} />
          <form onSubmit={this.handleSubmit}>
          	<input value={this.state.text} onChange={this.onChange} />
            <button>Add #{this.state.items.length + 1}</button>
          </form>
        </div>
      );
    }
  });
  
  ReactDOM.render(<TodoApp />, document.getElementById("c"));*/
  
  // #3. A Stateful Component
  /*var Timer = React.createClass({
  	getInitialState: function () {
    	return {secondsElapsed: 0};
    },
    tick: function () {
    	this.setState({secondsElapsed: this.state.secondsElapsed + 1});
    },
  ...