熟悉React
预备
babel-cli
写 React 有两种体式格局：
经由过程 jsx
经由过程 js
jsx 写起来以为会更轻易，但就须要用babel举行编译了。
用babel编译 React 的 jsx 有三种要领( 关于 babel 的详细运用要领彷佛照样有许多疑问的。以后会再折腾下)
Node.js运行时编译
浏览器（客户端）运行时编译
如许我盘算用 babel-cli 举行及时编译，会比较轻易。
装置
将东西全局装置了：
$ [sudo] npm i -gd babel-cli插件零丁装置：
$ npm i -d babel-preset-react运用
ps:我这里之前说错了
这里有个坑，在 windows 体系的话，能够直接
babel --presets react，但在 os x 会报错，要直接直接指定绝对途径/usr/local/lib/node_modules/babel-preset-react，
babel-cli 的 --presets 参数是会向父级目次寻觅 node_module 内里的 babel-prest-xxx 插件，假如没有找到，就会相对于当前目次途径寻觅插件。
除此之外，你也能够写成绝对途径的插件地点。
在零丁装置了插件后，你就可以够不必写绝对途径地点了。
$ babel --presets react jsx --watch --out-dir build假如不想每次敲敕令，能够在项目目次（就是敲babel敕令的目次）中新建一个.babelrc文件:
{
"presets": ["react"]
}如许敲敕令的时刻就可以够不要带上--presets参数了。
$ babel jsx --watch --out-dir buildjsx是须要编译的文件夹，build是编译后产出的文件夹。
运用 React v0.14.x
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="JBody"></div>
<!-- react 中心 js-->
<script src="http://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script>
<!-- 编译后的 jsx 援用 -->
<script src="./build/test.js"></script>
</body>
</html>ps：官网的示例中，react 中心 js 是放在 <head></head> 标签内里的，由于如许的话，在末了衬着 DOM 的时刻就可以够直接挑选在<body></body>标签内里了。不然就要像我如许，在<body></body>标签内里给个节点供 react 举行衬着。
组件
组件观点
先来个 Input 组件。
var Input = React.createClass({
render: function(){
return(
<label for={this.props.id}>
<i>四月是谁的假话</i>
<input id={this.props.id} value type="text"/>
</label>
)
}
})经由过程 Reac.createClass 建立的就是组件了。rander 函数 return 的东西能够称作模板。
每一个组件都是一个树形构造（有父级节点和子节点，也就是不能同时存在两个顶级节点，react 是不允许的）。
在 React 内里就是一个个组件构成的，组合在一起就也是一个树形构造。
组件的衬着
ReactDOM.render(
<Input />,
document.getElementById('JBody')
);挪用 ReactDOM.render 要领举行衬着，第一个参数是组件了，第二个是装载该组件的容器。
一样的，第一个参数只支撑树形构造，也就是只要一个顶级节点。
组件的两个主要对象
props
props 就是一个组件模板的数据对象。内里储存着静态的数据，也就是只在挪用时赋值，以后假如有数据的转变也不会再次举行模板的衬着了。
props 的运用:
var Input = React.createClass({
render: function(){
return(
// 运用 props
<label for={this.props.iid}>
<i>四月是谁的假话</i>
<input id={this.props.iid} value type="text"/>
</label>
)
}
})
ReactDOM.render(
<Input iid="JWho"/>, // 赋值 props
document.getElementById('JBody')
)state
state 跟 props 是相对的。state 是动态的数据对象，也就是能够任何时刻举行赋值，以后假如有数据的转变会举行模板的再次衬着（这里衬着的话就触及到了 react 的 virtual DOM）了。
state 的运用：
这里定义个列表组件Items
var Items = React.createClass({
getInitialState: function() {
return {
data: [12312,1231,45,51512312,2131]
}
},
render: function(){
return(
<ul>
{this.state.data.map((value,i) => {
return <li>{value}</li>
})}
</ul>
)
}
})getInitialState 用来定义 state 的初始数据。
还能够在组件的性命周期函数里能够从服务器猎取数据然后经由过程挪用 this.setState 要领举行对 state 赋值。
this.setState 就是谁人 能够任何时刻举行赋值 的要领了。
革新下 Input 组件，state示例：
var Input = React.createClass({
getInitialState: function() {
return {
who: '我'
}
},
change: function(e){
let target = e.target
this.setState({
who : target.value
})
},
render: function(){
// 运用 props
return(
<div>
<label for={this.props.iid}>
<i>四月是谁的假话？</i>
<input id={this.props.iid} onChange={this.change} type="text"/>
</label>
<p>{`四月是${this.state.who}的假话`}</p>
</div>
)
}
})
ReactDOM.render(
<Input />,
document.getElementById('JBody')
)这里举行了事宜 onChange 的挪用，当触发 change 事宜的时刻，state 就会举行改版了。
关于时候体系的文档：
组件的文档
组件的通讯
react 的中心中是没有关于两个差别组件之间的互相通讯的要领的，然则官方给出了一种flux的通讯观点、flux中文文档，但是社区好像并不以为这一套计划很好用，因而有了另一种通讯观点redux。
我对通讯的明白
react 的组件化观点是很明白的，但关于组件之间通讯能够说是基础没有。
在我的明白内里，组件的通讯能够更明白地明白为数据的通讯，由于数据和组件衬着星散是很主要的。
一个担任差别组件衬着的组件容器，会自行推断数据的状况从而举行终究组件的衬着。如许就可以做到数据和组件衬着的星散了。这个观点就是Container Components
、Leveling Up With React: Container Components
在其他的一些mv*框架内里，每一个组件都有本身的通讯接口，从而能够在A组件内里跟B组件举行数据通讯，但 react 倒是没有如许的接口，从而我们就须要一个借助一些通讯东西，比方手机、电脑什么的。
没错，我们能够把 Flux、Redux 这些东西当做通讯东西来对待，假如你喜好，你完整能够用写信的体式格局（本身写一个观察者形式的函数）。当A组件的数据要与B组件的数据举行打电话的时刻，拨通B组件的电话号码，然后把数据关照B组件就可以够了。数据会在运营商的体系内里走一遭，然后传到B组件那边的。
通讯场景
比方登录。
在一个页面上，假如存在两个或两个以上须要猎取登录信息的组件，就将须要举行通讯了。
当一个组件举行了登录以后，应当关照其他须要更新登录信息的组件。如许就产生了通讯的需求了。
组件的笼统与封装
这块到没有太多的实践，组件的拆分、定义是一门深图远虑的艺术。等有实践经验找到蹊径以后再做补充。
但这块多是许多人会疏忽的，优异的笼统封装起首应当是针对轻易开辟和保护的，其次才是复用。
