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

Iniciar e Parar Serviços do Windows (Delphi)

Em certas ocasiões nos deparamos com a necessidade de manipular determinadas atividades do SO, como iniciar ou parar um banco de dados, ou qualquer outro serviço que esteja funcionando no momento. Segue abaixo um código que encontrei na Internet para tal finalidade (não me recordo à fonte, assim que eu a encontrar colocarei). Iniciar Serviço: uses WinSvc; // // start service // // return TRUE if successful // // sMachine: //   machine name, ie: \SERVER //   empty = local machine // // sService //   service name, ie: Alerter // function ServiceStart(   sMachine,   sService : string ) : boolean; var   //   // service control   // manager handle   schm,   //   // service handle   schs   : SC_Handle;   //   // service status   ss     : TServiceStatus;   //   // te...
19 comentários
Leia mais

Listar arquivos existentes em diretório (Delphi)

Mostraremos uma maneira simples e prática para listar o conteúdo de um diretório com a opção de incluir nessa listagem os arquivos de seus subdiretórios. No exemplo abaixo temos um Edit para receber o diretório a ser pesquisado um CheckBox para indicar se os subdiretórios entrarão na pesquisa um botão para efetuar a pesquisa e um Memo para listar os arquivos encontrados, no final um Edit que receberá o cálculo final (em bytes) da soma do tamanho dos arquivos. procedure TForm1.Button1Click(Sender: TObject); begin   tamanhoTotal := 0;   memLista.Lines.Clear;   ListarArquivos(edtDiretorio.Text, chkSub.Checked);   Edit1.Text := IntToStr( tamanhoTotal ); end; procedure TForm1.ListarArquivos(Diretorio: string; Sub:Boolean); var   F: TSearchRec;   Ret: Integer;   TempNome: string; begin   Ret := FindFirst(Diretorio+'\*.*', faAnyFile, F);   try     while Ret = 0 do ...
10 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