Pular para o conteúdo principal

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.

Marcadores:

Comentários

Postar um comentário

Obrigado por Participar do programero, fique a vontade para agradecer, retificar, perguntar ou sugerir.

Mais visitadas

Manipular arquivos com PL/SQL (Oracle)

O bom e velho arquivo, é impressionante como lidamos com seus vários tipos durante todos os dias, bom hoje vamos mostrar um jeito simples de se escrever e ler arquivos apenas com a codificação nativa do Oracle. A primeira coisa a fazer é criar um diretório válido configurado no Oracle, e permissões de acesso a esse diretório para o usuário de banco onde faremos o exemplo, sendo assim suponhamos que nosso usuário de banco se chame programero, e nosso diretório real esteja em c:\programero, então logado como SYSTEM devemos executar os seguintes comandos: 1: -- cria diretorio 2: create or replace directory DIR_PROGRAMERO as ' C:\PROGRAMERO '; 3: -- concede permissão de escrita e leitura para nosso usuário 4: grant read , write on directory DIR_PROGRAMERO to PROGRAMERO; Para escrever, basicamente precisamos apenas saber onde esse arquivo ficará, no nosso caso no diretório criado acima, segue o código de escrita: 1: declare 2: -- nosso handler 3: v_a...
5 comentários
Leia mais

Centralizar Texto em Edit

Como todos sabemos o Edit mantém todo texto digitado a esquerda, o que não fica bem quando o usamos para a entrada de números, pois bem, o exemplo abaixo apresenta uma alternativa para centralizar um determinado valor dentro de um Edit: procedure EditChange(Sender: TObject); var vl_label : TLabel; //variável do tipo Label begin vl_label := TLabel.Create(self); //criamos um label WITH vl_label DO BEGIN Font.Name := TEdit(sender).Font.Name; //pegamos a fonte usada no edit Caption := TEdit(sender).Text; //pegamos o conteúdo do edit SendMessage(TEdit(sender).Handle, EM_SETMARGINS, EC_LEFTMARGIN, (TEdit(sender).Width-vl_label.Width) div 2); //centraliza no label e retorna para o edit END ; vl_label.Free; end ;
3 comentários
Leia mais

Funções de Data e Hora (Delphi)

É muito comum nos depararmos no dia a dia com a necessidade de manipular datas e horas, seja para um calculo de permanência, dias de atraso enfim, é praticamente escapar de alguma situação que necessite desse tipo de controle. Assim como a necessidade e se utilizar algum recurso para manipular as datas e horas de alguma maneira e freqüente, as duvidas de como o faze-lo também é, basta um breve olhar em qualquer fórum especializado e lá está, alguma duvida relacionada, por isso decidi falar um pouco sobre uma unit muito poderosa chamada DateUtils para a manipulação de data e hora, com um grande numero de métodos e classes que facilitam a vida de qualquer um. Alguns exemplos: CompareDate(constA, B: TDateTime): TValueRelationship; Compara apenas a data de dois valores (do tipo TDateTime) retornando: LessThanValue O primeiro valor é menor que o segundo EqualsValue Os valores são iguais GreaterThanValue O primeiro valor é maior que o segundo CompareDateTime(const A, B: TD...
3 comentários
Leia mais