create react app
v5.0.1
Crie aplicativos React sem configuração de compilação.
Criar React App funciona em macOS, Windows e Linux.
Se algo não funcionar, registre um problema.
Se você tiver dúvidas ou precisar de ajuda, pergunte nas discussões do GitHub.
npx create-react-app my-app
cd my-app
npm start Se você já instalou 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 remove create-react-app para garantir esse npx sempre usa a versão mais recente.
(o npx vem com o npm 5.2+ e superior, consulte as instruções para versões mais antigas do npm)
Em seguida, abra http://localhost:3000/ para ver seu aplicativo.
Quando estiver pronto para implantar na produção, crie um pacote reduzido com npm run build .
Você não precisa instalar ou configurar ferramentas como webpack ou Babel.
Eles são pré-configurados e ocultos para que você possa se concentrar no código.
Crie um projeto e pronto.
Você precisará ter o Node 14.0.0 ou versão posterior em sua máquina de desenvolvimento local (mas não é obrigatório no servidor). Recomendamos usar a versão LTS mais recente. Você pode usar nvm (macOS/Linux) ou nvm-windows para alternar versões do Node entre diferentes projetos.
Para criar um novo aplicativo, você pode escolher um dos seguintes métodos:
npx create-react-app my-app(npx é uma ferramenta de execução de pacotes que vem com o npm 5.2+ e superior, consulte as instruções para versões mais antigas do npm)
npm init react-app my-app npm init <initializer> está disponível no npm 6+
yarn create react-app my-app yarn create <starter-kit-package> está disponível no Yarn 0.25+
Ele criará um diretório chamado my-app dentro da pasta atual.
Dentro desse diretório, 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
│ └── manifest.json
└── src
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
├── logo.svg
└── serviceWorker.js
└── setupTests.js
Nenhuma configuração ou estruturas de pastas complicadas, apenas os arquivos necessários para construir seu aplicativo.
Assim que a instalação estiver concluída, você pode abrir a pasta do seu projeto:
cd my-appDentro 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.
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 Cria o aplicativo para produção na pasta build .
Ele agrupa corretamente o React no modo de produção e otimiza a construção para obter o melhor desempenho.
A compilação é reduzida e os nomes dos arquivos incluem os hashes.
Seu aplicativo está pronto para ser implantado.
Você pode encontrar instruções detalhadas sobre como usar o aplicativo Create React e muitas dicas em sua documentação.
Consulte o Guia do usuário para obter esta e outras informações.
Uma Dependência: Existe apenas uma dependência de construção. Ele usa webpack, Babel, ESLint e outros projetos incríveis, mas fornece uma experiência de curadoria coesa sobre eles.
Nenhuma configuração necessária: você não precisa configurar nada. Uma configuração razoavelmente boa de compilações de desenvolvimento e produção é feita para que você possa se concentrar na escrita do código.
Sem bloqueio: você pode “ejetar” para uma configuração personalizada a qualquer momento. Execute um único comando e todas as dependências de configuração e construção serão movidas diretamente para o seu projeto, para que você possa continuar de onde parou.
Seu ambiente terá tudo que você precisa para construir um aplicativo React moderno de página única:
-webkit- ou outros prefixos.[email protected] e superior )Confira este guia para uma visão geral de como essas ferramentas se encaixam.
A desvantagem é que essas ferramentas são pré-configuradas para funcionar de uma maneira específica . Caso seu projeto precise de mais customização, você pode “ejetá-lo” e customizá-lo, mas depois será necessário manter essa configuração.
O aplicativo Create React é ideal para:
Aqui estão alguns casos comuns em que você pode querer tentar outra coisa:
Se você quiser experimentar o React sem centenas de dependências transitivas de ferramentas de construção, considere usar um único arquivo HTML ou uma sandbox online.
Se você precisar integrar o código React com uma estrutura de modelo do lado do servidor como Rails, Django ou Symfony, ou se não estiver construindo um aplicativo de página única , considere usar nwb ou Neutrino, que são mais flexíveis. Especificamente para Rails, você pode usar Rails Webpacker. Para Symfony, experimente o webpack Encore do Symfony.
Se você precisar publicar um componente React , o nwb também pode fazer isso, assim como a predefinição de componentes de reação do Neutrino.
Se você deseja renderizar o servidor com React e Node.js, verifique Next.js ou Razzle. Create React App é independente do back-end e produz apenas pacotes HTML/JS/CSS estáticos.
Se o seu site for quase todo estático (por exemplo, um portfólio ou um blog), considere usar Gatsby ou Next.js. Ao contrário do Create React App, Gatsby pré-renderiza o site em HTML no momento da construção. Next.js suporta renderização e pré-renderização de servidor.
Finalmente, se você precisar de mais personalização , dê uma olhada no Neutrino e sua predefinição React.
Todas as ferramentas acima podem funcionar com pouca ou nenhuma configuração.
Se você preferir configurar a compilação sozinho, siga este guia.
Procurando algo semelhante, mas para React Native?
Confira a Expo CLI.
Adoraríamos ter sua ajuda no create-react-app ! Consulte CONTRIBUTING.md para obter mais informações sobre o que procuramos e como começar.
Create React App é um projeto mantido pela comunidade e todos os colaboradores são voluntários. Se você gostaria de apoiar o desenvolvimento futuro do aplicativo Create React, considere fazer uma doação para nosso Open Collective.
Este projeto existe graças a todas as pessoas que contribuem.
Obrigado ao Netlify por hospedar nossa documentação.
Somos gratos aos autores de projetos relacionados existentes por suas ideias e colaboração:
Create React App é um software de código aberto licenciado como MIT. O logotipo Create React App está licenciado sob uma licença Creative Commons Attribution 4.0 International.
