React入门基础（学习笔记）
这篇博客是我通过阅读React官方文档的教程总结的学习笔记，翻译可能存在误差，如有疑问请参见http://reactjs.cn/react/docs/tutorial.html 。
一.所需文件
在编写react代码前需要在html文件中引入三个文件
我通过bower把react.js和react-dom.js下载在本地，这样在刷新浏览器时，浏览器加载会更快。第三个文件是react解码器，由于react用到的语法是jsx，浏览器是不能直接执行jsx语法的，要想你写的react代码在浏览器中运
行，就必须将jsx转换为js代码，第三个文件可以达到将jsx转换为js的目的，当然这并不是唯一一个将jsx转换为js的方法。你还可以使用创建工具gulp或者grunt来将jsx转化为jsx。
二.开始学习代码
1.编写第一个react程序
html文件的核心代码如下（html文件很简单）
<body>
<div id="contentOther"></div>
<script type="text/babel" src="index.js"></script>
</body>
html文件代码解释：
a:由于react并不是真正的js代码，所有script标签的type属性不能是text/js，而应该是text/babel
index.js的代码如下
index.js文件代码解释：
a:React.createClass()方法用于创建一个自定义组件，它接受一个对象作为参数
b:Content是一个自定义组件，在react中自定义组件必须以大写字母开头，dom自带的元素名以小写字母开头，如div，span等.
c:每个react组件可以拥有多个方法，其中最重要的方法是render方法，这个方法返回一个最终渲染到HTML中的组件树。render只能返回一个单一的组件，如果要返回多个组件，必须将将它们包裹到一个根组件里。
d:在react中有两种组件，分别为自定义组件（如：Content）和自带组件（如：div等），react可以为组件添加类，react为组件添加类使用的属性是className，在上述demo中为div组件添加了一个other的类
e:ReactDOM.render()方法用于实例化根组件，它接受两个参数，第一个参数是一个XML标签形式的组件名，它必须闭合，第二个参数是一个dom节点。意味着将指定的根组件渲染到指定的dom节点中。这个方法
必须放在组件定义之后。
二.using props
html文件的核心代码
<body>
<div id="list"></div>
<script type="text/babel" src="index.js"></script>
</body>
index.js文件的代码如下
index.js文件代码解释
a:jsx语法规定，表达式必须要在花括号中，语句不能放在花括号中，如if语句不能放在花括号中。
b:有两种为组件添加属性的方法：（1）
<Component name="li" age="12"/>
（2）
var props = {
name:"li",
age:"12"
};
<Component {...props}/>
可以将任何合法的数据类型添加到组建的属性，如函数，数组等
c:组件的所有数组都保存在组件的props对象中，通过this.props.propsName可以获得指定的属性值
三. state
html文件的代码如下
<body>
<div id="contentList"></div>
<script src="index.js" type="text/babel"></script>
</body>
index.js文件的代码如下
comments.json文件的内容如下：
[
{
"id": 1388534400000,
"author": "Pete Hunt",
"text": "Hey there!"
},
{
"id": 1420070400000,
"author": "Paul O’Shannessy",
"text": "React is great!"
}
]
index.js文件代码解释
a:在这个demo中用到了ajax请求,请求的操作是通过jQuery的$.getJSON()方法实现的，所有除了引入之前提到的那三个文件外，还要引入jquery。ajax请求的文件是comments.json，请求成功返回一个Json数据
b:自定义组件都有state，在组件中通过this.state.stateName可以取得指定的state，与props不同的是在一个组件内部可以改变自己的state，但是不能改变props，组件的props只能通过父组件去改变。
c:组件可以通过setState()去改变自己的state，当组件的state发生变化后会再次执行render函数，即重新渲染组件，
d:getInitialState()用来设置组件的初始state，在组件的生命周期只被执行一次，而且它会比render先执行
e:componentDidMount()是一个react组件首次被render后立即自动调用的方法。在这个demo中ContentList组件的初始state data是一个空数组，在组件ContentList第一次被render后会立即调用
componentDidMount()方法去修改组件的state，在修改了state后，组件会再次被render，但是组件再次被render之后就不会在调用componentDidMount()方法了。
f:在React中，组件有两种数据模型，分别是props和state，在react这篇官方文档中，详细的说明了props和state的区别，以及它们的应用场景。我看了这篇文章的结论是：在做交互性功能上才使用state，在
下面这三种情况下不要使用state：
（1）数据来自于父组件
（2）数据不会随时间改变
（3）数据可以基于其他state或props计算得到
四.event
html文件代码如下
<body>
<div id="content2"></div>
<script type="text/babel" src="index.js"></script>
</body>
js文件代码如下
index.js文件的解释
a：组件的event是作为props存在，event名采用驼峰命名.
b:在这个demo中实现的效果是：在输入框中输入内容，当点击OK按钮后，将输入的内容插入下方的无序列表。为了实现这个效果我创建了三个组件，分别为：ContentBox，
Form以及List，其中Form和List是ContentBox的子组件。由于父组件ContentBox需要从子组件Form得到输入的值，所以我给Form添加了一个名为onContentSubmit的props
这个onContentSubmit是一个回调函数。这个回调函数在From触发submit事件（即ok按钮被点击）后被调用。onContentSubmit
前面已经说过，组件的state改变，会使组件重新render。List的props item等于ContentBox的state data ，所以只要ContentBox重新render也会改变List的
props item改变。所以输入框输入的值可以插到无序列表中
关于event我还写了另位一个demo，在这里供大家参看，这个domo我就不做解释了，
html文件核心代码如下
<body>
<div id="content"></div>
<script type="text/babel" src="index.js"></script>
</body>
index.js文件核心代码如下
