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 (<li key={index}>{value}</li>)
})
},
render:function(){//对于创建多个虚拟dom我们可以通过方法来渲染
return (
<div className="nav-part">
<ul>
{this.createLi()}
</ul>
</div>
)
}
})
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 (<h2 className={this.props.fontColor}>hello</h2>)
}
})
ReactDOM.render(<Part fontColor="red" />,document.getElementById('app'))
ReactDOM.render(<Part fontColor="green" />,document.getElementById('app2'))
====================================================================================
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 (<li key={index}>{value}</li>)
})
},
render:function(){
console.log(this.props);
// return (<h2 className={this.props.fontColor}>hello</h2>)
return (
<div className="part">
<ul className="header">
{this.createTitle()}
</ul>
</div>
)
}
})
ReactDOM.render(<Part title={['今日要闻','深圳新闻']} />,document.getElementById('app'))
ReactDOM.render(<Part title={['今日话题']} />,document.getElementById('app2'))
ReactDOM.render(<Part title={['今日热播','影视剧','综艺']} />,document.getElementById('app3'))
ReactDOM.render(<Part />,document.getElementById('app3'))//这个就没有写titile
html部分:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.part{
width: 300px;
color:#0873c0;
margin: 20px;
height: 300px;
}
ul{
border-top: 2px solid #ccc;
}
ul li{
margin-top: -2px;
border-top: 2px solid #ccc;
font-size: 14px;
line-height: 30px;
height: 30px;
float: left;
padding:0 20px;
text-align: center;
}
ul li:hover{
border-top-color: blue;
cursor: pointer;
}
</style>
</head>
<body>
<div id="app"></div>
<div id="app2"></div>
<div id="app3"></div>
<script src="react.js"></script>
<script src="react-dom.js"></script>
<script src="js/07.jsx"></script>
</body>
</html>
fis-conf.js的内容：
fis.match('**.jsx',{
parser:fis.plugin('babel2'),
rExt:'.js'
})
====================================================================================
设置样式
先看一段代码：
<script type="text/x-jsx">
var Title = React.createClass({
render:function(){
var style ={
color:'red',
border:'1px solid #000',
borderBottom:'5px solid #000',
WebkitBoxShadow:'10px 10px 10px red'
}
return (<h1 style={style}>这是一个标题</h1>)
}
})
ReactDOM.render(< Title />,document.getElementById('app'))
</script>
在元素虚拟dom里写样式需要这样：style={{ color : 'red' }},所以我们可以通过定义插值的方式：
var style ={
color:'red',
border:'1px solid #000',
borderBottom:'5px solid #000',
WebkitBoxShadow:'10px 10px 10px red'
}
return (<h1 style={style}>这是一个标题</h1>)
样式名有-的都要用驼峰式的写法，首字母小写；
但是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添加事件一样：<div onclick=""></div>
通常我们为react添加的dom是一个方法，所以不要写在字符中，因此要用插值符号为虚拟dom添加事件回调函数；
绑定一个click事件，记得驼峰式onClick:
var Demo = React.createClass({
clickButton:function(){
console.log(111)
},
render:function(){
return (
<div>
<button onClick={this.clickButton} >显示下面的内容</button>
</div>
)
}
})
ReactDOM.render(<Demo />,document.getElementById('app'))
=====================================================================================
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 (
<div>
<button onClick={this.clickButton} >显示下面的内容</button>
<p>{this.state.text}</p>
</div>
)
}
})
ReactDOM.render(<Demo />,document.getElementById('app'))
======================================================================================
来实现一个点击小图换大图背景的小案例
思路：批量创建li然后通过插值放入到大盒子里面，在Li上绑定事件changeBg来修改state状态，实现对大图的更换；
var Skin = React.createClass({
createLi:function(){
var arr = [];
for(var i=1;i<13;i++){
arr.push((<li onClick={this.changeBg} key={i}><img src={'skin/small_'+ (i >9 ? i :'0'+i )+ '.jpg'} data-id={i} alt=''/> </li>))
}
return arr;
},
changeBg:function(e){
var id = e.target.getAttribute('data-id');
this.setState({
bg: 'url(skin/big_'+ (id > 9 ? id : '0' + id ) +'.jpg)'
})
},
getInitialState:function(){
return {
bg: ''
}
},
render:function(){
// console.log(this.state.bg)
var style={
backgroundImage:this.state.bg
};
return (
<div style={style} className="skin">
<div className="list">
<ul>
{this.createLi()}
</ul>
</div>
</div>
)
}
})
ReactDOM.render(<Skin />,document.getElementById('app'))
