Segundo a documentação do React, Context provê uma forma de passar dados através da árvore de componentes sem a necessidade de passar esses dados através das props por cada nível desejado.
O que isto significa? Significa que usando o context, você tem um ponto focal de acesso a informação. Se você quiser acessar determinada informação, basta apontar diretamente para o context!
Com ele, conseguimos facilitar em muito nosso desenvolvimento!
Quando desenvolvemos aplicações utilizando o Angular 2 ou superior, é comum usarmos seu cli para criarmos o projeto, componentes, etc
A geração de novos projetos pode ser feita através do comando ng new minha-app.
Mas você sabia que podemos passar alguns parâmetros junto a este comando para que o projeto já venha com algumas configurações definidas?
Um exemplo disso é a criação do projeto já utilizando o Scss!
Compartilhar variáveis entre componentes é uma atividade que frequentemente realizamos, principalmente quando desenvolvemos componentes com o intuito de serem reaproveitados por toda a aplicação.
Em uma primeira publicação, mostrei como podemos fazer o compartilhamento de variáveis do componente pai para o componente filho.
Mas e em um cenário ao contrário? Seria possível?
A resposta é SIM!
Alguma vez você já precisou criar uma barra de rolagem DENTRO de uma div?
Você quer que aquele determinado conteúdo cresça sem a necessidade da página toda crescer junto, então para isso precisaria que somente aquele determinado trecho fizesse o scroll.
Com CSS conseguimos fazer isso sem nenhuma dificuldade!
Você só precisa utilizar a propriedade overflow!
Que atire a primeira pedra o DEV que nunca utilizou console.log para exibir algo!
O console.log é uma excelente forma de nós desenvolvedores realizarmos um debbug simples, básico de nossas aplicações.
Mas você sabia que os navegadores suportam outros tipos de console?
Enquanto estamos desenvolvendo um formulário no HTML, as vezes nos deparamos em cenários onde precisamos pegar o valor selecionado pelo usuário.
Isso envolve campos de texto, select box, radio buttons, checkbox!
Hoje, vou mostrar como podemos pegar o valor selecionado pelo usuário em um radio button, com Javascript puro!
Diariamente, o desenvolvedor constantemente depara-se com situações onde devem ser feitas verificações em seus formulários.
Esses formulários são compostos, por sua maioria, de input de textos, telefones, endereço, etc
E também temos casos onde há o input do tipo radio.
A pergunta é, como verificar se o radio button está checado, pelo Javascript?
Você já ouviu falar sobre um tal de DRY? DRY é uma sigla para Don’t Repeat Yourself, que significa Não Se Repita!
Este princípio tem como intuito a redução de código repetidos em toda sua aplicação.
Mas porque é tão importante evitarmos isso?
Você está desenvolvendo uma aplicação web onde em determinado local, você precisa mostrar a descrição de um produto.
Essa descrição pode ser um texto enorme, mais de 10 linhas ou pode ser um texto pequeno, contendo apenas duas linhas.
Então, o UX designer determina que a descrição deve conter apenas 3 linhas, caso ultrapasse isso, deve-se acrescentar reticências (…)
Como podemos adicionar reticências em múltiplas linhas, com CSS?
Vamos usar uma propriedade chamada -webkit-line-clamp! Bora ver como funciona?
Frequentemente, enquanto estamos desenvolvendo nossas aplicações, desejamos informar ao usuário mensagens de sucesso ou erro após alguma ação tomada.
Nativamente pelo próprio Javascript, poderíamos exibir através do window.alert, mas convenhamos, não é a maneira mais elegante a ser seguida!
Pensando nisso, existem diversas bibliotecas a qual nos ajudam nesta simples tarefa e hoje vamos falar de uma desenvolvida para React, chamada React-tostify!