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 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、通过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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/531311.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

git命令分类图

git命令分类图

转载于:https://www.cnblogs.com/hujunzheng/p/5560826.html
阅读更多...
数据结构算法模拟系统

数据结构算法模拟系统

一、前言 学习数据结构已经有很长时间了&#xff0c;加上之前搞过一段时间的ACM&#xff0c;虽然搞得并不怎么样吧&#xff0c;但是喜欢的东西不能放弃&#xff0c;一直打算写一个算法模拟系统&#xff0c;对常用的一些算法进行简单的模拟&#xff0c;于是我的毕业设计就这样诞…
阅读更多...
推荐几款jquery图片切换插件

推荐几款jquery图片切换插件

一、前言 毕业季到了&#xff0c;大家都在匆匆忙忙的记录大学里最美好的时光&#xff0c;照片中各种花式、各种姿势都涌现出来了。这么多的照片怎么展示出来给自己的好友看呢&#xff1f;有人选择做成视频&#xff0c;有人选择ps之后做成图片集&#xff0c;而我选择利用静态网页…
阅读更多...
c语言表白

c语言表白

马上就要520了&#xff0c;不少小伙伴们一定开始想尽各种办法进行表白了…那么身为奔跑在程序员道路上的我们也一定要有独特的表白方法&#xff01; 下面是一段表白代码&#xff0c;请直接搬去用吧&#xff01;&#xff01;&#xff01; #include <stdio.h> void change…
阅读更多...
python表白

python表白

马上就要520了&#xff0c;不少小伙伴们一定开始想尽各种办法进行表白了…那么身为奔跑在程序员道路上的我们也一定要有独特的表白方法&#xff01; 下面是一段表白代码&#xff0c;请直接搬去用吧&#xff01;&#xff01;&#xff01; import turtle import timedef hart_ar…
阅读更多...
git revert和reset区别

git revert和reset区别

1.在github上建立测试项目并克隆到本地 2.本地中新建两个文本文件 3.将a.txt commit并push到远程仓库 执行 git add a.txt, git commit -m "a.txt", git push 4.将b.txt提交到本地仓库&#xff0c;不执行push 通过gitk命令查看提交历史如下&#xff1a; 情景&#xf…
阅读更多...
sorl6.0+jetty+mysql搭建solr服务

sorl6.0+jetty+mysql搭建solr服务

1.下载solr 官网&#xff1a;http://lucene.apache.org/solr/ 2.目录结构如下 3.启动solr&#xff08;默认使用jetty部署&#xff09; 在path路径下将 bin文件夹对应的目录加入&#xff0c;然后输入 solr start&#xff08;或者 solr start -p port&#xff0c;指定端口启动&am…
阅读更多...
Maven中安装本地Jar包到仓库中或将本地jar包上传

Maven中安装本地Jar包到仓库中或将本地jar包上传

摘要 maven install 本地jar命令格式 mvn install:install-file -DgroupId<group_name> -DartifactId<artifact_name> -Dversion<version_no> -Dfile<path_of_the_local_jar> -Dpackagingjar -DgeneratePomtrue 示例 mvn install:install-file -Dgroup…
阅读更多...
二维码登录原理及生成与解析

二维码登录原理及生成与解析

一、前言 这几天在研究二维码的扫码登录。初来乍到&#xff0c;还有好多东西不懂。在网上看到有人写了一些通过QRCode或者Zxing实现二维码的生成和解码。一时兴起&#xff0c;决定自己亲手试一试。本人是通过QRCode实现的&#xff0c;下面具体的说一下。 二、二维码原理 基础知…
阅读更多...
knockout+echarts实现图表展示

knockout+echarts实现图表展示

一、需要学习的知识 knockout, require, director, echarts, jquery。简单的入一下门&#xff0c;网上的资料很多&#xff0c;最直接就是进官网校习。 二、效果展示 三、require的配置 require.config.js中可以配置我们的自定义模块的加载。 require.config({baseUrl: ".&…
阅读更多...
React中使用Ant Table组件

React中使用Ant Table组件

