ReactJs (Fast Tips) - Tratamento de undefined props





Olá caros leitores,
O que veremos neste post: 

ReactJs (Fast Tips) - Tratamento de undefined props


Abordagens na hora de tratar props


Essa é um post de dicas rápidas que sempre são bons para lapidar seus conhecimentos quando estiver aprendendo uma linguagem e modos de usar.

Falarei de como tratar as props não informadas, vamos lá:

Premissa: Noções básicas de React
Nível de dificuldade: fácil

Caso não conheça o básico do react, recomendo o post aqui do Blog:  React Tutorial - Parte 1

Passos: 
Passo 1: O Projeto
 Um index e um componente "Conteúdo" que é um card.
Conteúdo espera várias props e no primeiro momento na declaração da linha 17:

<Conteudo cardNumber='1'/>


Na foto abaixo o componente Conteúdo e a saída do console ( nenhum erro, todas as props undefined e tratadas de diferentes maneiras)



Passo 2: Adição de mais 1 componente "Conteúdo" com todos as props passadas:
Veja a diferença e a flexibilidade do React, temos 1 componente bem diferente e nenhum erro:




Esse foi uma fastTip de uma série de outras que virão.  


Link do código fonte no StackBlitz!


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 Tutorial - Parte 1

Imagem
Olá caros leitores, Link do gitHub do projeto aqui! Afim de aprimorar os estudos e praticar um pouco de tudo que venho aprendendo sobre React resolvi iniciar uma série de postagens em português e ir evoluindo uma aplicação do zero, implementando desde o básico até features mais avançadas sobre React. Esta parte 1 ainda terá um pouco de conceitos mas a ideia é que seja prático e um guia para você que tem interesse em aprender esta linguagem. O que veremos neste post:  Requisitos básicos para criar um projeto Criação de projeto básico. Entendimento da estrutura do projeto  Entendimento da estrutura de projeto atomico Instalação de framework - React Bootstrap Instalação de framework - PrimeReact (Primefaces) 1. Requisitos básicos para criar um projeto NodeJS: https://nodejs.org/en/ Visual Code ( ou outro editor de sua preferência ) 2. Criação de projeto básico Vamos criar um projeto segundo o basico do site oficial (sempre olho prime...
Leia mais

Jquery - Introdução

Imagem
Olá caros leitores, blz? Este artigo é uma introdução básica para aqueles que desejam aprender, utilizar e/ou estudar os conceitos e práticas mais comuns do Jquery. Você pode estar aprendendo agora ou estudando para uma certificação, então este artigo é para você. Apesar de, no mundo front-end as "novidades" e tendências serem outras libs como react, ou frameworks como Angular 8 o Jquery ainda está em milhões de site por este mundo afora. Obs: Parto do pressuposto que vc tenha alguma ideia muito básica do que é o Javascript, caso não o tenha estarei fazendo um breve tutorial aqui em breve ;-)   Segundo o site  https://trends.builtwith.com/javascript/jQuery  , está em pouco mais de 66 milhões!! Vamos ao básico: Jquery é uma biblioteca Javascript que otimiza tarefas e proporciona um alto nível de implementação de rotinas em Javascript de forma muito mais enxuta e otimizada. O cara mais importante é o seletor ( $ ), este é a ferramenta in...
Leia mais