React文档（一）安装

React是一个灵活的可以用于各种不同项目的框架，你可以用它来写新应用，你也可以逐步将它引进已有的代码库而不用重写整个项目。

试用React

如果你想玩一玩React，那么就去CodePen上试一试。尝试一下Hello World的React例子。不需要安装任何东西，只是修改代码然后查看结果。

如果你更喜欢在本地编辑，那么你也可以下载此文件，修改它，然后在本地用浏览器打开。但是它会做一个很慢的运行时代码转换，所以不要像这样在产品中使用。

创建一个单页应用

创建React应用这个项目是一个最好的方式去学习如何创建一个新的单页应用。它设置好了开发环境所以你可以使用最新的js特性，它提供了很好的开发体验，最优化你的应用产品。

npm install -g create-react-app
create-react-app hello-world
cd hello-world
npm start

创建React应用不需要处理后台逻辑或者数据库，它只需要建立一个前端的创建管线，所以你可以和各种不同的后台语言配合。它在底层使用了webpack，Babel和ESLint等组件，并为你配置了它们。

添加React到已存在的应用

想要使用React你不需要重写你的应用。

我们建议添加React到应用中的一个小模块里，例如一个独立的小部件，那样你会发现在你的用例下它可以工作得很好。

虽然React不强制需要一个创建管线，但是建议创建一个那样你可以提高效率。一个最新的创建管线一般包括以下几点：

安装React

建议使用yarn或者npm包管理器来管理前端依赖的包。如果你没用过包管理器，那个到Tarn文档这个网站去学习相关知识。

使用Yarn安装React，运行以下命令：

yarn init
yarn add react react-dom

使用npm安装，运行以下命令：

npm init
npm install --save react react-dom

Yarn和npm都是从npm registry下载依赖包。

启用ES6和JSX

建议使用Babel来支持ES6和JS语法。ES6拥有js最新的特性，让开发更加简便，JSX是js语言的扩展，很好的兼容React。

Babel安装操作指南讲解了如何在各种不同的环境配置Babel。确保你已经安装了babel-parset-react和babel-preset-es2015并且让他们在Babel的配置项里正常工作。

使用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')
);

这段代码渲染了一个DOM元素插入了id名为root的元素里，所以你需要在你的页面里含有<div id="root"></div>。

同样的，你可以渲染一个React组件到一个DOM元素里通过引用其他js UI库。

开发和生产版本

一般默认情况下，React有很多有用的警告。这些警告在开发时有很大的帮助。但是，如果在生产环境下，它会让程序臃肿变慢，所以当你发布应用的时候确保使用生产版本。

创建React App

如果你使用Create React App项目，npm run build将会在build文件夹下创建你的应用。

webpack

通过这个指南可以了解DefinePlugin和UglifyJsPlugin插件在生产环境webpack设置中的作用。

Browserify

把NODE_ENV环境变量设置成production运行Browserify，使用UglifyJS将只在开发中使用的代码剥离出来。

Rollup

使用rollup-plugin-replace和rollup-plugin-commonjs插件来去除开发环境代码。

使用CDN

如果不想使用npm包管理器，那么可以使用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包同样可用。