一、Ant Design of React http://ant.design/docs/react/introduce 二、建立webpack工程 webpackreact demo下载 项目的启动&#xff0c;参考 三、简单配置 1.工程下载下来之后&#xff0c;在src目录下新建目录“table”&#xff0c;新建app.js&#xff0c;内容如下。 import R…
阅读更多...
解决“Dynamic Web Module 3.0 requires Java 1.6 or newer.”错误

解决“Dynamic Web Module 3.0 requires Java 1.6 or newer.”错误

一、问题描述 1.错误截图如下。 2.设计的问题 在Eclipse中新建了一个Maven工程, 然后更改JDK版本为1.6, 结果每次使用Maven > Update project的时候JDK版本都恢复成1.5。 二、原因分析 Maven官方文档有如下描述&#xff1a; 编译器插件用来编译项目的源文件.从3.0版本开始, …
阅读更多...
解决cookie跨域访问

解决cookie跨域访问

一、前言 随着项目模块越来越多&#xff0c;很多模块现在都是独立部署。模块之间的交流有时可能会通过cookie来完成。比如说门户和应用&#xff0c;分别部署在不同的机器或者web容器中&#xff0c;假如用户登陆之后会在浏览器客户端写入cookie&#xff08;记录着用户上下文信息…
阅读更多...
React使用antd Table生成层级多选组件

React使用antd Table生成层级多选组件

一、需求 用户对不同的应用需要有不同的权限&#xff0c;用户一般和角色关联在一起&#xff0c;新建角色的时候会选择该角色对应的应用&#xff0c;然后对应用分配权限。于是写了一种实现的方式。首先应用是一个二级树&#xff0c;一级表示的是应用分组&#xff0c;二级表示的是…
阅读更多...
junit4进行单元测试

junit4进行单元测试

一、前言 提供服务的时候&#xff0c;为了保证服务的正确性&#xff0c;有时候需要编写测试类验证其正确性和可用性。以前的做法都是自己简单写一个控制层&#xff0c;然后在控制层里调用服务并测试&#xff0c;这样做虽然能够达到测试的目的&#xff0c;但是太不专业了。还是老…
阅读更多...
快速搭建springmvc+spring data jpa工程

快速搭建springmvc+spring data jpa工程

一、前言 这里简单讲述一下如何快速使用springmvc和spring data jpa搭建后台开发工程&#xff0c;并提供了一个简单的demo作为参考。 二、创建maven工程 http://www.cnblogs.com/hujunzheng/p/5450255.html 三、配置文件说明 1.application.properties jdbc.drivercom.mysql.jd…
阅读更多...
git亲测命令

git亲测命令

一、Git新建本地分支与远程分支关联问题 git checkout -b branch_name origin/branch_name 或者 git branch --set-upstream branch_name origin/branch_name 或者 git branch branch_name git branch --set-upstream-toorigin/branch_name branch_name 二、查看本地分支所关…
阅读更多...
mysql 7下载安装及问题解决

mysql 7下载安装及问题解决

mysql 7安装及问题解决 一、mysql下载 下载地址&#xff1a;https://www.mysql.com/downloads/Community (GPL) DownloadsMySQL Community Server (GPL)Windows (x86, 64-bit), ZIP ArchiveNo thanks, just start my download.二、mysql安装 解压到指定目录在mysql bin目录下打…
阅读更多...
tomcat开发远程调试端口以及利用eclipse进行远程调试

tomcat开发远程调试端口以及利用eclipse进行远程调试

一、tomcat开发远程调试端口 方法1 WIN系统 在catalina.bat里&#xff1a; 　　SET CATALINA_OPTS-server -Xdebug -Xnoagent -Djava.compilerNONE -Xrunjdwp:transportdt_socket,servery,suspendn,address8899 　　Linux系统 在catalina.sh里&#xff1a; 　　CATALINA_OPTS&q…
阅读更多...
webpack+react+redux+es6开发模式

webpack+react+redux+es6开发模式

一、预备知识 node, npm, react, redux, es6, webpack 二、学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入门教程 redux middleware 详解 Redux研究 React 入门实例教程 webpack学习demo NPM 使用介绍 三、工程搭建 之前有写过 webpackreactes6开发模式…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023