Depois que o Create React App foi descontinuado, o React agora recomenda oficialmente começar com frameworks.
Uma nova forma de começar com React: do Create React App para frameworks
Se você vai criar um novo app ou site com React, é melhor começar por um framework.
Se o seu app tiver restrições que não são bem atendidas pelos frameworks existentes, se você preferir criar seu próprio framework ou se quiser apenas aprender os fundamentos de um app React, você pode construir um app React do zero.
Frameworks full-stack
Esses frameworks recomendados oferecem suporte a todos os recursos necessários para implantar e escalar apps em produção. Eles integram os recursos mais recentes do React e aproveitam a arquitetura do React.
Frameworks full-stack não exigem servidor
Todos os frameworks desta página oferecem suporte a client-side rendering (CSR), single-page apps (SPA) e static site generation (SSG). Esses apps podem ser implantados sem servidor em um CDN ou serviço de hospedagem estática. Além disso, esses frameworks permitem adicionar server-side rendering por rota quando isso fizer sentido para o seu caso de uso.
Isso significa que você pode começar com um app somente cliente e, se os requisitos mudarem depois, escolher usar recursos de servidor em rotas específicas sem reescrever o app. Consulte a documentação do framework para saber como configurar a estratégia de renderização.
Next.js (App Router)
O App Router do Next.js é um framework React que permite apps React full-stack aproveitando ao máximo a arquitetura do React.
npx create-next-app@latest
O Next.js é mantido pela Vercel. Você pode criar um app com Next.js e implantá-lo em hospedagem Node.js e serverless ou em seu próprio servidor. O Next.js também oferece suporte a exportação estática, que não exige servidor. A Vercel também oferece serviços de nuvem pagos opcionais.
React Router (v7)
React Router é a biblioteca de roteamento mais popular no React e, quando usada com o Vite, pode criar um framework React full-stack. Ela enfatiza APIs Web padrão e tem templates de implantação prontos para vários runtimes e plataformas JavaScript.
Para criar um novo framework com React Router, use o comando a seguir.
npx create-react-router@latest
O React Router é mantido pela Shopify.
Expo (para apps nativos)
Expo é um framework React para criar apps universais para Android, iOS e web usando UI nativa. Ele fornece um SDK do React Native que facilita o uso das partes nativas. Para criar um novo projeto Expo, use o comando a seguir.
npx create-expo-app@latest
Se você está começando com Expo, consulte o tutorial do Expo.
O Expo é mantido pela Expo (a empresa). Criar apps com Expo é gratuito, e você pode enviá-los sem restrições para a Google Play ou a App Store da Apple. O Expo também oferece serviços de nuvem pagos opcionais.
Outros frameworks
Existem outros frameworks emergentes que estão avançando na direção da visão full-stack do React.
- TanStack Start (Beta): TanStack Start é um framework React full-stack baseado no TanStack Router. Ele oferece SSR de documento completo, streaming, funções de servidor, bundling e muitas ferramentas úteis, com Nitro ou Vite.
- RedwoodJS: Redwood é um framework React full-stack com pacotes e configurações pré-instalados para facilitar a criação de aplicações web full-stack.
Quais recursos compõem a visão da equipe do React para a arquitetura full-stack?
O bundler do App Router do Next.js implementa toda a especificação oficial de React Server Components. Isso permite misturar, em uma única árvore React, componentes de build time, exclusivos do servidor e interativos.
Por exemplo, você pode escrever um componente React exclusivo do servidor como uma função async que lê um banco de dados ou arquivos. Depois, pode passar os dados para componentes interativos.
// Este componente roda *somente* no servidor (ou apenas durante o build).
async function Talks({ confId }) {
// 1. No servidor, você pode falar com a camada de dados. Não é preciso endpoint de API.
const talks = await db.Talks.findAll({ confId });
// 2. Mesmo adicionando lógica de renderização, isso não aumenta muito o tamanho do bundle JavaScript.
const videos = talks.map(talk => talk.video);
// 3. Passe os dados para um componente que será executado no navegador.
return <SearchableVideoList videos={videos} />;
}
O App Router do Next.js integra Suspense e data fetching. Isso permite especificar diretamente, na árvore React, estados de carregamento para diferentes interfaces de usuário, como placeholders skeleton.
<Suspense fallback={<TalksLoading />}>
<Talks confId={conf.id} />
</Suspense>
Server Components e Suspense não são recursos do Next.js, mas do React. No entanto, adotá-los no nível de framework exige envolvimento e um trabalho de implementação nada trivial. Atualmente, o App Router do Next.js é a implementação mais completa. A equipe do React está colaborando com desenvolvedores de bundlers para facilitar a implementação desses recursos na próxima geração de frameworks.
Começar do zero
Se o seu app tiver restrições que não são bem atendidas pelos frameworks existentes, se você preferir criar seu próprio framework ou se quiser aprender os fundamentos de um app React, há outras opções para iniciar um projeto React do zero.
Começar do zero oferece mais flexibilidade, mas você precisará escolher as ferramentas para roteamento, busca de dados e outros padrões de uso comuns. É semelhante a criar seu próprio framework em vez de usar um framework já existente. Os frameworks que recomendamos já vêm com soluções integradas para esses problemas.
Para criar sua própria solução, consulte o guia de como criar um app React do zero, que ajuda você a começar com ferramentas de build como Vite, Parcel ou RSbuild.
6 comentários
O React nada mais é do que uma biblioteca de UI baseada em componentes. Simplesmente exibir componentes em HTML é fácil, mas para criar um site ou aplicativo são necessários muitos recursos. Por isso, recomenda-se usar um framework. Isso não acontece apenas por ser React; grande parte da web moderna é construída por meio de frameworks web. Além disso, o React não precisa necessariamente ser usado com um framework baseado em React, já que também pode ser usado junto com frameworks web criados em várias linguagens diferentes, como Go, Rust e Java. Portanto, a escolha é sempre do usuário.
Quando não se sabe sob quais restrições o programador vai usar React, acho que a documentação oficial deveria ser escrita no ambiente mais próximo possível do vanilla.
Como o React pode ser usado junto com frameworks web feitos em várias linguagens, mesmo sem ser necessariamente um framework baseado em React (ex.: Go, Rust, Java etc.),
-> na verdade, por causa disso, acho que pelo menos a parte de get started da documentação oficial do React deveria orientar o máximo possível para usar apenas React, sem outras dependências.
Bem... como alguém que também estava estudando React recentemente,
com a descontinuação do CRA, fiquei pensando no que fazer, já que o material de estudo que eu tinha era baseado em CRA, então fui olhando Next, React Router e outros, mas eles vêm com tecnologias próprias adicionadas, então, do ponto de vista de quem está estudando React, não acho que sejam tão adequados... pessoalmente, acho que o Vite talvez seja a melhor opção.
O React agora recomenda oficialmente começar com um framework -> embora essa conversa já esteja bem atrasada, às vezes fico pensando se faz mesmo sentido que a própria documentação oficial do React já parta recomendando começar com um framework específico ou uma build tool específica.
Há casos em que não dá para usar esse framework ou essa build tool dentro de uma base de código já existente, e o simples fato de aumentar as dependências também pode parecer um peso.
Naquela época em que bastava colocar uma única tag
scriptno HTML e simplesmente usar os recursos da biblioteca, eu me sentia bem mais tranquilo. Será que isso já é papo de velho demais...Eu também fico pensando se realmente precisa ser assim.