webpack+react+es6开发模式

一、前言

　　实习了两个月，把在公司用到的前端开发模式做个简单的整理。公司里前端开发模式webpack+react+redux+es6，这里去掉了redux。
　　webpack, react, redux等学习网址：http://www.cnblogs.com/hujunzheng/p/5405780.html
二、简单的步骤条组件

　　 webpack+react+es6开发模式
1、通过react自定义的组件进行模拟

　注：只是用了react，用到相关react的js请到 https://github.com/hjzgg/webpack-react 下的build文件夹下载。
　　html如下：
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="step.css">
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
        var Line = React.createClass({
            render: function() {
                let self = this;
                let active = this.props.active;
                let value = 0;//进度条没有加载
                if(active == 1) {//进度条加载完成
                    value = 100;
                }
                return (
                    <div className="ant-progress-line">
                        <div>
                            <div className="ant-progress-outer">
                                <div className="ant-progress-inner">
                                    <div style={{width: value+"%"}} className="ant-progress-bg">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                );
            }
        });

        var Circle = React.createClass({
            render: function(){
                let content = this.props.content;
                let number = this.props.number;
                let active = this.props.active;
                let self = this;
                return (
                    <div className="ant-steps-head">
                        <div className="ant-steps-head-inner" style={active ? {backgroundColor: "#2db7f5"} : {backgroundColor: "#c1c1c1"}} onClick={function(){self.props.preStep(number)}}>
                            <span className="ant-steps-icon"> {number+1} </span>
                        </div>
                        <div className="ant-steps-text" style={active ? {color: "#2db7f5"} : {color: "#c1c1c1"}}>
                            {content}
                        </div>
                    </div>
                );
            }
        });

        var Step = React.createClass({
            getInitialState: function() {
                return { 
                       curStep: 0,//当前正操作哪一步
                    maxStep: 0,//执行最远的一步
                };
            },
             
              nextStep: function(){
                  let self = this;
                  let curStep = this.state.curStep;
                  let maxStep = this.state.maxStep;
                  this.setState({
                      curStep: curStep+1,
                      maxStep: maxStep <= curStep ? curStep+1 : maxStep,
                  });
              },

              preStep: function(toStep){
                  let maxStep = this.state.maxStep;
                  let curStep = this.state.curStep;
                  if(toStep > maxStep || toStep == curStep) return;
                  this.setState({
                      curStep: toStep,
                  });

                  if(this.props.mainPreStep)
                      this.props.mainPreStep(toStep);
              },

            render: function(){
                let self = this;
                let contents = self.props.contents;
                let steps = contents.map(function(content, index){
                    let activeCircle = true;
                    let activeLine = false;
                    if(self.state.curStep > 0 && self.state.curStep-1 >= index) activeLine = true;
                    if(index > self.state.curStep) activeCircle = false;
                    if(index == contents.length-1) {
                        if(index == 0) {
                            return (
                                <div className="step-main-div">
                                    <Circle active={activeCircle} content={content} number={index} preStep={self.preStep}/>
                                </div>
                            );
                        } else {
                            return (
                                <div className="step-main-div step-main-div-move">
                                    <Circle active={activeCircle} content={content} number={index} preStep={self.preStep}/>
                                </div>
                            );
                        }
                    } else if(index == 0) {
                        return ( 
                            <div className="step-main-div">
                                <Circle active={activeCircle} content={content} number={index} preStep={self.preStep}/>
                                <Line active={activeLine}/>
                            </div>
                        );
                    } else {
                        return (
                            <div className="step-main-div step-main-div-move">
                                <Circle active={activeCircle} content={content} number={index} preStep={self.preStep}/>
                                <Line active={activeLine}/>
                            </div>
                        );
                    }
                });
                
                return (
                    <div style={{width: "100%"}}> 
                        {
                            steps
                        }
                    </div>
                );
            }
        });

        var MainDiv = React.createClass({
            nextStep: function(){
                this.refs.myStep.nextStep();
            },
            render: function(){
                return (
                    <div>
                        <div style={{marginTop: "100px", width: "70%", display: "inline-block"}}>
                            <Step contents={["first", "second", "third", "forth"]} ref="myStep"/>
                        </div>
                        <div style={{display: "inline"}}>
                            <a href="javascript:void(0)" onClick={this.nextStep}>next</a>
                        </div>
                    </div>
                );
            }
        });
       

          ReactDOM.render(
                <MainDiv />,
               document.getElementById('example')
         );
    </script>
  </body>
</html>
View Code