v19.2Latest

Criando um Aplicativo React

Se você quer construir um novo aplicativo ou site com React, recomendamos começar com um framework.

Se o seu aplicativo tem restrições não atendidas adequadamente pelos frameworks existentes, você prefere construir seu próprio framework, ou apenas quer aprender o básico de um aplicativo React, você podeconstruir um aplicativo React do zero.

Frameworks full-stack

Estes frameworks recomendados suportam todos os recursos necessários para implantar e escalar seu aplicativo em produção. Eles integraram os recursos mais recentes do React e aproveitam a arquitetura do React.

Observação

Frameworks full-stack não exigem um servidor.

Todos os frameworks nesta página suportam renderização no lado do cliente (CSR), aplicativos de página única (SPA) e geração de sites estáticos (SSG). Esses aplicativos podem ser implantados em umCDNou serviço de hospedagem estática sem um servidor. Além disso, esses frameworks permitem adicionar renderização no lado do servidor por rota, quando fizer sentido para o seu caso de uso.

Isso permite que você comece com um aplicativo apenas no cliente e, se suas necessidades mudarem posteriormente, você pode optar por usar recursos do servidor em rotas individuais sem reescrever seu aplicativo. Consulte a documentação do seu framework para configurar a estratégia de renderização.

js (App Router)

O App Router do Next.jsé um framework React que aproveita totalmente a arquitetura do React para permitir aplicativos React full-stack.

npx create-next-app@latest

O Next.js é mantido pelaVercel. Você podeimplantar um aplicativo Next.jsem qualquer provedor de hospedagem que suporte Node.js ou contêineres Docker, ou em seu próprio servidor. O Next.js também suportaexportação estática, que não requer um servidor.

React Router (v7)

React Routeré a biblioteca de roteamento mais popular para React e pode ser combinada com o Vite para criar um framework React full-stack. Ele enfatiza as APIs Web padrão e possui váriosmodelos prontos para implantaçãopara várias plataformas e ambientes de execução JavaScript.

Para criar um novo projeto de framework React Router, execute:

npx create-react-router@latest

O React Router é mantido pelaShopify.

Expo (para aplicativos nativos)

Expoé um framework React que permite criar aplicativos universais para Android, iOS e web com interfaces de usuário verdadeiramente nativas.Ele fornece um SDK paraReact Nativeque facilita o uso das partes nativas. Para criar um novo projeto Expo, execute:

npx create-expo-app@latest

Se você é novo no Expo, confira otutorial do Expo.

O Expo é mantido pelaExpo (a empresa). Construir aplicativos com o Expo é gratuito, e você pode enviá-los para as lojas de aplicativos da Google e da Apple sem restrições. O Expo fornece adicionalmente serviços em nuvem pagos opcionais.

Existem outros frameworks emergentes que estão trabalhando em direção à nossa visão de React full-stack:

  • TanStack Start (Beta): O TanStack Start é um framework React full-stack alimentado pelo TanStack Router. Ele fornece SSR de documento completo, streaming, funções de servidor, empacotamento e mais, usando ferramentas como Nitro e Vite.
  • RedwoodSDK: O Redwood é um framework React full-stack com muitos pacotes pré-instalados e configuração que facilita a construção de aplicações web full-stack.
Deep Dive
Quais funcionalidades compõem a visão de arquitetura full-stack da equipe do React?

Começar do Zero

Se seu aplicativo tem restrições não bem atendidas por frameworks existentes, você prefere construir seu próprio framework ou apenas quer aprender o básico de um aplicativo React, há outras opções disponíveis para iniciar um projeto React do zero.

Começar do zero oferece mais flexibilidade, mas exige que você faça escolhas sobre quais ferramentas usar para roteamento, busca de dados e outros padrões de uso comuns. É muito parecido com construir seu próprio framework, em vez de usar um framework que já existe. Osframeworks que recomendamostêm soluções integradas para esses problemas.

Se você quiser construir suas próprias soluções, consulte nosso guia paraconstruir um aplicativo React do zeropara instruções sobre como configurar um novo projeto React começando com uma ferramenta de build comoVite,ParcelouRSbuild.


Se você é um autor de framework interessado em ser incluído nesta página,por favor, nos avise.