React's Pure component demo

a simple Todo List with with "Pure" render components.

by Pasit R

HTML

<main id="main"></main>

SCSS

#main {
  .todo {
    background-color: #aee;
    padding: 8px;
    margin: 4px; 
    &.done {
      text-decoration: line-through;
    }
  }
}

Babel + JSX

const sample = [
	{name: 'Foo', done: false},
  {name: 'Bar', done: true},
  {name: 'Hey', done: true},  
]

const TodoItem = (props) => (
	<div className={props.done? 'todo done': 'todo active'}>{props.text}</div>
)

const TodoList = (props) => {
  const list = props.items
  return (
  	<section>
  	  {list.map(item => (<TodoItem text={item.name} done={item.done} />))}
  	</section>
  )
}

class TodoApp extends React.Component {
	componentWillMount() {
  	this.setState({
    	todos: sample
    })
  }
  
  render() {
  	const items = this.state.todos
    return (<TodoList items={items} />)
  }
}

React.render(<TodoApp />, document.getElementById('main'))