Ferramentas que te ajudam a come√ßar com React ūüõ†

Criar seu primeiro aplicativo com React pode ser uma tarefa √°rdua e cansativa. Inclusive, muito antes de escrever a primeira linha de c√≥digo. Isso porque antes mesmo de criar algum componente, o desenvolvimento frontend exige v√°rias configura√ß√Ķes iniciais. E isso pode se tornar pesadelo.

Vimos em alguns outros posts sobre a necessidade de ferramentas como um servidor web, webpack, babel, lint e v√°rias outras que nem mesmo comentei sobre. J√° adianto que algumas delas n√£o s√£o divertidas de configurar. E ter todo esse arsenal de ferramentas para estudar logo de cara, pode ser bastante desmotivador.

Outros desenvolvedores que também tiveram tais dores, criaram ferramentas incríveis que nos possibilita ter uma excelente configuração out of the box, e assim, podermos iniciar com a parte mais divertida: escrever código!

Desde scripts simples, até frameworks mais avançados, vou descrever um pouco sobre algumas das principais ferramentas que vão te ajudar a iniciar seu projeto frontend com React.

Estratégias de construção de aplicativos frontend

Mas antes vamos entender 3 estratégias de construção de aplicativos frontend: SPA, SSR, SSG

SPA: Single Page Applications

Single Page Applications s√£o aplicativos web de p√°gina √ļnica. Ou seja, todo o c√≥digo √© carregado uma √ļnica vez (no primeiro carregamento da p√°gina) e a partir da√≠, qualquer envio e recebimento de dados e feito atrav√©s de API requests.

Este tipo de aplicativo visa trazer uma experi√™ncia similar a um aplicativo nativo. SPAs tentam criar uma navega√ß√£o mais fluida atrav√©s de um carregamento particionado, ou seja, apenas partes da p√°gina que necessitam ser atualizadas o s√£o. O que difere de uma p√°gina web tradicional, onde a√ß√Ķes e cliques, levam ao carregamento de outra p√°gina.

React e seus conceitos de componentiza√ß√£o e de atualiza√ß√£o baseado em mudan√ßa de estado, facilitaram e muito o desenvolvimento das SPAs. Com a sua chegada e populariza√ß√£o, ficou mais f√°cil criar aplicativos com in√ļmeros componentes individuais e que eram atualizados, de acordo com estado de cada um dos componentes.

A partir da√≠, in√ļmeras outras bibliotecas foram criadas para auxiliar no desenvolvimento de SPAs, como: react-router, redux, axios e tantas outras.

SSR: Server Side Rendering

A maioria das p√°ginas de internet s√£o montadas no servidor e este, apenas as serve para os navegadores atrav√©s de arquivos HTML. A grande sacada do Server Side Rendering foi utilizar o melhor dos dois mundos. Faz-se um carregamento inicial da p√°gina pelo servidor e, ap√≥s a pagina carregada, quaisquer novas altera√ß√Ķes s√£o feitas atrav√©s do lado do cliente. Diferentemente de uma SPA, a qual utiliza o navegador para a cria√ß√£o da p√°gina HTML.

Com isso, um aplicativo SSR tem algumas vantagens, como diminuir (algumas vezes muito) o tempo de espera de carregamento da p√°gina, ter um melhor ranking nos buscadores, facilitar o uso de tags open graph e muitas outras.

React por si s√≥ n√£o consegue realizar tais fa√ßanhas. Ele roda apenas no navegador e portanto, se faz necess√°rio ter algo rodando no lado do servidor, que vai renderizar o conte√ļdo inicial. Frameworks server side como NodeJS e Ruby on Rails podem ser necess√°rios para que o Server Side Rendering aconte√ßa.

SSG

Static Site Generator como o nome já diz, é um framework que cria páginas HTML a partir de templates ou componentes de uma dada fonte. Estes são uma alternativa aos websites dirigidos por banco de dados.

