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. ...
随机推荐
- Cmder--Windows下命令行利器
cmder cmder是一个增强型命令行工具,不仅可以使用windows下的所有命令,更爽的是可以使用linux的命令,shell命令. 安装包 安装包链接 下载后,直接解压即用. 修改命令提示符λ为 ...
- Golang， 以17个简短代码片段，切底弄懂 channel 基础
(原创出处为本博客:http://www.cnblogs.com/linguanh/) 前序: 因为打算自己搞个基于Golang的IM服务器,所以复习了下之前一直没怎么使用的协程.管道等高并发编程知识 ...
- 异步编程 In .NET
概述 在之前写的一篇关于async和await的前世今生的文章之后,大家似乎在async和await提高网站处理能力方面还有一些疑问,博客园本身也做了不少的尝试.今天我们再来回答一下这个问题,同时我们 ...
- .Net多线程编程—System.Threading.Tasks.Parallel
System.Threading.Tasks.Parallel类提供了Parallel.Invoke,Parallel.For,Parallel.ForEach这三个静态方法. 1 Parallel. ...
- [C#] C# 知识回顾 - 委托 delegate
C# 知识回顾 - 委托 delegate [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/6031892.html 目录 What's 委托 委托的属性 ...
- wordpress优化之结合prism.js为编辑器自定义按钮转化代码
原文链接 http://ymblog.net/2016/07/24/wordpress-prism/ 继昨天花了一天一夜的时间匆匆写了主题Jiameil3.0之后,心中一直在想着优化加速,体验更好,插 ...
- 【C#公共帮助类】 ToolsHelper帮助类
这个帮助类,目前我们只用到了两个,我就先更新这两个,后面有用到的,我会继续更新这个Helper帮助类 在Tools.cs中 有很多方法 跟Utils里是重复的,而且Utils里的方法更加新一点,大家可 ...
- ActiveRecord模式整理
DAO Data Access Object,数据访问对象 DAO是一个软件设计的指导原则,在核心J2EE模式中是这样介绍DAO模式的:为了建立一个健壮的J2EE应用,应该将所有对数据源的访问操作抽象 ...
- if __name__== "__main__" 的意思(作用)python代码复用
if __name__== "__main__" 的意思(作用)python代码复用 转自:大步's Blog http://www.dabu.info/if-__-name__ ...
- 【Linux大系】Linux的概念与体系
感谢原作者:Vamei 出处:http://www.cnblogs.com/vamei 我在这一系列文章中阐述Linux的基 本概念.Linux操作系统继承自UNIX.一个操作系统是一套控制和使用计算 ...