Utilização de classes para criar componentes

Olá, alunos! No tópico anterior, aprendemos sobre hierarquia de componentes.

Nessa aula, vamos aprender sobre a utilização de classes para criar componentes.

O que são classes no React?

Classes são uma forma de organizar código e dados no React.

Elas podem ser usadas para criar componentes mais complexos e reutilizáveis.

Vantagens de usar classes para criar componentes

Usar classes para criar componentes oferece várias vantagens, incluindo:

• Organização: Classes podem ajudar a organizar o código e os dados de um componente de forma lógica.
• Reutilização: Classes podem ser reutilizadas em diferentes partes da interface do usuário.
• Testabilidade: Classes podem ser testadas individualmente, o que facilita a depuração de problemas.

Como criar componentes usando classes

Para criar um componente usando classes, precisamos definir uma classe que herda de React.Component.

A classe deve ter um método render() que retorna o código JSX que será renderizado pelo componente.

Além disso, a classe pode ter outros métodos e propriedades para definir o comportamento e os dados do componente.

Exemplo de componente usando classes

Vamos ver um exemplo de como criar um componente usando classes:

class MyComponent extends React.Component {
  render() {
    return (
      <div>
        <h1>Meu cabeçalho</h1>
      </div>
    );
  }
}

Este componente renderiza um cabeçalho com a mensagem “Meu cabeçalho”.

Propriedades de componentes

Classes de componentes podem ter propriedades para receber dados do exterior.

Essas propriedades são definidas na declaração da classe, usando o modificador propTypes.

Exemplo de componente com propriedades

class MyComponent extends React.Component {
  static propTypes = {
    title: PropTypes.string.isRequired,
  };

  render() {
    return (
      <div>
        <h1>{this.props.title}</h1>
      </div>
    );
  }
}

Este componente recebe uma propriedade chamada title, que deve ser uma string.

Estado de componentes

Classes de componentes podem ter estado para armazenar dados que mudam durante o ciclo de vida do componente.

O estado é definido na declaração da classe, usando o modificador state.

Exemplo de componente com estado

class MyComponent extends React.Component {
  state = {
    count: 0,
  };

  incrementCount = () => {
    this.setState({
      count: this.state.count + 1,
    });
  };

  render() {
    return (
      <div>
        <h1>O contador está em {this.state.count}</h1>
        <button onClick={this.incrementCount}>Incrementar</button>
      </div>
    );
  }
}

Este componente tem um estado chamado count, que é inicializado com o valor 0.

O componente também tem um método chamado incrementCount(), que incrementa o valor do estado count em 1.

Conclusão

Classes são uma forma poderosa de criar componentes no React.

Elas podem ser usadas para criar componentes mais complexos e reutilizáveis.

Qualquer dúvida deixe nos comentários. Assim, podemos ir para próxima aula.