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.