react-multi-page-app是一个基于react和webpack的多页面应用架构,通过编译生成对应目录结构清晰的静态页面,实现多页面便捷开发维护。1.3.0 版本对项目整体做了一个全面的升级,添加修改的以下几个方面:

  • 增加项目创建命令rppx-cli
  • 创建Demo展示页面
  • 完善修改REAMDME(中文/英文)
  • 增加了redux的使用
  • 优化目录结构
  • 优化整体代码

安装及使用

全局安装rppx-cli命令并创建自己的react多页项目

安装rppx-cli

$ npm install rppx-cli -g

创建react多页项目

$ rppx init my-react

安装依赖

$ npm install

开发环境

$ npm run dev

编译打包

$ npm run build

运行

$ npm start

自动打开浏览器浏览页面 开发 http://localhost:3100 生产 http://localhost:3118

创建新页面

    1. 在src下创建一个文件目录
    1. 在新创建的文件目录下添加index.js(必须,因为是webpack打包入口文件)
    1. 在新创建文件夹下添加pageinfo.json(非必须) 供html插件使用
    1. npm run dev开发
|-- src
|-- index/
|-- page2/
|-- index.js
|-- pageinfo.json

目录结构调整

v1.3.0 对整个文件结构做了优化

  • 将将页面文件放在src下的pages里统一管理
  • 增加了store文件夹放redux相关文件。
  • 对整体文件命名以及结构做了大幅度调整

Demo页面

http://www.h5cool.com/react-multi-page-app/demo/

  • home页为一个简单预览页
  • todo页是一个基于react-redux的todolist页面
  • 整页排版使用bulma.css

完整代码参考项目react-multi-page-app

React多页面应用脚手架-v1.3.0的更多相关文章

  1. webpack+react多页面开发(二)-终极架构

    webpack4+react16多页面架构 webpack在单页面打包上应用广泛,以create-react-app为首的脚手架众多,单页面打包通常指的是将业务js,css打包到同一个html文件中, ...

  2. webpack构建react多页面应用

    写这个的初衷是很难找一个简洁的项目脚手架,很多脚手架都有很多依赖,光看依赖就要很久,所以自己参照网上的内容,弄个这么一个简单的多页面的脚手架. 利用creat-react-app 新建一个react应 ...

  3. FineUI(专业版)v1.2.0 和 FineUI(开源版)v4.1.1 同时发布!

    FineUI(开源版)v4.1.1 (建议所有 v4.x 升级到此版本):http://fineui.com/demo/ +2014-08-15 v4.1.1        -修正Form中表单字段设 ...

  4. 读阿里巴巴Java开发手册v1.2.0之工程结构有感【架构篇】

    首先,把昨天那俩条sql语句的优化原因给大家补充一下,第一条效率极低,第二条优化后的,sql语句截图如下: 经过几个高手的评论和个人的分析: 第一条sql语句查询很慢是因为它首先使用了in关键字查询, ...

  5. 读阿里巴巴Java开发手册v1.2.0之编程规约有感【架构篇】

     不为过去蹉跎,改变当下. 为什么开篇就送这么一句话给大家,我相信很多处于1-3年码龄的哥们儿们,在平时的编码历程中编码的个性可能是多彩的,每个人都有每个人特定的风格,但是我们现在这么随意写,以后这么 ...

  6. AEAI CRM V1.6.0 升级说明,开源客户关系管理系统

    1 升级说明 AEAI CRM v1.6.0版是AEAI CRM v1.5.2版客户关系管理系统的升级版本,本次版本是基于AEAI DP v3.8.0_20170228进行打包部署的,升级内容主要是针 ...

  7. AEAI HR开源人力资源管理v1.6.0发版公告

    1 升级说明 AEAI HR v1.6.0版是AEAI HR v1.5.2版人力资源管理系统的升级版本,本次升级的系统是基于AEAI DP 3.8.0_20170228进行打包部署的,升级内容主要是针 ...

  8. React 列表页面传递参数

    React 列表进入详情页面 首先安装 react-router-dom (4.0) npm/yarn install react-router-dom 路由跳转配置 列表 父组件 this.prop ...

  9. AEAI WM v1.6.0 升级说明,开源工作管理系统

    1 升级说明 AEAI WM v1.6.0版是AEAI WM v1.5.0版工作管理系统的升级版本,本次升级的系统是基于AEAI DP 3.8.0_20170228进行打包部署的,对产品中的功能及BU ...

随机推荐

  1. 运行批处理文件怎么不显示DOS命令窗口

    运行批处理文件怎么不显示DOS命令窗口   BAT没法不显示DOS窗口.你可以考虑用脚本保持以下到文本文件,重命名为AutoUp_ddyy.vbs set WshShell = WScript.Cre ...

  2. Windows核心编程:第9章 用内核对象进行线程同步

    Github https://github.com/gongluck/Windows-Core-Program.git //第9章 用内核对象进行线程同步.cpp: 定义应用程序的入口点. // #i ...

  3. c#中的几种Dialog

    1.OpenFileDialog private void FileOpen_Click(object sender, EventArgs e) { OpenFileDialog openFile = ...

  4. SQL注入之PHP-MySQL实现手工注入-字符型

    SQL注入,就是通过把SQL命令插入到Web表单提交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意的SQL命令.具体来说,它是利用现有应用程序,将(恶意的)SQL命令注入到后台数据库引擎 ...

  5. 跟着刚哥学习Spring框架--通过XML方式配置Bean(三)

    Spring配置Bean有两种形式(XML和注解) 今天我们学习通过XML方式配置Bean 1. Bean的配置方式 通过全类名(反射)的方式   √ id:标识容器中的bean.id唯一. √ cl ...

  6. 【Vue】【Router】手动跳转用 this.$router.push() 时 $router 未定义的问题

    初入Vue,手写路由跳转时的问题: toXxxRoute: () => { this.$router.push({'path': '/xxx', 'name': 'xxx'}) } 由于使用了箭 ...

  7. 阿里语音识别(语音转文字)java调用全程手把手详解-适合中小学生快速上手

    阿里语音识别服务java调用全程手把手详解-适合中小学生快速上手 阿里语音识别与百度语音识别的调用对比: 用例:1分30秒的录音文件    百度用时:3秒    阿里用时:30秒    识别准确率来看 ...

  8. 使用命令执行 sql 脚本文件

    使用命令执行 sql 脚本文件 方法: 在 Windows 下使用 cmd 命令执行(或 Unix 或 Linux 控制台下)[Mysql的bin目录]\mysql –u用户名 –p密码 –D数据库名 ...

  9. Windows下的Jdk 1.7*安装并配置(图文详解)

    不多说,直接上干货! 很多人很少去想,为什么在windows下,安装完Jdk的安装包之后,还需要去配置环境变量,只是知道要这么去做,没有想过为什么要去这么做? 答:由于java是平台无关的 ,安装jd ...

  10. 第十五章-class类文件结构

    参考博文: (1)关于class的签名Signature (2)关于访问标识 (3)关于Class中的Signature属性 (4)附录1 常量池解析 (5)附录2 方法解析 (6)Class文件结构 ...