Criação e reutilização de componentes

Olá, alunos! No tópico anterior, aprendemos sobre o conceito de componentização.

Aqui, vamos aprender sobre como criar e reutilizar componentes.

Criação de 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>
    );
  }
}

Reutilização de componentes

Para reutilizar um componente, precisamos importá-lo em nosso código e instá-lo.

Por exemplo, o seguinte código importa o componente Header e o insere em uma página:

import React from "react";
import Header from "./components/Header";

class App extends React.Component {
  render() {
    return (
      <div>
        <Header />
      </div>
    );
  }
}

Exemplo de reutilização de componentes

Vamos ver um exemplo de como reutilizar um componente para criar uma lista de produtos:

O seguinte código renderiza uma lista de produtos:

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 é bastante complexo e difícil de manter.

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

class Product extends React.Component {
  render() {
    return (
      <li key={this.props.id}>{this.props.name}</li>
    );
  }
}

class ProductList extends React.Component {
  render() {
    return (
      <ul>
        {this.props.products.map((product) => (
          <Product key={product.id} name={product.name} />
        ))}
      </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

Criar e reutilizar componentes são duas habilidades essenciais para o desenvolvimento de aplicações React.

Ao criar componentes, devemos nos preocupar em torná-los reutilizáveis.

Para isso, devemos evitar acoplamentos entre componentes e devemos usar props para passar dados entre eles.

Ao reutilizar componentes, devemos nos certificar de que estamos usando a versão mais recente do componente.

Espero que vocês tenham entendido como criar e reutilizar componentes. Caso não, deixe a sua dúvida nos comentários.