Skip to main content

新手入门

Create React App 是官方支持的创建单页 React 应用的方法。它提供了一个没有配置的现代构建设置。

¥Create React App is an officially supported way to create single-page React applications. It offers a modern build setup with no configuration.

快速开始​

¥Quick Start

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 始终使用最新版本。

¥If you've previously installed create-react-app globally via npm install -g create-react-app, we recommend you uninstall the package using npm uninstall -g create-react-app or yarn global remove create-react-app to ensure that npx always uses the latest version.

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

¥(npx comes with npm 5.2+ and higher, see instructions for older npm versions)

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

¥Then open http://localhost:3000/ to see your app.

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

¥When you’re ready to deploy to production, create a minified bundle with npm run build.

npm start

立即开始​

¥Get Started Immediately

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

¥You don’t need to install or configure tools like webpack or Babel. They are preconfigured and hidden so that you can focus on the code.

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

¥Create a project, and you’re good to go.

创建应用​

¥Creating an App

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

¥You’ll need to have Node >= 14 on your local development machine (but it’s not required on the server). You can use nvm (macOS/Linux) or nvm-windows to switch Node versions between different projects.

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

¥To create a new app, you may choose one of the following methods:

npx​

npx create-react-app@latest my-app

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

¥(npx comes with npm 5.2+ and higher, see instructions for older npm versions)

npm​

npm init react-app my-app

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

¥npm init <initializer> is available in npm 6+

Yarn​

yarn create react-app my-app

yarn create 适用于 Yarn 0.25+

¥yarn create is available in Yarn 0.25+

选择模板​

¥Selecting a template

你现在可以选择通过将 --template [template-name] 附加到创建命令来从模板启动新应用。

¥You can now optionally start a new app from a template by appending --template [template-name] to the creation command.

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

¥If you don't select a template, we'll create your project with our base template.

模板始终以 cra-template-[template-name] 格式命名，但是你只需将 [template-name] 提供给创建命令即可。

¥Templates are always named in the format cra-template-[template-name], however you only need to provide the [template-name] to the creation command.

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

你可以通过在 npm 上搜索 "cra-模板-*" 来找到可用模板的列表。

¥You can find a list of available templates by searching for "cra-template-*" on npm.

我们的 自定义模板 文档描述了如何构建你自己的模板。

¥Our Custom Templates documentation describes how you can build your own template.

创建 TypeScript 应用​

¥Creating a TypeScript app

你可以使用模板启动一个新的 TypeScript 应用。要使用我们提供的 TypeScript 模板，请将 --template typescript 附加到创建命令。

¥You can start a new TypeScript app using templates. To use our provided TypeScript template, append --template typescript to the creation command.

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

如果你已经有一个项目并想添加 TypeScript，请参阅我们的 添加 TypeScript 文档。

¥If you already have a project and would like to add TypeScript, see our Adding TypeScript documentation.

选择包管理器​

¥Selecting a package manager

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

¥When you create a new app, the CLI will use npm or Yarn to install dependencies, depending on which tool you use to run create-react-app. For example:

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

输出​

¥Output

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

¥Running any of these commands will create a directory called my-app inside the current folder. Inside that directory, it will generate the initial project structure and install the transitive dependencies:

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

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

¥No configuration or complicated folder structures, only the files you need to build your app. Once the installation is done, you can open your project folder:

cd my-app

脚本​

¥Scripts

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

¥Inside the newly created project, you can run some built-in commands:

npm start 或 yarn start​

¥npm start or yarn start

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

¥Runs the app in development mode. Open http://localhost:3000 to view it in the browser.

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

¥The page will automatically reload if you make changes to the code. You will see the build errors and lint warnings in the console.

Build errors

npm test 或 yarn test​

¥npm test or yarn test

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

¥Runs the test watcher in an interactive mode. By default, runs tests related to files changed since the last commit.

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

¥Read more about testing.

npm run build 或 yarn build​

¥npm run build or yarn build

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

¥Builds the app for production to the build folder. It correctly bundles React in production mode and optimizes the build for the best performance.

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

¥The build is minified and the filenames include the hashes.

你的应用已准备好部署。

¥Your app is ready to be deployed.