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. ...
随机推荐
- 关于ubuntu实机与虚机互相copy
我的开发环境是在ubuntu上的,但是ubuntu上没有官方支持的QQ,有些不太方便,所以在上面虚了一个Win7(先是win10,但是win10最新版本太坑了,不说了),不过经常会出现复制文件,或者文 ...
- 如何一步一步用DDD设计一个电商网站（二）—— 项目架构
阅读目录 前言 六边形架构 终于开始建项目了 DDD中的3个臭皮匠 CQRS(Command Query Responsibility Segregation) 结语 一.前言 上一篇我们讲了DDD的 ...
- 简单粗暴地理解js原型链--js面向对象编程
原型链理解起来有点绕了,网上资料也是很多,每次晚上睡不着的时候总喜欢在网上找点原型链和闭包的文章看,效果极好. 不要纠结于那一堆术语了,那除了让你脑筋拧成麻花,真的不能帮你什么.简单粗暴点看原型链吧, ...
- Logstash实践: 分布式系统的日志监控
文/赵杰 2015.11.04 1. 前言 服务端日志你有多重视? 我们没有日志 有日志,但基本不去控制需要输出的内容 经常微调日志,只输出我们想看和有用的 经常监控日志,一方面帮助日志微调,一方面及 ...
- C++中的事件分发
本文意在展现一个C++实现的通用事件分发系统,能够灵活的处理各种事件.对于事件处理函数的注册,希望既能注册到普通函数,注册到事件处理类,也能注册到任意类的成员函数.这样在游戏客户端的逻辑处理中,可以非 ...
- C#基础篇 - 理解委托和事件
1.委托 委托类似于C++中的函数指针(一个指向内存位置的指针).委托是C#中类型安全的,可以订阅一个或多个具有相同签名方法的函数指针.简单理解,委托是一种可以把函数当做参数传递的类型.很多情况下,某 ...
- 使用Java原生代理实现AOP
### 本文由博主柒.原创,转载请注明出处 ### 完整源码下载地址 [https://github.com/MatrixSeven/JavaAOP](https://github.com/Matri ...
- SQL Server-聚焦计算列持久化（二十一）
前言 上一节我们结束了Hash Match Aggregate和Stream Aggregate的讲解,本系列我们来讲讲关于SQL Server中的计算列问题,简短的内容,深入的理解,Always t ...
- iOS开发之多种Cell高度自适应实现方案的UI流畅度分析
本篇博客的主题是关于UI操作流畅度优化的一篇博客,我们以TableView中填充多个根据内容自适应高度的Cell来作为本篇博客的使用场景.当然Cell高度的自适应网上的解决方案是铺天盖地呢,今天我们的 ...
- 使用 Android Studio 检测内存泄漏与解决内存泄漏问题
本文在腾讯技术推文上 修改 发布. http://wetest.qq.com/lab/view/63.html?from=ads_test2_qqtips&sessionUserType=BF ...