1、什么是React？
React是一个用于构建用户界面的JavaScript库。主要用于构建UI，很多人认为Reatc是MVC中的V（视图）。
React起源于Facebook的内部项目，用来架构Instrgram的网站（ins，一款图片分享的社交软件），并与2013年5月份开源。
React拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。
2、React的特点？
（1）声明式设计
（2）高效：通过对DOM的模拟，最大限度的减少与DOM的交互。
（3）灵活：可以与已知的框架或库很好的配合。
（4）JSX：是js语法的扩展，不一定使用，但建议用。
（5）组件：构建组件，使代码更容易得到复用，能够很好地应用在大项目的开发中。
（6）单向响应的数据流：React实现了单向响应的数据流，从而减少了重复代码，这也是解释了它为什么比传统数据绑定更简单。
3、React的html的必备模板
<!DOCTYPE html>
<html>
<head>
<script src="react.js"></script>
<script src="react-dom.js"></script>
<script src="browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
// ** Our code goes here! **
</script>
</body>
</html>
(1) script 标签的 type 属性为 text/babel 。因为 React 独有的 JSX 语法，跟 JavaScript 不兼容。
凡是使用 JSX 的地方，都要加上 type="text/babel" 。
(2) 三个库： react.min.js 、react-dom.min.js 和 Browser.min.js ，它们必须首先加载。
react.js 是 React 的核心库，react-dom.js 是提供与 DOM 相关的功能，
Browser.js 的作用是将 JSX 语法转为 JavaScript 语法，这一步很消耗时间，实际上线的时候，应该将它放到服务器完成。
4、React JSX 的优点以及常见用法
React使用JSX来代替常规的javascript语法，看起来很像xml的javascript的语法扩展。
JSX优点:（1）JSX执行更快，因为它对编译js代码进行了优化（2）它是类型安全的，在编译过程中就能发现错误（3）使用jsx编译模板更加简洁快速。
使用JSX：
（1）代码中嵌套多个html标签，需要使用一个div元素包裹它们，实例中的p标签使用了自定义属性：data-前缀 。
ReactDOM.render(
<div>
<h1>菜鸟教程</h1>
<h2>欢迎学习 React</h2>
<p data-myattribute = "somevalue">这是一个很不错的 JavaScript 库!</p>
</div> ,
document.getElementById('example')
)；
（2）JSX表达式
ReactDOM.render(
<h1>{1+1*4}</h1>,
document.getElementById('example')
)；
（3）样式
React 推荐使用内联样式。我们可以使用 camelCase 语法（骆驼命名法，除第一个单词外的其他首字母大写）来设置内联样式.
React 会在指定元素数字后自动添加 px 。
var myStyle = {
fontSize: 100,
color: '#F00'
};
ReactDOM.render(
<h1 style = {myStyle}>菜鸟教程</h1>,
document.getElementById('example')
);
（4）注释
注释需要写在花括号中:(外加div包裹)
ReactDOM.render(
<div>
<h1>菜鸟教程</h1>
{/*注释...*/}
</div>,
document.getElementById('example')
);
（5）数组
JSX 允许在模板中插入数组，数组会自动展开所有成员：
var arr = [
<h1>菜鸟教程</h1>,
<h2>学的不仅是技术，更是梦想！</h2>
];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById('example')
);
（6）HTML 标签 vs React 组件
React 可以渲染 HTML 标签 (strings) 或 React 组件 (classes)。
要渲染 HTML 标签，只需在 JSX 里使用小写字母的标签名。
var myDivElement = <div className="foo" />;
ReactDOM.render(myDivElement, document.getElementById('example'));
要渲染 React 组件，只需创建一个大写字母开头的本地变量。
var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent someProperty={true} />;
ReactDOM.render(myElement, document.getElementById('example'));
React 的 JSX 使用大、小写的约定来区分本地组件的类和 HTML 标签。
由于JSX 就是JavaScript，一些标识符像class和for不建议作为 XML 属性名。作为替代，ReactDOM使用className和htmlFor来做对应的属性。
5、React State(状态)
React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。
React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。
以下实例中创建了 LikeButton 组件，getInitialState 方法用于定义初始状态，也就是一个对象，这个对象可以通过 this.state 属性读取。
当用户点击组件，导致状态变化，this.setState 方法就修改状态值，每次修改以后，自动调用 this.render 方法，再次渲染组件。
参考文献：
阮一峰React入门实例教程 http://www.ruanyifeng.com/blog/2015/03/react.html
React解决了前端开发中的哪些痛点？ https://www.zhihu.com/question/39825457?sort=created
React.js 初学者应该知道的9件事 http://www.oschina.net/news/75530/9-things-every-reactjs-beginner-should-know