本篇文章摘自极客标签忠实用户Soul的个人博客，转载请标明。博客地址：emufan.com
初识
这段代码中，首先我们可以看到React定义组件的方式 是用一个函数来创建的，其中传递的是个对象字面量。
在对象字面量中，最重要的一个属性就是render，它返回了需要渲染的组件，并且是需要用一个函数来包裹返回的。
JSX
因为是JSX语法,那么可以在JSX中使用HTML语法了，这里有一篇JSX语法教程：
自定义出的组件标签名，React 的 JSX 里约定分别使用首字母大、小写来区分本地组件的类和 HTML 标签。render渲染时，会把大写的组件名定义为自定义组件，把小写的组件名定义为HTML自带的标签名进行渲染。
获值
我们在reder中写了一个｛this.props.name｝，那么我们在渲染的时候写上了一个 name=“World”，然后输出的是 hello world，那么很明显 this.props指向的就是这个虚拟的DOM组件。this.props.name意思也很明显了。
样式与style
上述我们用了一个className而不用class，原因就是,在ES6中class为一个保留字，所以我们得用className来设置样式。当然还有一个设置样式的方法，那就是style。
首先，在JSX中 加引号则认为是字符串，加｛｝则认为是变量，并且在写样式的时候有-号得用驼峰式写法.。而声明style的时候，是需要传递一个对象的上面的写法等同于下面的写法。
reactComponents的三种阶段
Mounting:已插入真实的DOM这里是reactDOM.render渲染完毕后的一种状态
Updating：正在被重新渲染这是当更改了reactComponents组件的某些内容然后被重新render(渲染)
Unmounting：已移出真实 DOM一个reactComponents组件从DOM结构中移除的这样一个过程
每一个状态react都提供了两种处理函数,will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数。
componentWillMount
componentDidMount
componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object prevState)
componentWillUnmount
this.state
方法API
其中可以看到有一个方法是getInitialState，这个方法会组件挂载之前调用一次初始化state的值。
this.props与this.state
既然this.props和this.state是一样的效果，那么什么属性应该放props什么属性应该放state？
引用阮一峰BLOG一段话：
由于 this.props 和 this.state 都用于描述组件的特性，可能会产生混淆。一个简单的区分方法是，this.props 表示那些一旦定义，就不再改变的特性，而 this.state 是会随着用户互动而产生变化的特性。
如何修改this.state?
那么我们在组件已经插入到真实的DOM中去的时候更改一下this.state的值：
注意，这里使用了setState方法，而不是直接对this.state进行修改。官方（中文）的文档则给出了一则警告：
意思就是：如果你直接修改了this.state，那么下一次setState不会根据你上次的this.state进行修改。
这里的window.setTimeout中this指向的是window，但是在componentDidMount这些方法中this指向的是hello这个实例。
在上述的setTimeout你也可以这样写：
当修改了state那么组件就会进入Updating这个阶段。
react中的事件绑定
在React绑定事件的方式跟在浏览器绑定差不多，唯一的区别就是大小写要分明，react是驼峰式的。
ref
首先要解释这个ref属性，众所周知这些仅仅是虚拟的dom，我们拿到的也是虚拟的dom，那么如何获取一个真实的dom呢？就是通过ref这个属性打一个标记，然后这个标记会返回一个虚拟的DOM节点，但这个节点有个getDOMNode方法，这样就能拿到真实的DOM节点。拿到真实的DOM节点后能做的事情就很多了。
再来写一个表单数据绑定的：
还记得前段时间说的么，this.props 表示那些一旦定义，就不再改变的特性，而 this.state 是会随着用户互动而产生变化的特性。因为当用户输入的时候旁边的span标签也会变动，所以得用this.state来保存属性。我们初始化属性后，通过this.setState来更改state状态，同时更新DOM节点。
参考文章：
React 入门实例教程-阮一峰
React入门-慕课网
React文档-中文
点击阅读原文，即可以查看soul同学的个人博客哦～