Em p√°ginas web e aplicativos que necessitam que seus dados sejam imediatamente acessados, a toda requisi√ß√£o, pois mudam com frequ√™ncia, se faz necess√°rio um banco de dados. J√° p√°ginas que que tem um conte√ļdo est√°tico e sem mudan√ßas com alta frequ√™ncia, SSG √© perfeito. Pois, com a gera√ß√£o das p√°ginas est√°tica, elimina-se o intervalo necess√°rio para a comunica√ß√£o com o banco de dados.

As p√°ginas s√£o geradas no momento do build do site. Ou seja, os arquivos HTML gerados estar√£o prontos quando requisitados. Desta maneira, p√°ginas s√£o carregadas com muito mais velocidade, evitando quedas por picos de acesso.

Tal estratégia é perfeita para blogs e landing pages.

Ferramentas para criação de Apps com React

Create React App

A primeira e mais popular ferramenta - que nada mais √© do que um boilerplate - √© o create-react-app. Com ele √© poss√≠vel ter uma configura√ß√£o inicial para criar um aplicativo React. Ele j√° vem com v√°rios pacotes e scripts que v√£o te ajudar na parte inicial do seu projeto. √Č uma maneira muito simples de criar um SPA com React.

Após a criação de seu projeto com create-react-app, já é possível ir direto ao código e então rodar tudo no browser sem qualquer dificuldade. Ferramentas como eslint, webpack, babel, jest, hotreload e env vars já vem incluso e pronto para ser usado. E essa é a principal vantagem quando usamos boilerplates: reduzir algum tipo de trabalho inicial para que possamos começar o projeto passos a frente.

A grande vantagem do Create React App é ter a equipe que criou o React - e do Facebook - por trás. Além do fato de ser código aberto.

Outra caracter√≠stica importante √© o fato do projeto conter apenas uma depend√™ncia inicial: react-scripts. Este pacote √© o respons√°vel por manter funcionando todos os outros pacotes de configura√ß√£o do seu projeto. Atrav√©s dele tamb√©m √© poss√≠vel gerar seu app com todas as configura√ß√Ķes para produ√ß√£o, como minification, code splitting, compression e muito mais.

Talvez a sua maior desvantagem seja a dificuldade de customiza√ß√£o. Por manter tudo encapsulado dentro de um √ļnico pacote, Create React App dificulta a inser√ß√£o e remo√ß√£o de outros pacotes que, porventura, necessitamos utilizar. Isso prova ser excelente para aplica√ß√Ķes comuns, mas n√£o para aplica√ß√Ķes que tenham um escopo diferente da maioria e exigem configura√ß√Ķes avan√ßadas.

A boa not√≠cia √© que ele oferece o recurso eject. Tal recurso permite que o desenvolvedor possa se desvincular do pacote react-scripts e ent√£o, editar diretamente todos os arquivos de configura√ß√Ķes. No entanto, ap√≥s o eject, n√£o √© mais poss√≠vel voltar para o Create React App e todas as configura√ß√Ķes, desde atualiza√ß√Ķes √† corre√ß√Ķes de seguran√ßa, ficam na m√£o do time de desenvolvimento.

Vite

Este tem sido amplamente adotado nos √ļltimos tempos e o hype √© justific√°vel. Vite √© r√°pido!

Frontend nunca teve tanta relev√Ęncia no desenvolvimento web como nos √ļltimos anos. Consequentemente, Javascript nunca foi t√£o importante. Aplica√ß√Ķes de todos os tipos e complexidades tem usado frameworks frontend. N√£o √© raro encontrar reposit√≥rios enormes em que Javascript √© a linguagem principal. E com esse montante de c√≥digo s√≥ aumentando, velocidade e performance tende a cair.

Felizmente os navegadores tamb√©m v√™m se desenvolvendo e as ferramentas de bundling tem se aproveitado disso. Esse √© o caso do Vite. Ele tenta resolver os problemas de modulariza√ß√£o de grandes aplica√ß√Ķes utilizando as novas ferramentas nativas dos navegadores - as quais n√£o existiam antes.

