跳到主要内容

开始

Create React App 是由官方维护的创建 React 单页面应用的工具。它提供了一种无需配置的现代构建方案。

快速开始​

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

如果你此前已经通过执行 npm install -g create-react-app 全局安装了 create-react-app，我们建议你执行 npm uninstall -g create-react-app 将它卸载掉，目的是确保 npx 总是使用最新版本的 create-react-app。

(npx 需要 npm 5.2+ 以及更高版本，请参阅 instructions for older npm versions)

然后打开 http://localhost:3000/ 可以看到你的应用。

当你准备好部署到生产环境，执行 npm run build 创建一个被压缩的 bundle。

npm start

直接开始​

你不需要安装或配置像 Webpack 或 Babel 那样的工具。它们是被预先配置和隐藏起来，以便你可以专注于代码。

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

创建应用​

你需要在你的本地开发机器上有 Node>=8.10 (但是这在服务器上是不要求的)。你可以采用 nvm（macOS/Linux）或 nvm-windows，来实现在不同项目之间 Node 版本的切换。

如需创建新应用，你可以在下面方法中任选其一：

npx​

npx create-react-app my-app

(npx 需要 npm 5.2+ 以及更高版本， 参阅 instructions for older npm versions)

npm​

npm init react-app my-app

npm init <initializer> 命令在 npm 6+ 版本可用

Yarn​

yarn create react-app my-app

yarn create 命令在 Yarn 0.25+ 版本可用

选择模板​

当然，你也可以在创建命令后添加 --template [template-name]，使用自定义模板创建新应用。

如果你不选择模板，我们将使用默认模板创建你的项目。

模板总是以 cra-template-[template-name] 格式命名，但你只需要给创建应用命令提供 [template-name] 。

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

通过在 npm 上搜索 "cra-template-*" ，你可以找到一系列可用的模板。

创建 TypeScript 应用​

你可以通过模板新建一个 TypeScript 应用。如需使用我们提供的 TypeScript 模板，只需在创建命令后加上 --template typescript 即可。

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

如果你希望在已有项目中引入 TypeScript, 请参阅我们的文档 Adding TypeScript 。

选择包管理器​

当你创建新应用，CLI 将使用 Yarn 安装依赖项（如果可以用）。如果你已经安装了 Yarn，但希望使用 npm，你可以把 --use-npm 附加到创建应用命令之后。例如：

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

输出​

运行上述命令会在当前文件夹中创建一个名为 my-app 的目录。在该目录中，将会生成初始项目结构，并且安装传递依赖项：

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

没有配置或复杂的文件夹结构，只有你构建应用所需要的文件。安装完成后，你可以执行以下命令打开你的项目目录：

cd my-app

脚本​

在新创建的项目里，你可以执行一些内置命令：

npm start or yarn start​

以开发模式运行应用。在浏览器中打开 http://localhost:3000 查看它。

如果你对代码中做一些更改，页面将会自动重新加载。你可以在控制台中看到构建错误和 lint 警告。

Build errors

npm test or yarn test​

在可交互监听模式中启用 test runner，默认情况下，对上次提交后更改的文件进行相关测试。

了解关于测试的更多内容。

npm run build or yarn build​

在 build 文件夹中构建适用于生产环境的应用，它可在生产环境下正确打包 React，并对其进行性能优化以提升执行效率。

构建中进行了压缩，且文件名包含hash。

你的应用已经准备好，可以部署了。