React

HTML

<div id="app"></div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

.red {
  border: 3px solid red;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

.done {
  color: rgba(0, 0, 0, 0.3);
  text-decoration: line-through;
}

input {
  margin-right: 5px;
}

React

const { createElement, Component } = React;

class TodoApp extends React.Component {
	constructor(props) {
		super(props)
		this.state = {
			items: [
				{ id:1, text: "Learn JavaScript", done: false },
				{ id:2, text: "Learn React", done: false },
				{ id:3, text: "Play around in JSFiddle", done: true },
				{ id:4, text: "Build something awesome", done: true }
			],
			i: 5
		}
		this.addItem = this.addItem.bind(this)
		this.removeItem = this.removeItem.bind(this)
	}
  
	addItem() {
		let newItemVal = this.refs.newItem.value
		let newObj = {
			id: this.state.i,
			text: newItemVal,
			done: false
		}
		let items = this.state.items

		if(this.refs.newItem.value == '') {
			this.refs.newItem.classList.add("red")
			this.refs.newItem.focus()
			return
		}

		items.push(newObj);
		this.setState({
			items,
			i: this.state.i + 1
		})

		this.refs.newItem.classList.remove("red")
		this.refs.newItem.value = ""
		this.refs.load.textContent = ""
		this.refs.newItem.focus()
	}
  
	removeItem(i) {		
		this.setState({
			items: this.state.items.filter(item => item.id !== i)
		});
	}

	componentDidMount() {
		console.log(this);
		this.refs.newItem.focus();
		//this.refs.load.textContent = "Загрузка...";
	}
  
	render() {
		return createElement("div", {},
			createElement("h2", {}, "Todos:"),
			createElement("ol", {},
				this.state.items.map(item =>
					createElement("li", { key: item.id },
						createElement("label", {},
							createElement("input", {
								type: "checkbox",
								disabled: true,
								readOnly: true,
								checked: item.done
							}),
							createElement("span", {
								className: item.done ? "done" : ""
							}, item.text)
						),
						createElement("span", {
							onClick: this.removeItem.bind(this, item.id)
						}, " x")
					)
				)
			),
			createElement("input", {
				type: "text",
				ref: "newItem"
			}),
			createElement("button", {
				onClick: this.addItem
			}, "Add new item"),
			createElement("span", { ref: "load"...