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 vianpm install -g create-react-app
, we recommend you uninstall the package usingnpm uninstall -g create-react-app
to ensure thatnpx
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
.
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
is available in npm 6+
npm init
需要 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中输出一些如错误、代码检查等信息;
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
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
目录中的文件部署到服务器(生产环境)中了。