Create-React-App (CRA) e seus benefícios no React

Olá! Hoje vou compartilhar com vocês algumas reflexões pessoais sobre um tema que tem estado em minha mente ultimamente: A mudança na forma como usamos create-react-app (CRA) e como isso beneficia a experiência dos desenvolvedores em React.

Por que o create-react-app não é mais conveniente?

Há algum tempo, o CRA era a escolha padrão para iniciar projetos no React. Mas por que não é mais lucrativo?

1- Complexidade do projeto

À medida que nossas aplicações web se tornam mais sofisticadas, o CRA muitas vezes não oferece flexibilidade para configurar ferramentas avançadas como Webpack, Babel ou ESLint de acordo com as necessidades do nosso projeto. Isto pode resultar em soluções extremas, como “ejetar” a configuração padrão do CRA, o que quebra sua simplicidade original.

2- Configuração excessiva

O CRA inclui muitas configurações padrão, o que pode deixar nossos aplicativos cheios de códigos desnecessários. Isso, por sua vez, pode impactar negativamente a velocidade de carregamento e o desempenho geral do aplicativo. À medida que nossos projetos crescem, essa sobrecarga pode se tornar significativa e difícil de otimizar.

3- Falta de personalização

Num mundo onde procuramos soluções mais customizáveis, o CRA pode limitar nossa capacidade de modificar a configuração de compilação e adicionar recursos personalizados sem esforço significativo. Isso pode ser uma barreira para projetos que exigem configurações mais avançadas.

Benefícios da mudança no React

Agora vamos falar sobre como essa mudança pode ser benéfica na forma como usamos o React:

1- Maior flexibilidade

Alternativas ao CRA nos dão maior controle sobre a configuração de nosso aplicativo React, permitindo-nos adaptá-lo às nossas necessidades específicas. Isto é especialmente útil para projetos que exigem uma abordagem mais personalizada.

2- Melhor performance

Com opções de configuração mais otimizadas, nossos aplicativos tendem a ter melhor desempenho, melhorando a experiência do usuário final. A velocidade e a eficiência de carregamento são fatores cruciais para o sucesso de uma aplicação web.

3- Aprendizado profundo

Utilizar alternativas ao CRA dá-nos a oportunidade de aprender mais sobre as ferramentas e tecnologias subjacentes, o que é benéfico para o nosso crescimento profissional. Com controle sobre a configuração, podemos nos aprofundar nos principais aspectos do desenvolvimento web.

Como instalar alternativas ao React?

Agora que exploramos por que create-react-app não é mais a escolha padrão e como mudar a forma como usamos o React pode nos ajudar, é importante aprender sobre as alternativas que estão ganhando força. Aqui vou mostrar como você pode começar com algumas das opções mais populares: Next.js, Gatsby, Remix e Expo.

Instalação do Next.js

Next.js é uma das alternativas mais populares que combina React com recursos avançados como roteamento e renderização do lado do servidor (SSR). Para começar, siga estas etapas:

1) Crie um projeto Next.js

Coloque o seguinte comando em seu terminal:

npx create-next-app [projectName]

(Para usar a versão mais recente disponível, adicione npx create-next-app@latest [projectName])

2) Altere o diretório do projeto:

Coloque o seguinte comando em seu terminal:

cd [projectName]

3) Inicie o servidor de desenvolvimento:

Coloque o seguinte comando em seu terminal:

npm run start

Visite http://localhost:3000 no seu navegador para ver seu aplicativo em ação.

Instalação do Gatsby

Gatsby é uma ótima opção para construir sites estáticos e aplicativos web modernos. Para começar, siga estas etapas:

1) Crie um projeto Gatsby:

Coloque o seguinte comando em seu terminal:

npx gatsby new [projectName]

2) Altere o diretório do projeto:

Coloque o seguinte comando em seu terminal:

cd [projectName]

3) Inicie o servidor de desenvolvimento:

Coloque o seguinte comando em seu terminal:

npm run develop

Visite http://localhost:8000 em seu navegador para visualizar seu site Gatsby.

Instalação do Remix

Remix é uma plataforma de desenvolvimento web com foco em performance e experiência do desenvolvedor. Para começar, siga estas etapas:

1) Crie um projeto Remix:

Coloque o seguinte comando em seu terminal:

npm init remix

2) Altere o diretório do projeto:

Coloque o seguinte comando em seu terminal:

cd [projectName]

3) Inicie o servidor de desenvolvimento:

Coloque o seguinte comando em seu terminal:

npm run start

Visite http://localhost:3000 em seu navegador para trabalhar com o Remix.

Instalação do Expo

Expo é uma ferramenta que facilita o desenvolvimento de aplicativos móveis com React Native. Siga estas etapas para começar:

1) Instale Expo CLI globalmente (se você ainda não o fez):

Coloque o seguinte comando em seu terminal: npm install -g expo-cli

2) Crie um projeto Expo:

Coloque o seguinte comando em seu terminal: expo init [projectName]

3) Altere o diretório do projeto:

Coloque o seguinte comando em seu terminal: cd [projectName]

4) Inicie o servidor de desenvolvimento:

Coloque o seguinte comando em seu terminal: expo start

Isso abrirá o Expo DevTools em seu navegador e fornecerá um código QR que você pode digitalizar com o aplicativo Expo Go em seu dispositivo móvel.

O cenário de desenvolvimento do React está em constante evolução e essas alternativas oferecem uma variedade de opções para atender às necessidades do seu projeto. Esteja você procurando desempenho, facilidade de desenvolvimento ou recursos avançados, essas ferramentas têm algo a oferecer.

Experiência pessoal

Desde que mudei meu foco e comecei a explorar alternativas, minha experiência com React melhorou significativamente. Aqui estão alguns exemplos de como essa mudança me beneficiou:

• A maior flexibilidade oferecida pelas alternativas ao CRA (especialmente Next.js) me permitiu adaptar cada projeto React às suas necessidades específicas. Não estou mais limitado pelas decisões de configuração padrão.
  
• O desempenho dos meus aplicativos melhorou visivelmente. Com opções de configuração mais otimizadas, meus usuários experimentam maior velocidade de carregamento e maior eficiência no uso do aplicativo.
  
• Meu crescimento profissional também avançou. Usar alternativas ao CRA me deu a oportunidade de me aprofundar nas ferramentas e tecnologias subjacentes, o que expandiu meu conjunto de habilidades como desenvolvedor web.

Resumindo, a mudança em minha opinião e perspectiva em relação a alternativas para create-react-app foi uma revelação. Desde que fiz essa mudança, meu trabalho com React se tornou muito mais fácil e eficiente. A adaptação a essas novas ferramentas tem sido fundamental para permanecer relevante na indústria de desenvolvimento web em constante mudança.

Espero que minha experiência possa inspirar ou servir você em sua jornada como desenvolvedor.

Sucesso!