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.