Criando uma Aplicação React

Se você quer construir uma nova aplicação ou website com React, recomendamos começar com um framework.

Se sua aplicação tem restrições que não são bem atendidas pelos frameworks existentes, você prefere construir seu próprio framework, ou apenas quer aprender o básico de uma aplicação React, você pode construir uma aplicação React do zero.

Frameworks full-stack

Estes frameworks recomendados suportam todas as funcionalidades que você precisa para fazer deploy e escalar sua aplicação em produção. Eles integraram as funcionalidades mais recentes do React e aproveitam a arquitetura do React.

Note

Frameworks full-stack não requerem um servidor.

Todos os frameworks nesta página suportam renderização do lado do cliente (CSR), aplicações de página única (SPA), e geração de site estático (SSG). Essas aplicações podem ser deployadas em uma CDN ou serviço de hospedagem estática sem um servidor. Além disso, esses frameworks permitem que você adicione renderização do lado do servidor rota por rota, quando faz sentido para seu caso de uso.

Isso permite que você comece com uma aplicação apenas do lado do cliente, e se suas necessidades mudarem depois, você pode optar por usar funcionalidades de servidor em rotas individuais sem reescrever sua aplicação. Veja a documentação do seu framework para configurar a estratégia de renderização.

Next.js (App Router)

O App Router do Next.js é um framework React que aproveita completamente a arquitetura do React para permitir aplicações React full-stack.

Terminal

npx create-next-app@latest

Next.js é mantido pela Vercel. Você pode fazer deploy de uma aplicação Next.js para qualquer hospedagem Node.js ou serverless, ou para seu próprio servidor. Next.js também suporta exportação estática que não requer um servidor. A Vercel também fornece serviços em nuvem pagos opcionais.

React Router (v7)

React Router é a biblioteca de roteamento mais popular para React e pode ser pareada com Vite para criar um framework React full-stack. Ele enfatiza APIs Web padrão e tem vários templates prontos para deploy para vários runtimes JavaScript e plataformas.

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

Terminal

npx create-react-router@latest

React Router é mantido pela Shopify.

Expo (para aplicações nativas)

Expo é um framework React que permite criar aplicações universais para Android, iOS, e web com interfaces verdadeiramente nativas. Ele fornece um SDK para React Native que torna as partes nativas mais fáceis de usar. Para criar um novo projeto Expo, execute:

Terminal

npx create-expo-app@latest

Se você é novo no Expo, confira o tutorial do Expo.

Expo é mantido pela Expo (a empresa). Construir aplicações com Expo é gratuito, e você pode enviá-las para as app stores do Google e Apple sem restrições. Expo também fornece serviços em nuvem pagos opcionais.

Outros frameworks

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

TanStack Start (Beta): TanStack Start é um framework React full-stack alimentado pelo TanStack Router. Ele fornece SSR de documento completo, streaming, funções de servidor, bundling, e mais usando ferramentas como Nitro e Vite.
RedwoodJS: Redwood é um framework React full-stack com muitos pacotes pré-instalados e configuração que torna fácil construir aplicações web full-stack.

Deep Dive

Quais funcionalidades compõem a visão de arquitetura full-stack da equipe React?

O bundler App Router do Next.js implementa completamente a especificação oficial dos React Server Components. Isso permite misturar componentes de build-time, apenas do servidor, e interativos em uma única árvore React.

Por exemplo, você pode escrever um componente React apenas do servidor como uma função async que lê de um banco de dados ou de um arquivo. Então você pode passar dados para baixo para seus componentes interativos:

// Este componente executa *apenas* no servidor (ou durante o build).
async function Talks({ confId }) {
  // 1. Você está no servidor, então pode conversar com sua camada de dados. Endpoint de API não é necessário.
  const talks = await db.Talks.findAll({ confId });

  // 2. Adicione qualquer quantidade de lógica de renderização. Isso não tornará seu bundle JavaScript maior.
  const videos = talks.map(talk => talk.video);

  // 3. Passe os dados para baixo para os componentes que executarão no navegador.
  return <SearchableVideoList videos={videos} />;
}

O App Router do Next.js também integra busca de dados com Suspense. Isso permite especificar um estado de carregamento (como um placeholder skeleton) para diferentes partes da sua interface de usuário diretamente na sua árvore React:

<Suspense fallback={<TalksLoading />}>
  <Talks confId={conf.id} />
</Suspense>

Server Components e Suspense são funcionalidades do React ao invés de funcionalidades do Next.js. No entanto, adotá-las no nível do framework requer buy-in e trabalho de implementação não trivial. No momento, o App Router do Next.js é a implementação mais completa. A equipe React está trabalhando com desenvolvedores de bundlers para tornar essas funcionalidades mais fáceis de implementar na próxima geração de frameworks.

Começar do Zero

Se sua aplicação tem restrições que não são bem atendidas pelos frameworks existentes, você prefere construir seu próprio framework, ou apenas quer aprender o básico de uma aplicação React, existem outras opções disponíveis para começar um projeto React do zero.

Começar do zero te dá mais flexibilidade, mas requer 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, ao invés de usar um framework que já existe. Os frameworks que recomendamos têm soluções integradas para esses problemas.

Se você quer construir suas próprias soluções, veja nosso guia para construir uma aplicação React do Zero para instruções sobre como configurar um novo projeto React começando com uma ferramenta de build como Vite, Parcel, ou RSbuild.

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

PreviousInstalação

NextCrie um App React do Zero