JSFiddle - React, Tailwind, and code Playground

by jdanford

HTML

<script src="http://fb.me/react-with-addons-0.12.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.0.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>
<div id="container"></div>

JavaScript 1.7

var List = React.createClass({
    render: function () {
        return <ul>
            {this.props.items.map(function (item) {
                return <li key={item}>{item}</li>;
            })}
        </ul>;
    }
});

var App = React.createClass({
    getInitialState: function () {
        return {
            items: [],
            text: ""
        };
    },

    setText: function (event) {
        this.setState({
            text: event.target.value
        });
    },

    addItem: function () {
        var newItem = this.state.text.trim();
        var items = this.state.items.concat([newItem]);
        this.setState({
            items: items,
            text: ""
        });
    },

    render: function () {
        return <div id="app">
            <List items={this.state.items}/>
            <input value={this.state.text} onChange={this.setText}/>
            <button onClick={this.addItem}>Add item</button>
        </div>;
    }
});

React.render(
    <App/>,
    document.getElementById("container")
);