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-appyarn 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 将使用 npmYarn 来安装依赖项,具体取决于你使用哪种工具来运行 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 startyarn start

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

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

Build errors

npm testyarn test

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

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

npm run buildyarn build

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

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

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