react:
hao123案例，可以通过控制台来获取一些数据填充：
复制网页上的一些内容，
var a = 粘贴的内容.split(/\s+/)
输入 a ,把获得的数组复制；
var Nav = React.createClass({
//["2017年放假安排:全年放假均赶在周末", "二手房价下跌", "合肥房价开启暴跌模式", "牛！这名诗词才女亮相央视才惊四座", ""穿山甲公子"身份疑曝光", "照片被扒出", "女白领追剧到凌晨3点", "眼中长满结石", "女子春节相亲被纠缠：喜欢我哪我改!", "男子看别人女朋友", "自己女朋友被暴打", "山西一官员因保护小三打老婆被停职", "春节回家,这些都是你不能错过的经典!", ""]
createLi:function(){
var liDate = ["2017年放假安排:全年放假均赶在周末","二手房价下跌","合肥房价开启暴跌模式",
"牛！这名诗词才女亮相央视才惊四座","穿山甲公子身份疑曝光",
"照片被扒出","女白领追剧到凌晨3点","眼中长满结石","女子春节相亲被纠缠：喜欢我哪我改!",
"男子看别人女朋友","自己女朋友被暴打","山西一官员因保护小三打老婆被停职",
"春节回家,这些都是你不能错过的经典!"];
//根据数据渲染虚拟dom,将渲染的返回出来 map forEach可以遍历，但是只有map有return
return liDate.map(function(value,index,arrs){
return ({value} )
})
},
render:function(){//对于创建多个虚拟dom我们可以通过方法来渲染
return (
{this.createLi()}
)
}
})
ReactDOM.render(< Nav/>,document.getElementById('app'))
在cmd进入该文件夹，输入fis3 release -d ../test
cmd进入test文件夹，启动node服务 node app
浏览器输入localhost:3000查看效果
======================================================================
上面案例中，创建了一个组件Nav，有两个方法,其中要循环多个li,就可以用到map，注意return和{}的用法；在render中调用是：this.createLi()
注释：
在jsx中的注释可以卸载dom元素块的外面，也可以用{/**/}插值括号来写；
======================================================================
props属性
在html中div就是元素一样，我们可以对其添加不同的属性（id,class),或者是值来实现不同的功能不同的显示效果；
一个组件渲染出来样式一致，为了展现不同的样式行为，我们对其添加不同的属性；
但是添加的属性如何获取，组件中有个属性叫props，这个属性可以获取组件上添加的属性；
var Part = React.createClass({
render:function(){
// console.log(this.props);
//可以得到Object {fontColor: "red"} Object {fontColor: "green"}
return (hello
)
}
})
ReactDOM.render(====================================================================================
getDefaultProps设置默认的属性，如果新插入的组件没有设置title，会报错就用这个：
getDefaultProps:function(){
return {
title:['默认标题']
}
},
====================================================================================
整个代码如下：
var Part = React.createClass({
getDefaultProps:function(){
return {
title:['默认标题']
}
},
createTitle:function(){
return this.props.title.map(function(value,index){
return ({value} )
})
},
render:function(){
console.log(this.props);
// return (hello
)
return (
{this.createTitle()}
)
}
})
ReactDOM.render(html部分:
Document
fis-conf.js的内容：
fis.match('**.jsx',{
parser:fis.plugin('babel2'),
rExt:'.js'
})
====================================================================================
设置样式
先看一段代码：
在元素虚拟dom里写样式需要这样：style={{ color : 'red' }},所以我们可以通过定义插值的方式：
var style ={
color:'red',
border:'1px solid #000',
borderBottom:'5px solid #000',
WebkitBoxShadow:'10px 10px 10px red'
}
return (这是一个标题
)
样式名有-的都要用驼峰式的写法，首字母小写；
但是CSS3兼容性的属性名，例如-webkit-box-shadow就要首字母大写写成WebkitBoxShadow;
由此可见，其实是否大写取决于前面是否有-；
=====================================================================================
那么创建虚拟dom的语法中如何设置样式呢？
var h1 = React.createElement('h1',
{
style:{color:'red'}
},'今天天气真好')
ReactDOM.render(h1,document.getElementById('app'))
记住：
ReactDOM.render(h1,document.getElementById('app'))
中对第一个参数使用是针对创建组件的类名，这里就不需要；
=====================================================================================
react事件
react中为虚拟dom添加事件和html中为dom添加事件一样：
通常我们为react添加的dom是一个方法，所以不要写在字符中，因此要用插值符号为虚拟dom添加事件回调函数；
绑定一个click事件，记得驼峰式onClick:
var Demo = React.createClass({
clickButton:function(){
console.log(111)
},
render:function(){
return (
)
}
})
ReactDOM.render(=====================================================================================
state状态
getInitialState 函数返回一个对象{}
setState来修改state的对象
如果一个组件在渲染到页面之后不会变化，那么我们通过props可以实现对组件样式的设置以及行为的渲染；
这些组件不会受到外界的影响，组件是一成不变的，这类组件叫无状态组件；
对于大部分组件来说，通常是要与用户交互的，此时组件要处在不同的状态，组件自身就应该要有状态，有状态组件；
对于组件内部的状态控制，我们可以通过state属性来控制
getInitialState:function(){
return {
index:0,
text:''
}
}
可以通过事件来更改状态的值：
clickButton:function(){
this.setState({
text:'显示的文案'
})
}
完整的代码如下：
var Demo = React.createClass({
clickButton:function(){
this.setState({
text:'显示的文案'
})
},
getInitialState:function(){
return {
index:0,
text:''
}
},
render:function(){
console.log(this.state)
return (
{this.state.text}
)
}
})
ReactDOM.render(======================================================================================
来实现一个点击小图换大图背景的小案例
思路：批量创建li然后通过插值放入到大盒子里面，在Li上绑定事件changeBg来修改state状态，实现对大图的更换；
var Skin = React.createClass({
createLi:function(){
var arr = [];
for(var i=1;i<13;i++){
arr.push((
9 ? i :'0'+i )+ '.jpg'} data-id={i} alt=''/>
{this.createLi()}
)
}
})
ReactDOM.render(