As suas principais vantagens s√£o:

  • Melhora na velocidade de inicializa√ß√£o do servidor de desenvolvimento

      Quando em um projeto medio/grande porte, iniciar o servidor pode levar um tempo consider√°vel. Vite atua pra diminuir esse tempo.
    
  • Melhora na velocidade de atualiza√ß√£o do build quando em desenvolvimento

      Quando editamos arquivos em projetos frontend, o *build* deve acontecer novamente. Este processo pode ser um pouco mais demorado se o projeto é maior. Vite deixa tudo mais rápido.
    

Se você está começando no mundo React, vale a pena começar com Vite. Retirar gargalos já no início do processo de desenvolvimento, pode deixar o caminho muito mais fácil.

NextJS

Mais do que os outros dois boilerplates, NextJS √© um framework. Ele n√£o s√≥ vai te ajudar com as configura√ß√Ķes e c√≥digos iniciais no seu projeto, como vai te dar tamb√©m, uma estrutura completa.

No NextJS a estrutura de pastas já é definida. O roteamento do seu aplicativo, suporte para TypeScript e otimização de imagens também já está lá. Além de tudo isso, ainda é possível escrever código backend com NodeJS. Páginas podem ser geradas do lado do servidor de uma maneira bem simples. Com isso podemos utilizar de estratégias como SSR e SSG.

Ele também te permite construir sua API no mesmo projeto. Tal característica permite ir além do frontend, e assim, integrar seu aplicativo com banco de dados, meios de pagamentos e outras APIs de terceiros. Tudo dentro do mesmo projeto.

Tais características fazem do NextJS um framework React robusto e de muita qualidade. Aliado com a plataforma Vercel, é possível criar aplicativos prontos para produção de maneira muito rápida.

Apesar de ser um framework ainda novo, ele ganhou for√ßa e vem entregando o que promote. Ele tem in√ļmeros coment√°rios positivos da comunidade frontend e vem crescendo cada dia mais. Tem sido a minha escolha na cria√ß√£o de novos projetos React.

Gatsby

Gatsby é outro framework frontend muito poderoso. A sua proposta é facilitar o desenvolvimento de páginas web através da técnica de SSG. Utilizando React e outras tecnologias top de mercado como GraphQL e Webpack, é possível criar páginas extremamente rápidas e escaláveis. Talvez por isso este framework tem sido o preferido quando o assunto é Marketing websites.

Gatsby permite que o desenvolvedor combine dados coletados de diferentes lugares em uma √ļnica p√°gina. Por exemplo, √© poss√≠vel carregar produtos de uma loja Shopify e um formul√°rio Mailchimp.

Outro fator que salta os olhos √© sua velocidade. Por conta da estrat√©gia de SSR, combinada com algumas outras, Gatsby te d√° a possibilidade de construir um site perform√°tico e r√°pido, ajudando a melhorar tr√°fegos org√Ęnicos.

Com tantas características disponíveis de imediato e de fácil configuração, Gatsby é super popular. Vale a pena dar uma olhada em seus casos de sucesso e conferir se é uma boa idéia para você.

Por onde começar

Direto ao c√≥digo!! ūüĎ®‚ÄćūüíĽ

Quando no in√≠cio, o que mais deixa um programador feliz √© programar. Isso significa que dado as in√ļmeras ferramentas presentes no desenvolvimento frontend, tentar eliminar a maior quantidade poss√≠vel de trabalho que n√£o seja c√≥digo, vai ajudar o programador iniciante no seu aprendizado.

Não me entenda errado!! Saber sobre ferramentas, servidores, bibliotecas e editores faz parte do mundo da programação. Eventualmente vai se tornar imprescindível conhecer sobre os diferentes cantos deste universo. No entanto, alguns destes conceitos podem ser cansativos e desanimadores no início.

Minha dica √©: escolha um framework que te d√™ as configura√ß√Ķes prontas e comece a escrever c√≥digo Javascript usando React no dia 1. E ent√£o, conforme v√° evoluindo, se aprofunde no mundo a sua volta.

Bons estudos!

Se gostou desse artigo, se inscreva e receba semanalmente este e outros conte√ļdos diretamente no seu email. Sem spam! ūüėé

Compartilhe este artigo no Twitter.