Conceito de componentização

Olá, alunos! No tópico anterior, aprendemos sobre as práticas recomendadas ao usar JSX.

E nesse aula, vamos aprender sobre o conceito de componentização.

Componentes são blocos de construção fundamentais do React.

Eles nos permitem dividir nossa interface do usuário em pedaços menores e mais gerenciáveis.

Por que usar componentes?

Existem várias vantagens em usar componentes:

• Reutilização: Componentes podem ser reutilizados em diferentes partes da interface do usuário.
• Organização: Componentes ajudam a organizar o código e a tornar a interface do usuário mais legível.
• Testabilidade: Componentes podem ser testados individualmente, o que facilita a depuração de problemas.

Como criar componentes

Para criar um componente, 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.

Por exemplo, o seguinte código cria um componente que renderiza um cabeçalho:

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

Exemplo de componentização

Vamos ver um exemplo de como usar componentes para dividir uma interface do usuário em pedaços menores e mais gerenciáveis.

O seguinte código renderiza uma lista de produtos:

class App extends React.Component {
  render() {
    return (
      <div>
        <ul>
          {this.state.products.map((product) => (
            <li key={product.id}>{product.name}</li>
          ))}
        </ul>
      </div>
    );
  }
}

Este código é bastante complexo e difícil de manter.

Podemos dividir este código em componentes menores e mais gerenciáveis, como segue:

class ProductList extends React.Component {
  render() {
    return (
      <ul>
        {this.props.products.map((product) => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
    );
  }
}

class App extends React.Component {
  render() {
    return (
      <div>
        <ProductList products={this.state.products} />
      </div>
    );
  }
}

Este código é mais fácil de entender e manter.

Conclusão

No tópico de hoje, aprendemos sobre o conceito de componentização.

Componentes são blocos de construção fundamentais do React.

Eles nos permitem dividir nossa interface do usuário em pedaços menores e mais gerenciáveis, o que traz várias vantagens, como reutilização, organização e testabilidade.

Se tiver dúvidas deixe nos comentários. Então, vamos para a próxima aula.