React

There are no plans to remove classes from React. You can read more about the gradual adoption strategy for Hooks in the bottom section of this page.

Hooks don’t replace your knowledge of React concepts. Instead, Hooks provide a more direct API to the React concepts you already know: props, state, context, refs, and lifecycle. As we will show later, Hooks also offer a new powerful way to combine them.

If you just want to start learning Hooks, feel free to jump directly to the next page! You can also keep reading this page to learn more about why we’re adding Hooks, and how we’re going to start using them without rewriting our applications.

 

class Todo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      list: [],
      text: ""
    };
  }

  handleAddItem = e => {
    this.setState({
      list: this.state.list.concat(this.state.text),
      text: ""
    });
  };

  handleChange = e => {
    this.setState({
      text: e.target.value
    });
  };

  removeItem = index => {
    const list = this.state.list;
    this.state.list.splice(index, 1);
    this.setState({ list });
  };

  render() {
    const { text, list } = this.state;
    return (
      <div>
        <h1>TODO LIST</h1>
        <input value={text} onChange={this.handleChange} />
        <button onClick={this.handleAddItem}>Add</button>
        <ol>
          {list.map((item, index) => (
            <li key={index}>
              {item}
              <button onClick={() => this.removeItem(index)}>Delete</button>
            </li>
          ))}
        </ol>
      </div>
    );
  }
}