React

by Van Hai Le

HTML

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

CSS

* {
	font-family: 'Roboto', 'Arial', sans-serif;
}

.todo-item {
	color: #4d4d4d;
}

.todo-item {
	text-align: center;
	margin-bottom: 8px;
}

.todo-item--done {
	opacity: 0.3;
	text-decoration: line-through;
}

React

class ToDoItem extends React.Component {
	render() {
		let {item} = this.props;
		return (
			<div className={item.isCompleted ? 'todo-item todo-item--done' : 'todo-item'}>
				{this.props.item.title}
			</div>
		)
	}
}

class App extends React.Component {

	constructor() {
		super();
		this.toDoItems = [
			{ title: 'Đá bóng', isCompleted: true },
			{ title: 'Lập trình', isCompleted: false },
			{ title: 'Tập thể dục', isCompleted: false }
		];
	}
	render() {
		return (
			<div className='App'>
				{
					this.toDoItems.map((item, index) => <ToDoItem key={index} item={item}/>)
				}
			</div>
		)
	}
}

ReactDOM.render(<App />, document.getElementById('root'));