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.

快速开始

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 版本的说明

英:(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

立即开始

需要安装或配置 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.

创建应用

你需要在本地开发机器上安装 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+

选择模板

你现在可以选择通过将 --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-template-*" 来找到可用模板的列表。

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

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

创建 TypeScript 应用

你可以使用模板启动一个新的 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.

选择包管理器

当你创建一个新的应用时,CLI 将使用 npmYarn 来安装依赖,具体取决于你使用哪种工具来运行 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

输出

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

脚本

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

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

npm startyarn 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 testyarn 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 buildyarn 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.