Como Usar Ícones No React

Quem nunca precisou utilizar ícones em seu desenvolvimento que atire a primeira pedra!
Ícones além de deixar nossa aplicação mais elegante (quando bem escolhido), nos permite cumprir no mínimo duas das dez heurísticas criadas por Nielsen.

Nielsen fala que nosso sistema deve ter uma compatibilidade com o mundo real (Heurística número 2) e que Consistência e Padronização (Heurística número 4) é essencial para que não seja necessário que o usuário fique pensando muito quando abrir a tela do seu software.

Afinal, quem não entende que aquele símbolo de setinha para esquerda significa voltar e a seta para direita de ir para frente?

Por isso, a utilização de ícones em nossa aplicação é de suma importância!
Vamos então ver como podemos adicionar as melhores bibliotecas de iconologia em nosso projeto?

Ler mais

Como Configurar ESLint No React

Em nosso desenvolvimento diário, saber programar apenas não é o suficiente para sermos de fato um bom programador.
Existem padrões de projetos, boas práticas e alguns padrões que se seguirmos, nos torna muito melhor, bem como o nosso próprio código!

Uma coisa que devemos ter em mente é que, um código para ser considerado realmente bom é aquele código que fazemos de forma que um outro ser humano possa entender!

Pensando nisso, uma boa prática é utilizarmos o eslint!

Ler mais

Estruturas Imutáveis No Javascript

Ao falar sobre imutabilidade o pensamento que nos vem a cabeça é: simples, é só fazer cópia das variáveis ao invés de manipular a mesma.
De fato, a cópia ao invés do reúso dos objetos é um dos pilares da imutabilidade. Mas ao trabalharmos dessa forma, resolveremos o problema de mutação, mas criaremos outro: consumo de memória e processamento excessivos.

Considerando o primeiro cenário (cópia), é possível trabalhar da seguinte maneira:

1
2
3
4
const arr = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h']
const arr2 = [...arr]
arr2[0] = 'x'
// arr2 => ['x', 'b', 'c', 'd', 'e', 'f', 'g', 'h']

Ao fazer isso, internamente são criados dois arrays completamente diferentes, porém com alguns valores em comum.
Não seria mais interessante se fosse possível fazer o que aparentemente fazemos com esse código: criar o arr2 “baseado” em arr, dessa forma otimizando memória?

Ler mais