# 安装
React 是灵活的，可以广泛的应用在项目中。你可以创建新的应用，但是也可以逐步引入它到一个已有的代码库中，而不是重写。
## 尝试 React
如果你只是感兴趣尝试一下 React，可以使用 CodePen。从这个[ Hello World 示例代码](http://codepen.io/gaearon/pen/rrpgNB?editors=0010) 开始。并不需要安装什么；只需要修改代码并查看它们如何工作。
如果你希望使用自己的文本编辑器，也可以下载这个[ HTML 文件](https://facebook.github.io/react/downloads/single-file-example.html)，编辑它，并从一个本地文件系统中用浏览器打开它。这会进行一个缓慢的运行时代码转换，所以不要在产品中使用它。
## 创建一个单页应用
[Create React App](http://github.com/facebookincubator/create-react-app) 是最好的方式来构建一个新的 React 单页应用。它设置你的开发环境，所以你可以使用最新的 JavaScript 特性，提供一个更好的开发体验，并对产品化来优化你的 app 。
~~~
npm install -g create-react-app
create-react-app hello-world
cd hello-world
npm start
~~~
创建 React App 并不处理后台逻辑或者数据库；它只会创建一个前端流水线，所以你可以配合任何你想要的后台技术使用。它在底层使用了 [webpack](https://webpack.js.org/)、[Babel](http://babeljs.io/) 和 [ESLint](http://eslint.org/)，但是会为你配置它们。
## 增加 React 到已有应用
开始使用 React，你并不需要重写已有应用。
我们建议添加 React 到应用中的一个小部分，比如一个独立的 widget，所以你可以看到它在你的用例中是否正常运行。
虽然 React 可以不经过一个构建流水线来使用（[参考](https://facebook.github.io/react/docs/react-without-es6.html)），但是我们建议设置它可以更具生产力。一个典型的现代构建流水线包括：
一个包管理器，比如 [Yarn](https://yarnpkg.com/) 或者 [npm](https://www.npmjs.com/) 。它可以使你从一个广泛的第三方包的生态系统中获益，而且简便的安装或者更新它们。
一个打包机，比如 [webpack](https://webpack.github.io/) 或者 [Browserify](http://browserify.org/) 。它使你编写模块化代码，并包装进小的包来优化加载时间。
一个编译器，比如 [Babel](http://babeljs.io/) 。它使你在老旧的浏览器中仍然可以编写现代的 JavaScript 代码。
### 安装 React
我们建议使用 Yarn 或者 npm 来管理前端依赖。如果你刚接触包管理器，[Yarn 文档](https://yarnpkg.com/en/docs/getting-started)是一个了解它的好去处。
使用 Yarn 安装 React ，运行：
~~~
yarn add react react-dom
~~~
使用 npm 安装 React，运行：
~~~
npm install --save react react-dom
~~~
Yarn 和 npm 都从 [npm 仓库](http://npmjs.com/)下载包。
### 启用 ES6 和 JSX
我们建议使用 Babel 来在 React 中使用 ES6 和 JSX 的 JavaScript 语法。 ES6 是一系列的现代 JavaScript 特性，简化开发；JSX是一个 JavaScript 语言的扩展，和 React 配合默契。
[Babel 设置说明](https://babeljs.io/docs/setup/)解释了在许多不同的构建环境中如何配置 Babel。确保你安装了[ babel-preset-react](http://babeljs.io/docs/plugins/preset-react/#basic-setup-with-the-cli-) 和 [babel-preset-es2015](http://babeljs.io/docs/plugins/preset-es2015/#basic-setup-with-the-cli-)，并在你的 [.babelrc 配置](http://babeljs.io/docs/usage/babelrc/)中启用它们。
### 使用 ES6 和 JSX 的 Hello World
建议使用一个打包机如 webpack 或者 Browserify，你可以编写模块化的代码并包装进小的包中来优化加载事件。
最小化的 React 实例看起来如下：
~~~
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
~~~
这个代码渲染到一个 id 为 root 的 DOM 元素，所以你需要在 HTML 文件中放置一个 `<div id="root"></div>` 。
同样，你可以渲染一个 React 组件到现有使用其它 JavaScript UI 库编写的 app 中的一个 DOM 元素中。
### 开发版和产品版
默认，React 包括了许多有用的警告信息。这些警告信息在开发中非常有用。然而，它们会拖慢 React，所以当你部署 app 的时候应该确保使用产品化版本。
**创建 React App**
如果你使用 [ Create React App](https://github.com/facebookincubator/create-react-app)， `npm run build` 将创建一个优化构建的应用，保存到 build 目录中。
**webpack**
包括了 DefinePlugin 和 UglifyJsPlugin 到你的产品 Webpack 配置中，如[指南](https://webpack.js.org/guides/production-build/)中所描述的。
**Browserify**
使用 NODE_ENV 环境变量设置为 production 来运行 Browserify，并使用 [UglifyJs](https://github.com/mishoo/UglifyJS) 作为最后的构建步骤，然后开发相关代码会被剥去。
### 使用 CDN
如果你不想使用 npm 来管理客户端包， react 和 react-dom npm 包也提供了单独文件的版本，在 dist 目录中，它们托管在 一个 CDN 中：
~~~
<script src="https://unpkg.com/react@15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
~~~
上面的版本只用于开发，并不适合产品化。压缩优化的产品化版本也是可用的：
~~~
<script src="https://unpkg.com/react@15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
~~~
要加载特定版本的 react 和 react-dom，替换版本号中的 15 即可。
如果你使用浏览器，React 通过 react 包使用。
