Hoje eu trabalho inteiramente com Back-End, mas quando comecei a trabalhar como desenvolvedor a uns 4 anos atrás, eu comecei com o Front-End, e a biblioteca que mais utilizei foi sem dúvida o React.js, eu devo ter feito dezenas de projetos utilizando uma estrutura bem pareci, que era bem comum nessa época.

Depois de quase 2 anos sem mexer em quase nada de Front-End, me bateu aquela saudade sabe? Uma vontade de fazer algo visual, de passar 2 horas tentando arrumar alguma coisa no CSS, essas coisas… Então decidi ver como estavam as coisas nesse ambiente, para minha não tão grande surpresa, muita coisa mudou! Nesse post, e possivelmente em alguns outros quero mostrar como eu fazia as coisas nesse tempo, para você que começou a pouco tempo, e como as coisas são feitas hoje em dia, pra você que esteve em uma caverna por dois anos assim como eu. Provavelmente algumas destas coisas serão apenas correções do que eu fazia errado!

Iniciando um projeto⌗

Bem essa é simples: create-react-app né?

Em 2019 sim, e se você estranhou não tinha um tutorial que usasse npx em 2019, nem sei se ja fazia parte da cli do npm! Você tinha de instalar globalmente o create-react-app, npm i -G create-react-app, e só depois executar. Hoje npx create-react-app my-app já resolve o problema muito mais facilmente!

A estrutura do projeto padrão não mudou muita coisa:

.
├── package.json
├── package-lock.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── README.md
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    ├── reportWebVitals.js
    └── setupTests.js

O que mudou e que hoje essa não é mais a unica forma de iniciar um projeto react!

Primeiro temos os Frameworks, são milhares deles! Next.JS, Nuxt, Remix, Gatsby. Estou tentando me acostumar com eles, ainda provavelmente teremos posts sobre Next.js

E mesmo se você só quiser um projeto simples e parecido com o do CRA, vale a pena olhar para ferramentas como Parcel e Vite que são bem diretas e faceis de customizar!

Gerenciamento de estado⌗

Ninguém fala mais de Eedux! Essa já era uma tendência quando eu estava saindo do mundo do front-end, mas agora é uma realidade: O gerenciamento de estado acontece inteiro com ContextAPI!

Eu entendo muito bem isso, o Eedux era bem burocrático, você tinha de criar uma função de reducer, definir actionTypes, criar funções que agiam como factories para as suas actions, criar Providers, além de outros padrões e libs criadas em cima disso como Redux-thunk, que usei muito, e Redux-saga!

Se você não sabe nada disso, provavelmente nem quer aprender por que Context resolve tudo, você está certo context e provavelmente mais fácil de usar hoje, mas esta errado e devia aprender isso, por que até 2020 se usava muito redux e todo esse código esta andando por ai sem destino como projetos legados que mais cedo ou mais tarde vão cair no seu colo!

Bibliotecas de Validação⌗

Eu fiz tudo isso na mão, ainda começaram a aparecer algumas bibliotecas meio fraquinha, mas quando bibliotecas mais competentes começaram a aparecer eu já estava pulando para o lado Back-End da força e já não acompanha-va esse mundo.

Hoje a minha principal dúvida e qual dessas usar por que tem milhares né? Yup, Hook Forms, Formik…

Typescript⌗

Entrou na mesma categoria das validações quando virou uma tendência eu já estava seguindo por outro caminho, hoje parece que todo mundo usa, mesmo que muitos provavelmente tenham mais any espalhado por ai do que deveriam…

Acho que é isso por enquanto, vou tentar fazer mais posts sobre essa experiência de voltar a brincar com Font-End, em especial sobre Next e com comparações dessas rápidas evoluções dos últimos anos!

Este é um post super rapidinho para cumprir um desafio de escrever posts por 30 dias, você pode ver outros posts na tag 30daysOfPosts