dia_4.md

Dia 4

Phosphor Icons • Home & End • .post + .post {} • Camel Case (HTML vs React)

Camel Case (HTML vs React)

Muitas tags do html que possuem palavras compostas, são escritas separadas por hífen ou juntas com todas as letras minúsculas. Seja qual for de ambos os exemplos citados, ao utilizá-las no React, ou seja, no JSX, precisamos respeitar o padrão Camel Case, onde a primeira palavra é escrita toda minúscula e a palavra seguinte sempre é escrita com letra maiúscula apenas na primeira letra.

HTML:

<button onclick="handleClick()">Click me</button>

<div tabindex="0"></div>

<input type="text" onchange="handleChange()" />

React(JSX):

<button onClick={handleClick}>Click me</button>

<div tabIndex="0"></div>

<input type="text" onchange="handleChange()" />

Home & End

Eu deveria ter vergonha de escrever isso aqui mas preciso registrar 🤦🏾‍♂️. Hoje, aos 32 anos descobri que os botões Home e End, fazem respectivamente, o cursor ir para o início ou fim da linha de onde ele está posicionado.

.post + .post {}

Em algum momento, todos nós já quebramos a cabeça para tentar descobrir como criar uma estilização para um componente que só dever ser ativada caso haja um anterior ou posterior à ele. É o caso desse seletor que só estilizará o componente Post, caso haja um componente Post que o anteceda.

Phosphor Icons

É uma biblioteca de ícones com uma boa variedade de opções e que nos facilitam a vida quando a meta é economizar processamento ao carregar ilustrações. Sem falar que não se trata de ir lá e carregar o link de um SVG. Essa biblioteca contem recursos muito úteis para estilizarmos esses ícones.

👀 read later

Phosphor Icons
Phosphor Icons + React

Grow like a 🌳!