因为业务需求，公司决定改版官网的技术架构，最终选定用React。
前几个星期刚学习了点React就被新需求拉回去加班了，因此React的学习也就停下来了，最近几天不那么忙了，利用回家后的时间把最近的一个小需求用React实现。
从纯React（无webpack, router）开始。
参考这个简单易懂的教程：react-from-zero
前提：
- 之前的学习让我对React的理念和语法有了一些基本的了解了。
-
现在的需求我白天在公司已经用html+css+js实现一次了。
js实现效果
以下为我思考与操作的流程：
- 把上面教程里的所有demo复制到本地，看注释和代码，跑一遍。
- 分析页面元素
2.1.头像图片
2.2.选择按钮
2.3.头像组
2.3.1.头像图片5
2.4.输入框3
2.4.1.输入框按钮
2.5.报名按钮 - 把css文件引入，运行，没问题，背景图出现了
<!doctype html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
<title>test</title>
<script src="http://cdn.bootcss.com/react/0.14.7/react.js"></script>
<script src="http://cdn.bootcss.com/react/0.14.7/react-dom.js"></script>
<script src="http://cdn.bootcss.com/babel-core/5.8.23/browser.min.js"></script>
<link rel="stylesheet" href="./test.css" />
<script type="text/babel">
</script>
4.添加头像,在script标签中加入头像代码
function Image(props){
return (<img className={props.className} src={props.src} />);
}
var reactElement =
<div className="container">
<Image className="my-avatar" src="../avatar-1.png" />
</div>;
var renderTarget = document.body;
ReactDOM.render(reactElement, renderTarget);
头像有了
5.添加选择按钮（略过），添加头像组，script代码如下
头像组代码写法参照上面demo的第五个example
function Image(props){
return (<img className={props.className} src={props.src} />);
}
//增加以下组件－start
var avatarPics = ["1","2","3","4","5"];
var avatarArr = avatarPics.map(function(avatar){
return (<Image src={"../avatar-"+avatar+".png"} />);
});
function AvatarsBox(props){
return (
<div className={props.className}>
{avatarArr}
</div>);
}
//增加以下组件－end
var reactElement =
<div className="container">
<Image className="my-avatar" src="../avatar-1.png" />
<Image className="slc-btn" src="../slc-btn.png" />
<AvatarsBox className="avatars" />
</div>;
var renderTarget = document.body;
ReactDOM.render(reactElement, renderTarget);
头像组有了
6.添加输入框和底部按钮
function Image(props){
return (<img className={props.className} src={props.src} />);
}
var avatarPics = ["1","2","3","4","5"];
var avatarArr = avatarPics.map(function(avatar){
return (<Image src={"../avatar-"+avatar+".png"} />);
});
function AvatarsBox(props){
return (
<div className={props.className}>
{avatarArr}
</div>);
}
//输入框-start
function InputBox(props){
return (
<div className={props.className+ ' ' +props.id}>
<input id={props.id} type={props.type} />
//下面这个属性下一页会讲到
{props.children}
</div>);
}
//输入框-end
var reactElement =
<div className="container">
<Image className="my-avatar" src="../avatar-1.png" />
<Image className="slc-btn" src="../slc-btn.png" />
<AvatarsBox className="avatars" />
<InputBox className="input-box" id="name" type="text" />
<InputBox className="input-box" id="phone" type="number" />
<InputBox className="input-box" id="code" type="number" />
<Image className="join-btn" src="../join-btn.png" />
</div>;
var renderTarget = document.body;
ReactDOM.render(reactElement, renderTarget);
有了输入框和底部按钮(头像组被我css控制隐藏了)
7.开始添加验证码按钮（点击disabled, 60秒倒计时），可参考demo-9
把demo-9里的代码拷贝到本地，注释全部删掉，MyComponent里的方法从第一个开始删，最后只留下getInitialState,handleClick,render,代码就清晰明了了
新组件代码如下：
//开发过程如下:
//1. handleClick只放置this.setState({enable:false}), 测试禁用效果通过
//2. 加入计时器，测试计时器通过
var InputBtn = React.createClass({
getInitialState: function(){
return {
countdown: "验证码",
enable: true
}
},
handleClick: function(){
this.setState({
countdown: 59,
enable: false
});
//此处切记，在setInterval里，this指的是计时器的作用域，因此用that表示click的作用域
var that = this;
var timeCounter= setInterval(function(){
that.state.countdown--;
if(0===that.state.countdown){
that.setState({
countdown: "验证码",
enable: true
});
clearInterval(timeCounter);
}else{
//不知道有forUpdata()这个方法，抱着试一下的想法是用了不带参数的setState()来刷新，chrome控制台提示我应该用forceUpdate()
//一开始用的是that.setState();
that.forceUpdate();
}
},1000);
},
render: function(){
return <button onClick={this.handleClick} disabled={!this.state.enable}>{this.state.countdown}</button>
}
});
var reactElement =
<div className="container">
<Image className="my-avatar" src="../avatar-1.png" />
<Image className="slc-btn" src="../slc-btn.png" />
<AvatarsBox className="avatars" />
<InputBox className="input-box" id="name" type="text" />
<InputBox className="input-box" id="phone" type="number" />
<InputBox className="input-box" id="code" type="number" >
//给这里加上新加的验证码组件,这面的InputBtn标签就是上一页里的{props.children}
<InputBtn text="验证码"/>
//这个地方把输入框给关闭了
</InputBox>
<Image className="join-btn" src="../join-btn.png" />
</div>;
验证码倒计时的交互也OK了
总结：
学习的过程就是模仿与盖房子，模仿就是模仿别人的写法，直接把代码copy过来改也行（但是还是自己写的好）；盖房子就是一块一块砖头往上垒：
头像－选择按钮－头像组－输入框－验证码按钮－验证码按钮禁用－验证码倒计时
一步一步，最后就成了一个完整的页面了。切莫觉得这一步一步你都会，就像直接跳过，盖房子嘛，还是得一块一块砖头来。
2016.04.28 首开
网友评论