create react app

创建反应应用程序

创建无需构建配置的 React 应用程序。

• 创建应用程序 – 如何创建新应用程序。
• 用户指南 – 如何开发使用 Create React App 引导的应用程序。

Create React App 适用于 macOS、Windows 和 Linux。
如果某些功能不起作用，请提出问题。
如果您有疑问或需要帮助，请在 GitHub 讨论中提问。

快速概览

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

如果您之前通过npm install -g create-react-app create-react-app全局安装了 create-react-app ，我们建议您使用npm uninstall -g create-react-app或yarn global remove create-react-app卸载软件包，以确保npx 始终使用最新版本。

（npx 附带 npm 5.2+ 及更高版本，请参阅旧 npm 版本的说明）

然后打开 http://localhost:3000/ 查看您的应用程序。
当您准备好部署到生产环境时，请使用npm run build创建一个缩小的捆绑包。

立即开始

您不需要安装或配置 webpack 或 Babel 等工具。
它们是预先配置和隐藏的，以便您可以专注于代码。

创建一个项目，然后就可以开始了。

创建应用程序

您的本地开发计算机上需要有 Node 14.0.0 或更高版本（但服务器上不需要）。我们建议使用最新的 LTS 版本。您可以使用 nvm (macOS/Linux) 或 nvm-windows 在不同项目之间切换 Node 版本。

要创建新应用程序，您可以选择以下方法之一：

恩克斯

npx create-react-app my-app

（npx 是 npm 5.2+ 及更高版本附带的包运行工具，请参阅旧 npm 版本的说明）

新项目管理

npm init react-app my-app

npm init <initializer>在 npm 6+ 中可用

纱

yarn create react-app my-app

yarn create <starter-kit-package>在 Yarn 0.25+ 中可用

它将在当前文件夹中创建一个名为my-app目录。
在该目录中，它将生成初始项目结构并安装传递依赖项：

 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

没有配置或复杂的文件夹结构，只有构建应用程序所需的文件。
安装完成后，您可以打开项目文件夹：

 cd my-app

在新创建的项目中，您可以运行一些内置命令：

npm start或yarn start

在开发模式下运行应用程序。
在浏览器中打开http://localhost:3000即可查看。

如果您更改代码，页面将自动重新加载。
您将在控制台中看到构建错误和 lint 警告。

npm test或yarn test

以交互模式运行测试观察程序。
默认情况下，运行与上次提交以来更改的文件相关的测试。

阅读有关测试的更多信息。

npm run build或yarn build

将用于生产的应用程序构建到build文件夹。
它在生产模式下正确捆绑 React 并优化构建以获得最佳性能。

构建被缩小，文件名包含哈希值。

您的应用程序已准备好部署。

用户指南

您可以在其文档中找到有关使用 Create React App 的详细说明以及许多技巧。

如何更新到新版本？

有关此信息和其他信息，请参阅用户指南。

哲学

• 一种依赖项：只有一种构建依赖项。它使用 webpack、Babel、ESLint 和其他令人惊叹的项目，但在它们之上提供了有凝聚力的策划体验。

• 无需配置：您无需配置任何内容。我们将为您处理开发和生产构建的相当好的配置，以便您可以专注于编写代码。

• 无锁定：您可以随时“弹出”自定义设置。运行单个命令，所有配置和构建依赖项都将直接移至您的项目中，因此您可以从上次停下的地方继续。

包含什么？

您的环境将拥有构建现代单页 React 应用程序所需的一切：

• React、JSX、ES6、TypeScript 和 Flow 语法支持。
• ES6 之外的语言附加功能，例如对象扩展运算符。
• 自动添加 CSS 前缀，因此您不需要-webkit-或其他前缀。
• 快速交互式单元测试运行程序，内置对覆盖率报告的支持。
• 实时开发服务器，可警告常见错误。
• 一个构建脚本，用于捆绑 JS、CSS 和图像以进行生产，并带有哈希值和源映射。
• 离线优先的 Service Worker 和 Web 应用程序清单，满足所有渐进式 Web 应用程序标准。 （注意：从[email protected]及更高版本开始，可以选择使用服务工作者）
• 通过单一依赖即可轻松更新上述工具。

查看本指南，了解这些工具如何组合在一起的概述。

代价是这些工具被预先配置为以特定方式工作。如果您的项目需要更多自定义，您可以“弹出”并自定义它，但随后您将需要维护此配置。

流行的替代品

Create React App 非常适合：

• 在舒适且功能丰富的开发环境中学习 React 。
• 启动新的单页 React 应用程序。
• 使用 React 为您的库和组件创建示例。

以下是一些您可能想尝试其他方法的常见情况：

• 如果您想在没有数百个传递构建工具依赖项的情况下尝试 React ，请考虑使用单个 HTML 文件或在线沙箱。

• 如果您需要将 React 代码与 Rails、Django 或 Symfony 等服务器端模板框架集成，或者如果您不构建单页应用程序，请考虑使用更灵活的 nwb 或 Neutrino。特别是对于 Rails，您可以使用 Rails Webpacker。对于 Symfony，请尝试 Symfony 的 webpack Encore。

• 如果你需要发布一个React组件，nwb也可以做到这一点，还有Neutrino的react-components预设。

• 如果您想使用 React 和 Node.js 进行服务器渲染，请查看 Next.js 或 Razzle。 Create React App 与后端无关，并且仅生成静态 HTML/JS/CSS 包。

• 如果您的网站大部分是静态的（例如，作品集或博客），请考​​虑使用 Gatsby 或 Next.js。与 Create React App 不同，Gatsby 在构建时将网站预渲染为 HTML。 Next.js 同时支持服务器渲染和预渲染。

• 最后，如果您需要更多自定义，请查看 Neutrino 及其 React 预设。

上述所有工具都可以在很少或没有配置的情况下工作。

如果您更喜欢自己配置构建，请遵循本指南。

反应本机

正在寻找类似的东西，但针对 React Native？
查看 Expo CLI。

贡献

我们很乐意在create-react-app上得到您的帮助！有关我们正在寻找的内容以及如何开始的更多信息，请参阅 CONTRIBUTING.md。

支持创建 React App

Create React App 是一个社区维护的项目，所有贡献者都是志愿者。如果您想支持 Create React App 的未来开发，请考虑向我们的 Open Collective 捐款。

制作人员

这个项目的存在要感谢所有做出贡献的人。

感谢 Netlify 托管我们的文档。

致谢

我们感谢现有相关项目的作者的想法和合作：

• @eanplatter
• @insin
• @mxstbr

执照

Create React App 是获得 MIT 许可的开源软件。 Create React App 徽标已获得 Creative Commons Attribution 4.0 International 许可证的许可。