React UI com Estado Incial

Até agora, esse componente está renderizando conteúdo estático. Para renderizar tarefas dinâmicamente, vamos precisar adiconar um estado local ao componente.

O nosso componente é uma função e tem algumas features que teremos acesso apenas em classes que extendem o Component do React. O state é uma delas.

Convertendo Funções em Classes

As classes tem algumas features adicionais e convertemos um componente que é uma função em classe com cinco passos:

1. Crie uma classe ES6 com o mesmo nome e extenda React.Component;
2. Adicione um método render() a ela;
3. Mova o conteúdo da função para dentro do método render();
4. Subistitua props por this.props dentro do render();
5. Delete o que sobrar da função antiga;

Nosso componente que era uma função, agora é uma classe com estado local e vai fiar assim:

class App extends Component {
  state = {
    todos: [
        {id: 1, name: "Learn JSX", isCompleted: false},
        {id: 2, name: "Build an Awesome App", isCompleted: false},
        {id: 3, name: "Ship It!", isCompleted: false}
      ]
  }

  render() {
    const { todos } = this.state
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>React Todos</h2>
        </div>
        <div className="Todo-App">
          <form>
            <input type="text" />
          </form>
          <div>
            <ul>
              {todos.map(todo =>
                <li key={todo.id}>
                  <input type="checkbox"/>
                  {todo.name}
                </li>
              )}
            </ul>
          </div>
        </div>
      </div>
    )
  }
}

Nossos testes estão passando e nossa interface continua a mesma. Agora temos um componente statefull com estado interno.

Vamos para a próxima seção entender os aspectos mais importantes da API de um componente, state e props.