[Na prática] - React - Componentes Funcionais







Olá caros leitores,  


[Na prática] - React - Componentes Funcionais

Na prática traz de forma pontual o tema e sua implementação.

Premissa: React Iniciante
Nível de dificuldade: fácil

Conceitos, características e vantagens:

  1. Componentes baseados em funções Javascripts no React.
  2. Elementos sem o state ( que os componentes de classe possuem)
  3. Servem para exibir informações: Listas, fotos, etc
  4. Fácil de ler e implementar.
  5. Mais simples de testar por não ter os efeitos de mudança de estado dos componentes baseados em classes.
  6. Potencialmente mais performáticos por não ter o ciclo de vida e controle de estados de componentes de classes. 

.... entre outras vantagens e características

Passos: 
Passo 1: Crie uma aplicação react básica no StackBlitz
https://stackblitz.com/



Passo 2: No index:
 Crie uma referência para o componente Pessoa




Passo 3: Crie o componente Pessoa




Já funciona... vamos melhorar ?


Vamos passar 2 parâmetros para a declaração do componente pessoa no index:   



Vamos melhorar o componente pessoa de forma à permitir os 2 parâmetros e o resultado ao lado nos mostra que agora sabemos como criar o componente bem como passar parâmetros para seu uso.







Ao fim,....



Gostaram ? Peçam as próximas postagens que querem ver aqui e farei!



Comentários

Postar um comentário

Postagens mais visitadas deste blog

Dicas C# - Usando o LINQ para contar frequências em listas

Imagem
Olá caros leitores, Exemplo completo no final do post!  O que veremos neste post:  Extrair no C# de forma ágil e elegante a frequência de itens em uma lista de objeto complexo. Para tal, utilizaremos o Linq. Cenario: Em uma situação que se tem uma lista de objetos complexos ( Boletos, Usuários, Livros etc ) e deseja-se obter a quantidade de ocorrências de uma determinada propriedade da lista. Com isto podemos fazer todo tipo de agrupamento e extração de dados de ocorrências de forma simples. Imagine o objeto que traz as notas dos alunos em disciplinas e queremos saber a ocorrência e as notas somente em matemática. 1. Contrução do Objeto: AlunoDisciplinaNota         public class AlunoDisciplinaNota{ public int Id {get;set;} public int Nota {get;set;} public string Disciplina {get;set;} } 2. Agora vamos criar uma lista com tipos complexos: List<AlunoDisciplinaNota> alunos = new List<AlunoDisciplinaNota>...
Leia mais

React - Dimensões de tela

Imagem
Este é meu primeiro post sobre React e trarei uma série de dicas e truques que facilitam o dia a dia. Este exemplo mostra como obter as dimensões da janela dinâmicas ouvindo o redimensionamento do navegador para manter o valor no estado do componente.  Nível: Básico Dificuldade: Baixa Farei o exemplo dentro da Classe APP para facilitar mas você pode colocar em qualquer componente. Passos:  1. Crie os states:  windowHeight e  windowWidth  this . state = { windowHeight : 0 , windowWidth : 0 }; 2. Crie o método  updateWindowDimensions updateWindowDimensions() { this.setState({ windowWidth: window.innerWidth, windowHeight: window.innerHeight }); } 3. Faça o bind deste método criado no contrutor: constructor () { super (); this . state = { windowHeight : 0 , windowWidth : 0 }; this . updateWindowDimensions = this ....
Leia mais

Acessando Redis com AspNet Core 3.1

Imagem
Olá caros leitores, O que veremos neste post:  Acessando Redis com AspNet Core 3.1 Veremos na prática como acessar uma base redis com aspnet core 3.x. Premissa: Noções básicas .Net Nível de dificuldade: médio Passos:  Passo 1: Base Redis Criei um servidor local do Redis, baseado neste artigo: Fast tips - redis com docker em 5 minutos Passo 2: Projeto AspNet Projeto: ProjetoConsumirRedis Tipo: webapi Passo 3: Configurações Configurar os acessos ao redis ( baseados no redis criado ): Basta adicionar o trecho abaixo no arquivo appsettings.Development.json : Instale o pacote Redis Cache: Configure seu startup com os dados de acesso do Redis e o nome da base que queira criar/acessar: Passo 4: PessoaController Para fins didáticos e para focar no tema a maior parte da implementação ficará no controller. Crie o controller e configure conforme abaixo: Variáveis que representam o cache e ...
Leia mais