React多页面应用3(webpack4 多页面实现)
本教程总共9篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章!
1、React多页面应用1(webpack4 开发环境搭建,包括热更新,api转发等)---2018.04.04
2、React多页面应用2(webpack4 处理CSS及图片,引入postCSS,及图片处理等)---2018.04.08
3、React多页面应用3(webpack4 多页面实现)---2018.04.09
4、React多页面应用4(webpack4 提取第三方包及公共组件)---2018.04.10
5、React多页面应用5(webpack4 多页面自动化生成多入口文件)---2018.04.11
6、React多页面应用6(webpack4 开发环境打包性能小提升)---2018.04.12
7、React多页面应用7(webpack4 生产环境配置)---2018.04.13
8、React多页面应用8(webpack4 gulp自动化发布到多个环境,生成版本号,打包成zip等)---2018.04.16
9、React多页面应用9(webpack4 引入eslint代码检查)---2018.04.17
开发环境:Windows 8,node v8.9.1,npm 5.5.1,WebStorm 2017.2.2
1、实现多页面,新建shop页面
app->component 下新建shop目录,并创建Index.jsx
完整代码
import React from 'react';
import '../../public/css/common.pcss';
import '../../public/css/shop.pcss';
class Index extends React.Component {
render() {
return (
<div className="cont">
<div className="top">
<div>这是头部</div>
<div>
<i className="logo"/>
</div>
<div className="nav">
<a href="/index.html">首页</a> <a href="/shop.html">商城</a>
</div>
</div>
<div className="shop">
这是商城
</div>
<div className="bottom">
这是底部
</div>
</div>
);
}
}
export default Index;
2、建立shop.css
app->public->css下新建shop.pcss
完整代码
.shop {
color: blue;
}
3、新建common.pcss
app -> public ->css 下
.cont {
.top {
color: #FF9302;
.logo {
display: inline-block;
width: 200px;
height: 200px;
background-image: url("../img/ico-header-logo.png");
background-size: contain;
}
}
.bottom {
color: #F00000;
}
}
4、修改index.pcss
.index{
color: brown;
}
5、修改首页Index.jsx
import React from 'react';
import '../../public/css/common.pcss';
import '../../public/css/index.pcss';
class Index extends React.Component {
render() {
return (
<div className="cont">
<div className="top">
<div>这是头部</div>
<div>
<i className="logo"/>
</div>
<div className="nav">
<a href="/index.html">首页</a> <a href="/shop.html">商城</a>
</div>
</div>
<div className="index">
这是首页
</div>
<div className="bottom">
这是底部
</div>
</div>
);
}
}
export default Index;
6、新建shop入口文件
entryBuild 目录下 新建shop.js
import React from 'react';
import ReactDOM from 'react-dom';
import Index from '../app/component/shop/Index.jsx';
ReactDOM.render(<Index/>,document.getElementById('app'));
你可能会发现这个shop.js和index.js文件很像,那么以后我们要建更多页面是不是多要手动来建啊!答案是不会的,我们会在下面教程讲解如何自动化生成这些页面!
7、修改webpack入口文件
config -> webpack -> webpack.base.conf.js
新增如下代码
'shop':'./entryBuild/shop.js'
8、增加shop.html页面
devBuild 页面下 新建shop.html
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="telephone=no" name="format-detection">
<title>react1</title>
</head>
<body>
<div id="app"></div>
<script type=text/javascript src=js/shop.js></script>
</body>
</html>
是不是发现这个页面也很重复,对的,会让他自动化生成!
9、我们运行浏览器
- CSS概要
- 如何使用 scikit-learn 为机器学习准备文本数据
- 使用jQuery Validation插件来验证表单
- 如何用Wireshark捕获USB数据?
- QEMU 2: 参数解析
- [WCF安全系列]认证与凭证:X.509证书
- 深度学习:能击败欧洲围棋冠军,还能防恶意软件
- Metasploit中的JAVA反向TCP做法的研究
- 商业级别Fortify白盒神器介绍与使用分析
- [WCF安全系列]消息的保护等级[上篇]
- QEMU 1: 使用QEMU创建虚拟机
- [WCF安全系列]绑定、安全模式与客户端凭证类型:NetNamedPipeBinding、NetTcpBinding与NetMsmqBinding
- 操作系统级虚拟化概述
- 让javascript中的异步请求同步起来
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- python 操作excel(附案例)
- 如何在 Spring Boot 中 读写数据
- MyBatis 多表操作
- 从0打造wordpress插件wp2oc fileshare (1) – 将wp存储后端做进owncloud
- Python 爬虫保存图片
- 抛物线法、牛顿法、弦截法求根实例
- org.springframework.web.client.ResourceAccessException: I/O error on POST request....
- 升级MySQL InnoDB Cluster的元数据
- 数据分析项目-数据分析岗位近况分析
- Eureka 的服务发现 Discovery 简单配置
- python自动化之JS处理滚动条
- Docker 中启动 ZooKeeper
- 将MySQL复制限制为基于行的事件
- 在tinycorelinux上安装lxc,lxd (1)
- Ubuntu16.04下安装python3.6