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.