Skip to main content

新手入门

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 或 yarn global remove create-react-app 卸载软件包，以确保 npx 始终使用最新版本。

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

然后打开 http://localhost:3000/ 以查看你的应用程序。

当你准备好部署到生产环境时，使用 npm run build 创建一个缩小的包。

npm start

立即开始​

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

创建一个项目，一切顺利。

创建应用程序​

你需要在本地开发机器上安装 Node >= 14（但在服务器上不需要）。 你可以使用 nvm (macOS/Linux) 或 nvm-windows 在不同项目之间切换 Node 版本。

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

npx​

npx create-react-app@latest my-app

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

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，请参阅我们的 添加 TypeScript 文档。

选择包管理器​

当你创建一个新的应用程序时，CLI 将使用 npm 或 Yarn 来安装依赖项，具体取决于你使用哪种工具来运行 create-react-app。 例如：

# Run this to use npm
npx create-react-app my-app
# Or run this to use yarn
yarn create react-app my-app

输出​

运行这些命令中的任何一个都会在当前文件夹中创建一个名为 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
    └── setupTests.js

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

cd my-app

脚本​

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

npm start 或 yarn start​

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

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

Build errors

npm test 或 yarn test​

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

阅读更多关于测试的信息.

npm run build 或 yarn build​

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

构建被缩小并且文件名包含哈希。

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