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>
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:;
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;
}
2、通过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"
}
}
（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()
]
};
（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>
注意，这里面引用的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
);
（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>
);
}
}
（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;
（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;
}
（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
webpack+react+es6开发模式的更多相关文章
- Webpack+React+ES6开发模式入门指南
React无疑是今年最火的前端框架,github上的star直逼30,000,基于React的React Native的star也直逼20,000.有了React,组件化似乎不再步履蹒跚,有了Reac ...
- webpack+react+redux+es6开发模式
一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...
- webpack学习（五）—webpack+react+es6（第1篇）
如果你看过webpack学习系列的前一个文章,接下来做的东西会比较简单 :webpack学习(四)— webpack-dev-server react发展的很快,现在大部分开发react相关的项目,都 ...
- webpack+react+redux+es6开发模式---续
一.前言 之前介绍了webpack+react+redux+es6开发模式 ,这个项目对于一个独立的功能节点来说是没有问题的.假如伴随着源源不断的需求,前段项目会涌现出更多的功能节点,需要独立部署运行 ...
- [webpack] 配置react+es6开发环境
写在前面 每次开新项目都要重新安装需要的包,简单记录一下. 以下仅包含最简单的功能: 编译react 编译es6 打包src中入口文件index.js至dist webpack配置react+es6开 ...
- Webpack+React+ES6入门指南[转]
React无疑是今年最火的前端框架,github上的star直逼30,000,基于React的React Native的star也直逼20,000.有了React,组件化似乎不再步履蹒跚,有了Reac ...
- Webpack+React+ES6 最新环境搭建和配置（2017年）
刚刚学习React,发现React在ES6下的语法才是本体,结合ES6新的语言特性,使组件化开发显得更加直观.而且现在的Angular2也开始使用支持强类型的TypeScript,转译(transpi ...
- webpack + react + es6, 并附上自己碰到的一些问题
最近一直在学react,react的基础部分已经学得差不多了,然而自己并没有做详细的记录,有兴趣的同志可以参考阮一峰老师的教程,个人觉得挺不错的,链接如下:https://github.com/rua ...
- webpack学习（六）—webpack+react+es6（第3篇）
接上篇 : webpack学习(六)—webpack+react+es6(第2篇) 上篇其实是有问题的,问题在取服务器数据这块.this.props 表示那些一旦定义,就不再改变的特性,而 this. ...
随机推荐
- 【.net 深呼吸】细说CodeDom（6）：方法参数
本文老周就给大伙伴们介绍一下方法参数代码的生成. 在开始之前,先补充一下上一篇烂文的内容.在上一篇文章中,老周检讨了 MemberAttributes 枚举的用法,老周此前误以为该枚举不能进行按位操作 ...
- ASP.NET Core 中间件之压缩、缓存
前言 今天给大家介绍一下在 ASP.NET Core 日常开发中用的比较多的两个中间件,它们都是出自于微软的 ASP.NET 团队,他们分别是 Microsoft.AspNetCore.Respons ...
- ASP.NET内置对象的总结
1. Response对象可形象的称之为响应对象,用于将数据从服务器发送回浏览器. 实例源码:链接: http://pan.baidu.com/s/1dDCKQ8x 密码: ihq0 2. Requ ...
- Web Api 入门实战 （快速入门+工具使用+不依赖IIS）
平台之大势何人能挡? 带着你的Net飞奔吧!:http://www.cnblogs.com/dunitian/p/4822808.html 屁话我也就不多说了,什么简介的也省了,直接简单概括+demo ...
- 《Django By Example》第三章 中文 翻译 （个人学习，渣翻）
书籍出处:https://www.packtpub.com/web-development/django-example 原作者:Antonio Melé (译者注:第三章滚烫出炉,大家请不要吐槽文中 ...
- 《Django By Example》第二章 中文 翻译 （个人学习，渣翻）
书籍出处:https://www.packtpub.com/web-development/django-example 原作者:Antonio Melé (译者注:翻译完第一章后,发现翻译第二章的速 ...
- JQuery 复制粘贴上传图片插件（textarea 和 tinyMCE）
开源地址:https://github.com/yuezhongxin/paste-upload-image.js 支持 Ctrl+C/Ctrl+V 上传,支持拖拽上传,也支持 QQ/微信截图上传. ...
- JavaScript 常量定义
相信同学们在看见这个标题的时候就一脸懵逼了,什么?JS能常量定义?别逗我好吗?确切的说,JS当中确实没有常量(ES6中好像有了常量定义的关键字),但是深入一下我们可以发现JS很多不为人知的性质,好好利 ...
- Struts2实现ajax的两种方式
基于Struts2框架下实现Ajax有两种方式,第一种是原声的方式,另外一种是struts2自带的一个插件. js部分调用方式是一样的: JS代码: function testAjax() { var ...
- 通过自定义特性，使用EF6拦截器完成创建人、创建时间、更新人、更新时间的统一赋值(使用数据库服务器时间赋值，接上一篇)
目录: 前言 设计(完成扩展) 实现效果 扩展设计方案 扩展后代码结构 集思广益(问题) 前言: 在上一篇文章我写了如何重建IDbCommandTreeInterceptor来实现创建人.创建时间.更 ...