📚 update: dia_4 has done.

Author: Raphael-GC

semana_1/dia_4.md

@@ -0,0 +1,49 @@
+<div align="center">
+    <h1>Dia 4</h1>
+</div>
+
+<p align="center">
+  <a href="#phosphor-icons">Phosphor Icons</a> •
+  <a href="#home--end">Home & End</a> •
+  <a href="#post--post-">.post + .post {}</a> •
+  <a href="#camel-case-html-vs-react">Camel Case (HTML vs React)</a>
+</p>
+
+## Camel Case (HTML vs React)
+<ul>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.</ul>
+<ul><b>HTML:</b>
+        
+    <button onclick="handleClick()">Click me</button>
+
+    <div tabindex="0"></div>
+    
+    <input type="text" onchange="handleChange()" />
+
+</ul>
+<ul><b>React(JSX):</b>
+        
+    <button onClick={handleClick}>Click me</button>
+    
+    <div tabIndex="0"></div>
+
+    <input type="text" onchange="handleChange()" />
+</ul>  
+
+## Home & End
+<ul>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.</ul>
+
+## .post + .post {}
+<ul>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.</ul>
+
+## Phosphor Icons
+<ul>É 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.</ul>
+
+<b>👀 read later </b><br>
+
+[Phosphor Icons](https://phosphoricons.com/) <br>
+[Phosphor Icons + React](https://github.com/phosphor-icons/homepage?tab=readme-ov-file#react) <br>
+[]() <br>
+
+<br>
+<img src="./../.github/assets/gradient-bar.svg" width="100%" height="8px"/>
+<p align="center">Grow like a 🌳!</p>