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不强制需要一个创建管线，但是建议创建一个那样你可以提高效率。一个最新的创建管线一般包括以下几点：

• 一个包管理器，例如Yarn或者npm。它们可以让你利用大量的第三方包，然后很方便地安装和升级。
• 一个打包器，例如webpack或者Browserify。它们让你在开发的时候写模块化的代码然后在完成之后打包集合成更小的包来优化载入时间。
• 一个编译器，例如Babel。它能够让你使用js最新特效，而且兼容所有浏览器。

安装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库。