Crie um novo React App

Use uma toolchain integrada para uma melhor experiência de usuário e desenvolvedor.

Esta página descreve algumas toolchains populares com React que ajudam em tarefas como:

• Escalar para muitos arquivos e componentes.
• Usar bibliotecas de terceiros através do npm.
• Detectar erros comuns cedo.
• Edição em tempo real de CSS e JS em desenvolvimento.
• Otimizar a saída para produção

As toolchains recomendadas nesta página não requerem configuração para começar.

Você Pode Não Precisar de Uma Toolchain

Se você não se depara com nenhum dos problemas descritos acima, ou se ainda não se sente confortável usando ferramentas JavaScript, considere simplesmente adicionar uma tag script numa página HTML, opcionalmente usando JSX.

Esta é a maneira mais fácil de integrar React a um site já existente. Você pode a qualquer momento adicionar à toolchain conforme achar útil.

Toolchains Recomendadas

A equipe React recomenda principalmente as seguintes soluções:

• Se você está aprendendo React ou criando um novo single-page app, use Create React App.
• Se você está fazendo um site renderizado no servidor (SSR) com Node.js, tente Next.js.
• Se você está fazendo um site estático orientado a conteúdo, experimente Gatsby.
• Se você está montando uma biblioteca de componentes ou integrando com um código-base existente, veja Toolchains Mais Flexíveis.

Create React App

Create React App é um ambiente confortável para aprender React, e é a melhor maneira de começar um single-page application em React.

Além de configurar seu ambiente de desenvolvimento para utilizar as funcionalidades mais recentes do JavaScript, ele fornece uma experiência de desenvolvimento agradável, e otimiza o seu app para produção. Será necessário ter Node >= 14.0.0 and npm >= 5.6 na sua máquina. Para criar um novo projeto, rode:

npx create-react-app my-app
cd my-app
npm start

Nota

npx na primeira linha não é erro de digitação — é um package runner que vem com npm 5.2+.

Create React App não lida com lógica de backend nem banco de dados. Ele apenas cria um build pipeline para o frontend, podendo portanto ser utilizado com qualquer backend de sua escolha. Por trás, Babel e Webpack estão sendo utilizados, mas não é necessário saber nada sobre eles.

Quando estiver pronto pra mandar pra produção, rode npm run build para criar e mandar o build otimizado de seu app para a pasta build. Você pode saber mais sobre o Create React App através de seu README e o Guia de Usuário.

Next.js

Next.js é um framework leve e popular para aplicações estáticas e renderizadas no servidor feito com React. Ele inclui soluções para estilização e roteamento prontas, e presume que esteja rodando Node.js como ambiente de servidor.

Aprenda Next.js através de seu guia oficial.

Gatsby

Gatsby é a melhor forma de criar sites estáticos usando React. Ele permite usar componentes React, porém produzindo HTML e CSS pré-renderizado para garantir a velocidade mais rápida possível de carregamento.

Aprenda Gatsby através de seu guia oficial e a galeria de starter kits.

Toolchains Mais Flexíveis

As seguintes toolchains oferecem mais flexibilidade e escolha. Nós as recomendamos para usuários mais experientes:

• Neutrino combina o poder do webpack com a simplicidade de presets, e inclui um preset para React apps e React components.
• Nx é um kit de ferramentas para o desenvolvimento de monorepo de stack completa, com suporte interno para o React, Next.js, Express, e mais.
• Parcel é um bundler de aplicativos web rápido e sem configuração que funciona com React.
• Razzle é um framework renderizado no servidor que não requer configuração, porém oferece mais flexibilidade que o Next.js.

Criando uma Toolchain do Zero

Uma build toolchain em JavaScript consiste tipicamente de:

• Um gerenciador de pacotes, como Yarn ou npm. Ele permite aproveitar de um vasto ecosistema de pacotes de terceiros, e facilmente instalar e atualizá-los.
• Um bundler, como webpack ou Parcel. Ele permite escrever código modular e empacotá-lo em pequenos pedaços para otimizar o tempo de carregamento.
• Um compilador como Babel. Ele nos permite escrever código JavaScript moderno que funcione até nos navegadores mais antigos.

Se você prefere criar a sua própria JavaScript toolchain do zero, dê uma olhada neste guia que recria algumas das funcionalidades do Create React App.

Não se esqueça de assegurar que sua toolchain customizada esteja corretamente configurada para produção.