刚刚开始写个人站时，原想同时可以适配手机屏幕的，不过实际操作起来发现适配手机端还是挺困难的。不仅仅是使用两分css样式就可以的，当选择angularjs作为个人站的js框架时就注定了这个网站不适合移动端显示。再加上markdown需要在游览器端去解析，效果肯定不会理想。
而最近开始学习的React.js相对于angularjs是比较轻便的。因此很适合用来做移动端这种性能有瓶颈的设备。
不过关于React.js的学习资料并不多，幸好搜到
React 入门实例教程-阮一峰时间上有点旧了，不过React的语法还是一样的。前辈解释的很到位。这里就不粘贴了。跟着敲一敲学习学习。
为了以后使用方便，把用到的3个库打包好js练习库打包zip下载
基本上都是参照例子打出来的，效果也是可以看到了好吧，算是小小的入门了。
直接贴上代码，以后有忘记的地方可以拿出来看看。
<!DOCTYPE html>
<html>
<head>
<script src="react-demos-master/build/react.js"></script>
<script src="react-demos-master/build/react-dom.js"></script>
<script src="react-demos-master/build/browser.min.js"></script>
</head>
<body>
<style>
ul.stu{
margin: 0px;
padding: 0px;
width: 100%;
border-collapse: collapse;
}
ul.stu>li{
list-style: none;
border: 1px solid black;
margin-bottom: 20px;
padding-left: 20px;
padding-bottom: 20px;
}
ul.stu>li>div.example{
background-color: white;
font-size: 14px;
position: relative;
top: -10px;
left: 20px;
display: inline-block;
line-height: 14px;
}
</style>
<ul class="stu">
<li>
<div class="example">example1</div>
<div id="example1"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello,world! </h1>,
document.getElementById('example1')
);
</script>
</li>
<li>
<div class="example">example2</div>
<div id="example2"></div>
<script type="text/babel">
var count = 0;
setInterval(function(){
count++;
ReactDOM.render(
<h1>count = {count} </h1>,
document.getElementById('example2')
);
},1000)
</script>
</li>
<li>
<div class="example">example3</div>
<div id="example3"></div>
<script type="text/babel">
var books = ['java','android','c++'];
ReactDOM.render(
<ul>
{
books.map(function(book){
return <li key={book}>{book}</li>;
})
}
</ul>,
document.getElementById('example3')
)
</script>
</li>
<li>
<div class="example">example4</div>
<div id="example4"></div>
<script type="text/babel">
var nodes = [<li key="1">xiao ming</li>,
<li key="2">xiao hong</li>,
<li key="3">xiao fang</li>];
ReactDOM.render(
<ul>{nodes}</ul>,
document.getElementById('example4')
)
</script>
</li>
<li>
<div class="example">example5</div>
<div id="example5"></div>
<script type="text/babel">
var Hello = React.createClass({
render:function(){
return <h1>Hello, {this.props.name}!</h1>;
}
})
ReactDOM.render(
<Hello name="world"></Hello>,
document.getElementById('example5')
)
</script>
</li>
<li>
<div class="example">example6</div>
<div id="example6"></div>
<script type="text/babel">
var Nodes = React.createClass({
render:function(){
return (
<ul>
{
React.Children.map(this.props.children,function(child){
return <li>{child}</li>;
})
}
</ul>
)
}
})
ReactDOM.render(
<Nodes>
<span>1</span>
<span>2</span>
</Nodes>,
document.getElementById('example6')
)
</script>
</li>
<li>
<div class="example">example7</div>
<div id="example7"></div>
<script type="text/babel">
var World = React.createClass({
propTypes:{
name:React.PropTypes.string.isRequired,
},
render:function(){
return <p>what is you name, {this.props.name} ?</p>
}
})
ReactDOM.render(
<World name="wb"></World>,
document.getElementById('example7')
)
</script>
</li>
<li>
<div class="example">example8</div>
<div id="example8"></div>
<script type="text/babel">
var Component = React.createClass({
doclick:function(){
this.refs.textinput.focus()
},
render:function(){
return (
<div>
<input type="text" ref="textinput" />
<input type="button" value="focus" onClick={this.doclick} />
</div>
)
}
})
ReactDOM.render(
<Component></Component>,
document.getElementById('example8')
)
</script>
</li>
<li>
<div class="example">example9</div>
<div id="example9"></div>
<script type="text/babel">
var ToggleText = React.createClass({
getInitialState:function(){
return {isTrue:true}
},
doclick:function(){
this.setState({isTrue:!this.state.isTrue});
},
render:function(){
var text = this.state.isTrue?"true":"false"
return (
<p onClick={this.doclick}>Now, state is { text}</p>
)
}
})
ReactDOM.render(
<ToggleText></ToggleText>,
document.getElementById('example9')
)
</script>
</li>
<li>
<div class="example">example10</div>
<div id="example10"></div>
<script type="text/babel">
var BindInput = React.createClass({
getInitialState:function(){
return {value:"hello"}
},
handleChange:function(event){
this.setState({value:event.target.value})
},
render:function(){
return (
<div>
<input type="text" value={this.state.value} onChange={this.handleChange} />
<p>{this.state.value}</p>
</div>
)
}
})
ReactDOM.render(
<BindInput/>,
document.getElementById("example10")
)
</script>
</li>
<li>
<div class="example">example11</div>
<div id="example11"></div>
<script type="text/babel">
var Animation = React.createClass({
getInitialState:function(){
return {colorValue:111}
},
componentDidMount:function(){
this.timer = setInterval(function(){
var c = parseInt(this.state.colorValue);
c = c + 111;
if(c > 999){
c = 111;
}
this.setState({colorValue:c})
}.bind(this),200)
},
render:function(){
return (
<div>
<p style={{color:"#"+this.state.colorValue}}>Hello, world!</p>
</div>
)
}
})
ReactDOM.render(
<Animation/>,
document.getElementById("example11")
)
</script>
</li>
</ul>
</body>
</html>