杭州网站搜索,注册公司名字查询系统,合肥企业网站建设工,米拓建站怎么样一、前言 实习了两个月#xff0c;把在公司用到的前端开发模式做个简单的整理。公司里前端开发模式webpackreactreduxes6#xff0c;这里去掉了redux。 webpack, react, redux等学习网址#xff1a;http://www.cnblogs.com/hujunzheng/p/5405780.html 二、简单的步骤条组件 … 一、前言 实习了两个月把在公司用到的前端开发模式做个简单的整理。公司里前端开发模式webpackreactreduxes6这里去掉了redux。 webpack, react, redux等学习网址http://www.cnblogs.com/hujunzheng/p/5405780.html 二、简单的步骤条组件 1、通过react自定义的组件进行模拟 注只是用了react用到相关react的js请到 https://github.com/hjzgg/webpack-react 下的build文件夹下载。 html如下 !DOCTYPE html
htmlheadlink relstylesheet typetext/css hrefstep.cssscript src../build/react.js/scriptscript src../build/react-dom.js/scriptscript src../build/browser.min.js/script/headbodydiv idexample/divscript typetext/babelvar Line React.createClass({render: function() {let self this;let active this.props.active;let value 0;//进度条没有加载if(active 1) {//进度条加载完成value 100;}return (div classNameant-progress-linedivdiv classNameant-progress-outerdiv classNameant-progress-innerdiv style{{width: value%}} classNameant-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 classNameant-steps-headdiv classNameant-steps-head-inner style{active ? {backgroundColor: #2db7f5} : {backgroundColor: #c1c1c1}} onClick{function(){self.props.preStep(number)}}span classNameant-steps-icon {number1} /span/divdiv classNameant-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: curStep1,maxStep: maxStep curStep ? curStep1 : 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 classNamestep-main-divCircle active{activeCircle} content{content} number{index} preStep{self.preStep}//div);} else {return (div classNamestep-main-div step-main-div-moveCircle active{activeCircle} content{content} number{index} preStep{self.preStep}//div);}} else if(index 0) {return ( div classNamestep-main-divCircle active{activeCircle} content{content} number{index} preStep{self.preStep}/Line active{activeLine}//div);} else {return (div classNamestep-main-div step-main-div-moveCircle 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 (divdiv style{{marginTop: 100px, width: 70%, display: inline-block}}Step contents{[first, second, third, forth]} refmyStep//divdiv style{{display: inline}}a hrefjavascript:void(0) onClick{this.nextStep}next/a/div/div);}});ReactDOM.render(MainDiv /,document.getElementById(example));/script/body
/html View Code css如下 .ant-steps-head {width: 200px;position: relative;display: inline-block;vertical-align: top;text-align: center;
}.ant-steps-text{width: 200px;font-size: 16px;
}.ant-steps-head-inner {margin: auto;border-color: #2db7f5;display: block;border: 1px solid #ccc;cursor: pointer;width: 40px;height: 40px;line-height: 40px;border-radius: 40px;font-size: 18px;-webkit-transition: background-color .3s ease,border-color .3s ease;transition: background-color .3s ease,border-color .3s ease;
}.ant-steps-icon {color: #fff;line-height: 1;top: -1.5px;position: relative;
}.ant-progress-line {width: 235px;margin-left: -75px;line-height: 40px;position: relative;display: inline-block;
}.ant-progress-outer {padding-right: 45px;margin-right: -45px;display: inline-block;width: 100%;
}.ant-progress-inner {display: inline-block;width: 100%;background-color: #c1c1c1;border-radius: 100px;vertical-align: middle;
}.ant-progress-bg {border-radius: 100px;height: 4px;background-color: #2db7f5;-webkit-transition: all .3s linear 0s;transition: all .3s linear 0s;position: relative;
}.step-main-div{display:inline;width: 315px;
}.step-main-div-move{margin-left: -120px;
} View Code 2、通过webpackreactes6进行模拟 注可以fork我的github https://github.com/hjzgg/webpack-react/tree/master/webpackAndReact 当然可以从0开始... 1、首先为项目建立一个名字例如“webpackreact”, 建立src/step、src/css和build目录在项目根目录下建立package.json文件内容如下 {name: react-webpack,version: 1.0.0,description: webpack demo,main: index.js,scripts: {start: node server.js,dev: webpack-dev-server --port 8000 --devtool eval --progress --colors --hot --inline,build-before: webpack --display-error-details --progress --colors -p,build: webpack --config webpack.build.config.js --display-error-details --progress --colors,build-watch: webpack --display-error-details --progress --colors --watch --debug --devtool source-map --output-pathinfo,test: echo \Error: no test specified\ exit 1},keywords: [react,webpack],author: hjzgg,devDependencies: {babel-core: ^6.3.21,babel-loader: ^6.2.4,babel-preset-es2015: ^6.3.13,babel-preset-react: ^6.3.13,css-loader: ~0.16.0,style-loader: ~0.12.3,react: ^0.14.3,react-hot-loader: ^1.3.0,react-router: ^1.0.2,extract-text-webpack-plugin: ^0.8.2,webpack: ^1.12.9,webpack-dev-server: ^1.14.0},dependencies: {lodash: ^3.9.3,react: ^0.14.3,react-dom: ^0.14.3}
} View Code 2、第二步就是创建我们webpack的配置文件webpack.config.js var webpack require(webpack);
module.exports {entry: [webpack/hot/only-dev-server,./src/step/app.js],output: {path: ./build,filename: bundle.js},module: {loaders: [{test: /\.js?$/, exclude: /node_modules/, loaders: [react-hot,babel-loader?presets[]react,presets[]es2015] },{ test: /\.css$/, loader: style!css}]},resolve:{extensions:[,.js,.json]},plugins: [new webpack.NoErrorsPlugin()]
}; View Code 3、入口文件 index.html !doctype html
html langenheadmeta charsetutf-8titleNew React App/title!link relstylesheet typetext/css hrefsrc/css/main.css --!-- link relstylesheet typetext/css hrefsrc/css/step.css --/headbodyscript srcbundle.js/script/body
/html View Code 注意这里面引用的bundle.js文件非常重要它是我们打包后的入口文件不引入它程序是跑不起来的。 4、程序的入口文件src/step/app.js在这里加载了我们自定义的步骤条组件 import React from react;
import ReactDOM from react-dom;
import MainDiv from ./mainDiv;ReactDOM.render
(MainDiv /,document.body
); View Code 5、src/step/app.js中引用的src/step/mainDiv.js import React from react;
import Step from ./Step;export default class MainDiv extends React.Component{constructor(props){super(props);this.nextStep this.nextStep.bind(this);}nextStep(){this.refs.myStep.nextStep();}render(){return (divdiv style{{marginTop: 100px, width: 70%, display: inline-block}}Step contents{[first, second, third, forth]} refmyStep//divdiv style{{display: inline}}a hrefjavascript:void(0) onClick{this.nextStep}next/a/div/div);}
} View Code 6、src/step/mainDiv.js中引用的src/step/Step.jsp (自定的步骤条组件) import React from react;
import ../css/step.css;
class Line extends React.Component{constructor(props){super(props);}render(){let self this;let active this.props.active;let value 0;//进度条没有加载if(active 1) {//进度条加载完成value 100;}return(div classNameant-progress-linedivdiv classNameant-progress-outerdiv classNameant-progress-innerdiv style{{width: value%}} classNameant-progress-bg/div/div/div/div/div);}
}class Circle extends React.Component{constructor(props){super(props);}render(){let content this.props.content;let number this.props.number;let active this.props.active;let self this;return (div classNameant-steps-headdiv classNameant-steps-head-inner style{active ? {backgroundColor: #2db7f5} : {backgroundColor: #c1c1c1}} onClick{function(){self.props.preStep(number)}}span classNameant-steps-icon {number1} /span/divdiv classNameant-steps-text style{active ? {color: #2db7f5} : {color: #c1c1c1}}{content}/div/div);}
}class Step extends React.Component {constructor(props) {super(props);this.state {curStep: 0,//当前正操作哪一步maxStep: 0,//执行最远的一步};this.nextStep this.nextStep.bind(this);this.preStep this.preStep.bind(this);}nextStep(){let self this;let curStep this.state.curStep;let maxStep this.state.maxStep;this.setState({curStep: curStep1,maxStep: maxStep curStep ? curStep1 : maxStep,});}preStep(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(){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 classNamestep-main-divCircle active{activeCircle} content{content} number{index} preStep{self.preStep}//div);} else {return (div classNamestep-main-div step-main-div-moveCircle active{activeCircle} content{content} number{index} preStep{self.preStep}//div);}} else if(index 0) {return ( div classNamestep-main-divCircle active{activeCircle} content{content} number{index} preStep{self.preStep}/Line active{activeLine}//div);} else {return (div classNamestep-main-div step-main-div-moveCircle active{activeCircle} content{content} number{index} preStep{self.preStep}/Line active{activeLine}//div);}});return (div style{{width: 100%}} {steps}/div);}
}module.exports Step; View Code 7、src/css/step.css (组件样式) .ant-steps-head {width: 200px;position: relative;display: inline-block;vertical-align: top;text-align: center;
}.ant-steps-text{width: 200px;font-size: 16px;
}.ant-steps-head-inner {margin: auto;border-color: #2db7f5;display: block;border: 1px solid #ccc;cursor: pointer;width: 40px;height: 40px;line-height: 40px;border-radius: 40px;font-size: 18px;-webkit-transition: background-color .3s ease,border-color .3s ease;transition: background-color .3s ease,border-color .3s ease;
}.ant-steps-icon {color: #fff;line-height: 1;top: -1.5px;position: relative;
}.ant-progress-line {width: 235px;margin-left: -75px;line-height: 40px;position: relative;display: inline-block;
}.ant-progress-outer {padding-right: 45px;margin-right: -45px;display: inline-block;width: 100%;
}.ant-progress-inner {display: inline-block;width: 100%;background-color: #c1c1c1;border-radius: 100px;vertical-align: middle;
}.ant-progress-bg {border-radius: 100px;height: 4px;background-color: #2db7f5;-webkit-transition: all .3s linear 0s;transition: all .3s linear 0s;position: relative;
}.step-main-div{display:inline;width: 315px;
}.step-main-div-move{margin-left: -120px;
} View Code 8、在项目根目录下打开bash执行npm install, 等待执行完毕项目的根目录下会多出node_modules文件夹这是项目所需要的一些依赖文件。 9、最后npm run dev将项目跑起来... 3、css-loader和style-loader webpack可以很方便的帮助我们导入css文件需要我们下载css的loader然后在webpack.config.js中配置这里已经配置好了。然后在js文件直接import xxx.css就可以直接使用css样式了。 引用css的另一个办法就是在入口文件index.html中通过link .../来实现也可以达到目的。当然还是推荐前者。 4、配置问题 关于工程依赖工程启动es6解析等一些配置还是要好好研究一下package.json和webpack.config.js这两个文件了请看看下面的文章 http://www.cnblogs.com/skylar/p/React-Webpack-ES6.html 三、demo下载 https://github.com/hjzgg/webpack-react 转载于:https://www.cnblogs.com/hujunzheng/p/5538293.html
