React多页面应用脚手架-v1.3.0

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

转载于:https://blog.51cto.com/feman/2328257

React多页面应用脚手架-v1.3.0相关推荐

魔众相册系统 v1.1.0 页面SEO优化，系统升级调整
轻量级的相册系统魔众相册系统发布v1.1.0版本,新功能和Bug修复累计13项,页面SEO优化,系统升级调整. 2021年12月08日魔众相册系统发布v1.1.0版本,增加了以下13个特性: ·[新 ...
魔众一物一码溯源防伪系统 v1.2.0 增加二维码显示页面，后台升级
魔众一物一码溯源防伪系统支持批量生成.管理防伪码.溯源码,帮助您更好的管理商品防伪码. 魔众一物一码溯源防伪系统发布v1.2.0版本,新功能和Bug修复累计10项,增加二维码显示页面,后台升级. 20 ...
魔众一物一码溯源防伪系统 v1.1.0 页面SEO优化，系统升级调整
魔众一物一码溯源防伪系统魔众一物一码溯源防伪系统发布v1.1.0版本,新功能和Bug修复累计8项,页面SEO优化,系统升级调整. 2021年12月08日魔众一物一码溯源防伪系统发布v1.1.0版本, ...
webpack+react多页面开发架构
项目已经升级为最新版本参考react-multi-page-app webpack在单页面打包上应用广泛,以create-react-app为首的脚手架众多,单页面打包通常指的是将业务js,css打包 ...
免费的可视化Web报表工具，JimuReport v1.5.0版本发布
项目介绍积木报表,一款免费的可视化Web报表工具,像搭建积木一样在线拖拽设计!功能涵盖,数据报表.打印设计.图表报表.大屏设计等! 秉承"简单.易用.专业"的产品理念,极大的降低 ...
AEAI WM v1.6.0 升级说明，开源工作管理系统
1 升级说明 AEAI WM v1.6.0版是AEAI WM v1.5.0版工作管理系统的升级版本,本次升级的系统是基于AEAI DP 3.8.0_20170228进行打包部署的,对产品中的功能及BU ...
域控制器升级的先决条件验证失败新建_快应用开发工具升级v1.4.0
IDE v1.4.0 更新日志(Release Notes) 一.[新增]IDE编译配置项二.[新增]语法插件增加template中方法自动补全三.[优化]IDE web预览模块增加编译失败页面, ...
Java 洛谷提交完题目的代码之后一直停留在 ( 正在等待编译……),刷新页面之后，显示 Unaccepted 0分
在洛谷刷题的时候遇到了这样的问题: 提交完题目的代码之后一直停留在 ( 正在等待编译--),刷新页面之后 ,显示 Unaccepted 0分解决方法: 1.检查你的类名是否是 Main 2.检查你的 ...
Spark编程指南V1.4.0(翻译)
Spark编程指南V1.4.0 · 简介 · 接入Spark · Spark初始化 · 使用Shell · 在集群上部署代码 · ...

React多页面应用脚手架-v1.3.0

安装及使用

目录结构调整

Demo页面

React多页面应用脚手架-v1.3.0相关推荐

最新文章

热门文章