class
Basic form of a React Component. Class gives you access to the full React Lifecycles and is more powerful that a stateless component.
Simple
class HelloWorld extends Component {
render() {
<section>
<p>{this.props.sayHello}</p>
</section>
}
}
Redux TodoMVC
class TodoItem extends Component {
constructor(props, context) {
super(props, context);
this.state = {
editing: false
};
}
handleDoubleClick() {
this.setState({ editing: true });
}
handleSave(id, text) {
if (text.length === 0) {
this.props.deleteTodo(id);
} else {
this.props.editTodo(id, text);
}
this.setState({ editing: false });
}
render() {
const {todo: { id, text, completed }, completeTodo, deleteTodo} = this.props;
return (
<li className={classnames({
completed: completed,
editing: this.state.editing
})}>
<Todo id={id}
text={text}
completed={completed}
editing={this.state.editing}
completeTodo={completeTodo}
deleteTodo={deleteTodo}
onSave={this.handleSave}
/>
</li>
);
}
}
TodoItem.propTypes = {
todo: PropTypes.object.isRequired,
editTodo: PropTypes.func.isRequired,
deleteTodo: PropTypes.func.isRequired,
completeTodo: PropTypes.func.isRequired
};
export default TodoItem;