Olá! Me chamo Laura Oliveira e estou iniciando minha jornada no mundo React da força e pretendo documentar nesse repositório minhas evoluções.
Caso você também esteja iniciando no mundo react no momento que visualizar esse repositório ou iniciando no mundo web vou deixar uma trilha de assuntos que você precisa estudar antes de chegar ao react e alguns conceitos básicos sobre react (até para fixar melhor o conhecimento para mim também :v)
Essa primeira parte é para quem está iniciando no mundo web. Se não for o seu caso pode pular para a segunda seção.
No início era tudo mato (saudades Fireworks e Flash. Mentira ainda bem que aquilo tudo morreu haha). Então houve luz no primeiro dia (após a morte do Flash) e nasceu o HTML que ao longo do tempo evoluiu e no momento em que escreve este Readme está na versão 5. Logo em seguida vieram o CSS e o Javascript (não necessariamente neste ordem, sou péssima com datas então deixo aí para a curiosidade de vocês pra descobrir quem veio primeiro).
(adicionar links/melhoria) Então para iniciar no mundo web você preciso inicialmente aprender:
- HTML5;
- CSS3;
- JavaScript;
- DOM;
- Aprender a utilizar uma IDE (ferramenta de desenvolvimento. Recomendo o VSCode);
- Aprender a usar o console do navegador (pois não adianta querer aprender a programar sem conseguir identificar seus erros. 90% do tempo programando é resolvendo os problemas que você mesmo criou e os outros 10% realmente criando algo novo);
- Git/Github (aprenda a usar o terminal do git, pois no dia que alguma extensão da IDE que você utilizar der pau você vai conseguir se virar bem pelo terminal);
- Aprender a gostar de café e pizza para sustentar as madrugadas a dentro (bricadeira. Mas é verdade); E por último mas não menos importante ser uma pessoa curiosa e gostar de resolver problemas. Porque programação do meu ponto de vista se resume a resolver problemas (dos outros haha).
Vamos para o que realmente importa saber nos primeiros contatos com react.
Aqui é a parte teórica (que muita gente odeia) necessária para que você não fiquei igual a Nazaré Tedesco quando pegar algum código react para examinar.
First things first: "O que danado é react, Laura?"
Então jovem gafanhoto react é uma biblioteca JavaScript que utiliza componentes JSX para se comunicar com o navegador e poder mostrar aquela tela linda que todo mundo gosta (algumas com paletas de cores de gosto duvidoso).
O React se baseia em uma estrutura de componentes, ou seja, trechos de código independentes e reusáveis.
Vantagens de utilizar uma abordagem baseada em componentes:
- Manutenção é facilitada a médio e longo prazo (pois é fácil de identificar os componentes e suas dependências);
- Reúso do código evita criar duplicidade no sistema e consequentemente evitando adicionar complexidade ao código.
A JSX é uma extensão da sintaxe do JavaScript que te permite incluir código HTML dentro de código JavaScript e dessa forma te dando mais poder na hora de manipular a árvore DOM do navegador.
O DOM nada mais é do que uma estrutura de árvore onde todos os elementos de uma página HTML são mapeados para que você possa manipular qualquer elemento através do JavaScript.
E o navegador não entende a sintaxe do JSX (obs.: colocar foto gretchen aqui embaixo/melhoria)
Então para que essa comunicação consiga fluir é necessário utilizar uma biblioteca que interprete essa linguagem JSX em código JavaScript (a biblioteca desse segmento mais utilizada é a Babel).