Começando

Create React App é a forma oficialmente suportada de criar aplicativos React de página única (SPA's). Ele oferece uma configuração de construção moderna sem nenhuma configuração.

Começo rápido

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

Se você instalou anteriormente create-react-app globalmente via npm install -g create-react-app, recomendamos que você desinstale o pacote usando npm uninstall -g create-react-app ou yarn global remova create-react-app para garantir que npx sempre use a versão mais recente.

(npx vem com npm 5.2+ e superior, consulte instruções para versões anteriores de npm)

Em seguida, abra http://localhost:3000/ para ver seu aplicativo.

Quando estiver pronto para implantar na produção, crie um pacote minimizado com npm run build.

npm start

Comece imediatamente

Você não precisa instalar ou configurar ferramentas como webpack ou Babel. Eles são pré-configurados e ocultados para que você possa se concentrar no código.

Crie um projeto e está pronto para começar.

Criando um aplicativo

Você precisará ter Node >= 10 em sua máquina de desenvolvimento local (mas não é obrigatório no servidor). Você pode usar nvm (macOS / Linux) ou nvm-windows para alternar as versões do Node entre diferentes projetos.

Para criar um novo aplicativo, você pode escolher um dos seguintes métodos:

npx

npx create-react-app my-app

(npx comes with npm 5.2+ and higher, see instructions for older npm versions)

npm

npm init react-app my-app

npm init <initializer> is available in npm 6+

Yarn

yarn create react-app my-app

yarn create está disponível no Yarn 0.25+

Selecionando um template

Agora você pode opcionalmente iniciar um novo aplicativo a partir de um modelo anexando --template [template-name] ao comando de criação.

Se você não selecionar um modelo, criaremos seu projeto com nosso modelo base.

Os modelos são sempre nomeados no formato cra-template-[template-name], entretanto você só precisa fornecer o [template-name] para o comando de criação.

npx create-react-app my-app --template [template-name]

Você pode encontrar uma lista de modelos disponíveis procurando por "cra-template-*" no npm.

Nossa documentação Templates Customizados descreve como você pode construir seu próprio template.

Criando um aplicativo TypeScript

Você pode iniciar um novo aplicativo TypeScript usando modelos. Para usar nosso template TypeScript, acrescente --template typescript ao comando de criação.

npx create-react-app my-app --template typescript

Se você já tem um projeto e gostaria de adicionar TypeScript, consulte nossa documentação Adicionando TypeScript.

Selecionando um package manager

Quando você cria um novo aplicativo, a CLI usará Yarn para instalar dependências (quando disponíveis). Se você tem o Yarn instalado, mas prefere usar o npm, você pode adicionar --use-npm ao comando de criação. Por exemplo:

npx create-react-app my-app --use-npm

Resultado

Executar qualquer um desses comandos criará um diretório chamado my-app dentro da pasta atual. Dentro desse diretório, ele irá gerar a estrutura inicial do projeto e instalar as dependências transitivas:

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│ ├── favicon.ico
│ ├── index.html
│ ├── logo192.png
│ ├── logo512.png
│ ├── manifest.json
│ └── robots.txt
└── src
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
├── logo.svg
├── serviceWorker.js
└── setupTests.js

Nenhuma configuração ou estruturas de pasta complicadas, apenas os arquivos de que você precisa para construir seu aplicativo. Assim que a instalação for concluída, você pode abrir a pasta do projeto:

cd my-app

Scripts

Dentro do projeto recém-criado, você pode executar alguns comandos integrados:

npm start ou yarn start

Executa o aplicativo em modo de desenvolvimento. Abra http://localhost:3000 para visualizá-lo no navegador.

A página será recarregada automaticamente se você fizer alterações no código. Você verá os erros de compilação e avisos de lint no console.

Build errors

npm test ou yarn test

Executa o inspetor de teste em modo interativo. Por padrão, executa testes relacionados aos arquivos alterados desde o último commit.

Leia mais sobre testes.

npm run build ou yarn build

Compila o aplicativo para produção na pasta build. Ele agrupa corretamente o React no modo de produção e otimiza a construção para o melhor desempenho.

A compilação é reduzida e os nomes dos arquivos incluem os hashes.

Seu aplicativo está pronto para ser implantado.

Last updated on by Fernando Belotto