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、我们运行浏览器

原文发布于微信公众号 - 前端人人(frontend_everyone)

原文发表时间:2018-04-09

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏用户2442861的专栏

html 学习(css class选择器)

文/某个胖子(简书作者) 原文链接:http://www.jianshu.com/p/802afaab545b 著作权归作者所有,转载请联系作者获得授权,并...

16610
来自专栏前端小叙

一分钟理清Vue-cli 代码构建步骤。

1、 $ npm install vue -cli -g $ vue init webpack project-name $ cd project-name...

328100
来自专栏Web 开发

看来已经很多人用SAE勒

今天把无觅插件For SAE的方法提交给了无觅官方,今晚他们回了邮件给我,说正好很多人找他们要,我就顺势谷歌了一下~

9710
来自专栏每日一篇技术文章

weex-12-组件switch

本节内容比较简单,创建一个switch.vue 来写本节的内容, 注意一点,本节内容请务必使用真机测试

58520
来自专栏Golang语言社区

go语言读取csv文件并输出的方法

本文实例讲述了go语言读取csv文件并输出的方法。分享给大家供大家参考。具体实现方法如下: package main import ( "encodi...

38680
来自专栏娱乐心理测试

小程序设置启动页面

77760
来自专栏Android知识点总结

html5常用控件

78320
来自专栏前端人人

React第三方组件4(状态管理之Reflux的使用②TodoList上)

本教程总共5篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React第三方组件4(状态管理之Reflux的使用①...

26950
来自专栏Angular&服务

cordova扫描二维码

20730
来自专栏nummy

使用jsTree树形控件【1】入门

部署环境使用压缩版的jsTree.min.js,如果是开发环境可以使用jsTree.js

20320

扫码关注云+社区

领取腾讯云代金券