React 从院子到入门（一）

作者: 非朽非木 | 来源:发表于2016-04-28 01:50 被阅读170次

React 从院子到入门（一）
React Native：从入门到原理
从Android到React Native开发（四、打包流程解析
从Android到React Native开发（三、自定义原生控
从Android到React Native开发（二、通信与模块实
React Native
React从入门到进阶(一)
从Vue入门到React入门
PropTypes类型检测-转载
markdown试用测试并上传一部分课程链接

因为业务需求，公司决定改版官网的技术架构，最终选定用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 首开