02. getting-started.md【create-react-app】

id: getting-started
title: Getting Started

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

Create React App是React官方支持的，用来创建React单页应用的脚手架；提供零配置、现代化构建的解决方案。

Quick Start

快速上手

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

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 to ensure that npx always uses the latest version.

如果之前通过 npm install -g create-react-app 全局安装过 create-react-app ，我们建议你使用 npm uninstall -g create-react-app 卸载已安装的包，以此保证使用最新版的 npx。

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

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

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

然后，在浏览器中打开 http://localhost:3000/ 就可以看到页面效果。

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

当需要发布到生产环境时，可以在项目根目录运行打包命令 npm run build.

cmd.jpg

Get Started Immediately

立即开始

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.

无需安装或配置如Webpack、Babel，这些都已经预先配置并隐藏在脚手架中，因此你可以专注在业务逻辑上。

Just create a project, and you’re good to go.

你所需要做的，仅仅是创建一个项目，然后就可以了。

Creating an App

创建 App

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

在你的电脑上需要安装 Node >= 8.10 (但是发布的服务器上是不需要的)。也可以使用 nvm (macOS/Linux) 或 nvm-windows 来在不同的项目间切换不同的 Node 版本。

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

可以使用以下几种方式创建App：

npx

npx create-react-app my-app

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

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

npm

npm init react-app my-app

npm init <initializer> is available in npm 6+

npm init <initializer> 需要 npm 6+

Yarn

yarn create react-app my-app

yarn create is available in Yarn 0.25+

yarn create 需要 Yarn 0.25+

Creating a TypeScript app

创建基于 TypeScript 的应用

Follow our Adding TypeScript documentation to create a TypeScript app.

请参考这篇文档： Adding TypeScript 。

Output

输出（项目结构）

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 的目录，并在该目录中生成初始的项目结构，并安装需要的依赖：

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── serviceWorker.js

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

目录中没有相关的配置文件，项目结构也很简单，只有一些构成应用的必需文件；安装完成后，可以进入到目录中查看：

cd my-app

Scripts

可用的命令（npm run xxx）

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

在新创建的项目中，可以运行以下命令：

`npm start` or `yarn start`

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

这是在开发模式中启动了应用，使用浏览器打开 http://localhost:3000 来查看渲染效果。

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

如果你更改了文件中的代码，浏览器会自动刷新页面，并且会在Console中输出一些如错误、代码检查等信息；

lint.png

`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.

运行交互式的测试程序；默认情况下，只会测试已修改了的文件。

`npm run build` or `yarn build`

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

打包生产环境需要的文件到 build 目录下；这会正确的打包生产环境中的 React 应用，并优化以达到最佳的性能。

The build is minified and the filenames include the hashes.

打包生成的文件是被压缩的，并且文件名带有特定的哈希值。

Your app is ready to be deployed.

接下来，可以将 build 目录中的文件部署到服务器（生产环境）中了。