React - Componentes e propriedades

Uma das características no desenvolvimento com o React é a capacidade de construir componentes, capazes de serem reutilizados em diversas partes do sistema.

Os componentes nos permitem dividir o sistema em pequenas partes, reutilizáveis e independentes, proporcionando uma grande capacidade de reutilização e isolamento, evitando replicação de código e dores de cabeça com a substituição ou mesmo manutenção em partes do sistema.

Em resumo, componentes são rotinas Javascript, capazes de receber propriedades e devolver elementos HTML.

Exemplo

Vamos agora ao exemplo, criaremos uma aplicação e a seguir iremos desenvolver um componente que irá representar um cliente, com nome e endereço:

Criando a aplicação

npx create-react-app componentes-propriedades

Criando o novo componente

Vamos criar o componente cliente, que retornará informações do mesmo, a ideia aqui é retornar uma "div" com um parágrafo com o nome e um texto com o endereço.

No diretório "src" vamos criar o arquivo "Cliente.js" e nesse novo arquivo vamos codificar o especificado acima:

No código acima:

• Na linha 1 temos o "import" padrão;
• Na linha 3 temos a criação de nossa classe que representará nosso componente;
• Da linha 4 a linha 12 temos a codificação de nosso componente;
• Nas linhas 7 e 8 estamos usando propriedades que podem ser passadas no uso do componente;
• Na linha 14 temos o "export" de nosso componente, que permitirá o uso de nosso componente;

Fazendo uso do nosso componente

Nesse momento nosso componente esta criado, e agora iremos usá-lo no componente "App", passando para ele o nome e o endereço de nosso cliente:

No código acima:

• Da linha 1 a 4 temos os "imports", do "React" da imagem usada no exemplo, do "css" e de nosso componente;
• Da linha 6 a 18 temos a codificação do componente App;
• Da linha 11 a 14 temos o uso de nosso componente, onde informamos as duas propriedades utilizadas;
• Na linha 20 temos o "export" do componente, que permitirá o uso do componente;

O código do exemplo pode ser encontrado aqui.