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

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

Aplicação Flask usando Nginx e Gunicorn

Aplicação Flask usando Nginx e Gunicorn Se você já desenvolveu uma aplicação Flask básica, sabe que o servidor de desenvolvimento embutido não é ideal para produção. Ele não é projetado para lidar com altos volumes de tráfego ou conexões simultâneas. Para tornar sua aplicação Flask mais robusta e pronta para produção, podemos usar o Gunicorn como servidor de aplicação e o Nginx como proxy reverso. Neste artigo, vamos adaptar o exemplo anterior ( Criando uma Aplicação CRUD com Flask, PostgreSQL e Docker ) para incluir o Nginx e o Gunicorn. O que são Nginx e Gunicorn? Gunicorn O Gunicorn (Green Unicorn) é um servidor de aplicação WSGI que roda aplicações Python como o Flask. Ele é eficiente e simples de configurar, lidando com múltiplas requisições ao mesmo tempo, algo que o servidor embutido do Flask não faz bem. Nginx O Nginx é um servidor web que atua como um proxy reverso. Ele recebe requisições HTTP e as encaminha ao Gunicorn. Além disso, o Nginx pode: Servir arquivos ...
Postar um comentário
Leia mais

Limpando objetos dinamicamente (Delphi)

  Muitas vezes nos deparamos com situações onde devemos remover o conteúdo de determinados objetos, como por exemplo Edits ou mesmo Labels e dependendo da complexidade da tela setar manualmente cada campo pode ser trabalhoso.Sendo assim mostraremos hoje como montar um esquema automático e genérico para esse caso:   procedure TForm1.Button1Click(Sender: TObject);  procedure LimparEdits(AControl: TComponent); var    vLoop: Integer; begin     { ComponentCount retorna a qtde de componentes que o parent é o AControl, ou seja, somente os componentes que     estão ligados a ele }     for vLoop := 0 to AControl.ComponentCount-1 do      begin                                         ...
7 comentários
Leia mais