webpack+react+es6开发模式
生活随笔
收集整理的這篇文章主要介紹了
webpack+react+es6开发模式
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一、前言
實習了兩個月，把在公司用到的前端開發模式做個簡單的整理。公司里前端開發模式webpack+react+redux+es6，這里去掉了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> <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 Codecss如下：
.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 Code2、通過webpack+react+es6進行模擬
注：可以fork我的github?https://github.com/hjzgg/webpack-react/tree/master/webpackAndReact?，當然可以從0開始...
?（1）、首先為項目建立一個名字，例如“webpack+react”, ?建立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 lang="en"><head><meta charset="utf-8"><title>New React App</title><!<link rel="stylesheet" type="text/css" href="src/css/main.css"> --><!-- <link rel="stylesheet" type="text/css" href="src/css/step.css"> --></head><body><script src="bundle.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 (<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> );} } 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 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> );} }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 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> );} }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: curStep+1,maxStep: maxStep <= curStep ? curStep+1 : 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 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> );} }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
總結
以上是生活随笔為你收集整理的webpack+react+es6开发模式的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： c语言程序设计期末试卷A,《C语言程序设
- 下一篇： Uvaoj 11624 - Fire!