<script src="node_modules/react/umd/react.development.js"></script>
    <script src="node_modules/react-dom/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

    <div id="root"></div>

    <script type="text/babel">
        class List extends React.Component {
            constructor(props) {
                super(props);
                this.state = {
                    votes: 0,
                }
                this.items = [];
                this.handleClick = this.handleClick.bind(this);
            }

        handleClick(event) {
            const votes = this.state.votes;
            this.setState({
                votes: votes + 1
            })
        }

        render() {
            return (
                <div>
                    <h1>Vote Your JS Library!</h1>
                    <ul>
                        { this.props.items.map((item) =>
                            <li key = {item}>
                                {this.state.votes}
                                {item}
                                <button onClick = { () => this.handleClick() }> + </button>
                            </li>
                        ) }
                    </ul>
                </div>
            )
        }
    }

    ReactDOM.render(<List items= { ['React', 'Vue', 'Angular', 'Ember'] } />, document.getElementById('root'));
</script>