Fale sobre os componentes no React.

No React, os componentes são elementos independentes e reutilizáveis da interface de utilizador que podem aceitar dados de entrada (props) e gerir o seu próprio estado.

Existem dois tipos principais de componentes:

1. Componentes funcionais: Funções JavaScript simples que retornam JSX.

   // Exemplo de componente funcional
   function Welcome(props) {
     return <h1>Olá, {props.name}!</h1>;
   }
   

2. Componentes de classe: Classes JavaScript que estendem React.Component e têm um método render(), que devolve JSX. Podem ter estado local (state) e métodos do ciclo de vida.

   // Exemplo de componente de classe
   class Counter extends React.Component {
     constructor(props) {
       super(props);
       this.state = { count: 0 };
     }
   
     render() {
       return (
         <div>
           <p>Contador: {this.state.count}</p>
           <button onClick={() => this.setState({ count: this.state.count + 1 })}>
             Incrementar
           </button>
         </div>
       );
     }
   }
   

Os componentes podem ser aninhados uns dentro dos outros para criar interfaces mais complexas. Os dados são transmitidos do componente pai para o filho através de props.

O uso de componentes garante modularidade, reutilização de código e facilita a gestão do estado da aplicação.