手动搭建react webapp脚手架,快速开发武汉疫情h5页面

前言

由于此次疫情影响,只能呆在家中,最近在掘金看见好多疫情h5项目,例如山月大佬的《武汉肺炎疫情实时动态省市地图开发》,刚好最近有点时间,就用自己之前搭建好的的react移动端框架,快速搭建开发了一套h5页面,分享给大家。

页面展示

项目地址及项目预览

项目介绍

项目集成了react全家桶,集成移动端开发适配,例如1px问题,rem适配,px转rem,图片根据dpr加载相应像素的图片;支持组件异步加载等,拿来即可开发使用。脚手架实现完整功能如下:

  • react组件异步加载,提供两种方案,一种是es6的import,封装成高阶组件,另一种是通过react-loadable
//通过高阶组件异步加载组件
export default function asyncComponent({loader}){
   class AsyncComponent extends Component {
       constructor(props){
           super(props);
           this.state = {
               component: null
           }
       }
       componentDidMount() {
           //执行外部promise
           loader().then(res=>{
               this.setState({
                   component: res.default
               })
           })
       }
       render(){
           const C = this.state.component
           return C ? <C {...this.props}=""/> : null;
       }
   }
   return AsyncComponent;
}
  • webpack热更新
  • reducer热更新
if (module.hot) {
    module.hot.accept('./reducer/main', ()=>{
        const nextRootReducer = require('./reducer/main.js').default;
        store.replaceReducer(nextRootReducer)
    });
}
//多入口
function getEntry() {
    let entryMap = {};
    fs.readdirSync(pageDir).forEach((pathname) => {
        let fullPathName = path.resolve(pageDir, pathname);
        let stat = fs.statSync(fullPathName);
        let fileName = path.resolve(fullPathName, mainFile);

        //判断是文件并且入口文件存在
        if (stat.isDirectory() && fs.existsSync(fileName)) {
            entryMap[pathname] = fileName;
        }
    });
    return entryMap;
}
  • 集成react-router-dom,redux,react-redux,react-thunk,axios
  • 解决1像素问题,rem适配,图片适配不同dpr设备
  • 部署打包,采用gh-pages,使用npm run deploy自动发布git pages
  • 代码在仓库中,如有需要可点击查看代码

疫情h5程序

  1. 疫情h5程序是采用该脚手架快速搭建的h5页面,数据来源于丁香园,暂时使用抓取来的json数据,存放在本地data文件中。
  2. 我又在cloudflare中提供了数据接口(类似于serverless),可实时调用获取数据

快速开始

# 安装依赖
npm install

# 开发
npm run dev
# 打包发版
npm run deploy

deer-ui组件库

自己年前又写了一个react组件库deer-ui,项目包括脚手架的搭建,stylelint,eslint,commitlint以及自动打包发版,组件实现了按需加载,主题定制等功能。基本和react无缝衔接,前期第一版的基础组件已经开发完毕,欢迎拍砖建议...

组件库代码地址

组件库预览地址

原文链接:juejin.im

上一篇:重学css盒模型
下一篇:@beisen/ocean-date-picker-composite

相关推荐

  • 🌈 React 函数式组件优化

    1. React 性能优化思路 减少重新 render 的次数。 减少计算的量。主要是减少重复计算,对于函数式组件来说,每次 render 都会重新从头开始执行函数调用。

    7 天前
  • 🆘 一次理解清楚,为什么使用 React useEffect 中使用 setInterval 获取的值不是最新的

    Intro 这篇文章将通过一个使用 React Hook 常遇到的问题(stale state)入手,尝试理解 Hook 的内部运行逻辑。 废话不多说,直接看示例Sandbox。

    3 个月前
  • 高频数据交换下Flutter与ReactNative的对比

    (标题图片来自网络,侵删) 后端使用go写的socketio服务模拟期货行情数据,每10ms推送10条行情数据 ReactNative已经尽力优化了。 Flutter由于没flutter-socket...

    2 年前
  • 高性能迷你React框架 anu1.3.0 发布

    anujs1.3.0是一款高性能React-like框架,是目前世界上对React16兼容最好的迷你库。 自React16起,相继推出createContext,createPortal, creat...

    3 年前
  • 高德地图 react-amap 实战

    react-amap 是基于 React 的高德地图组件。 1. 获取地图示例 react-amap 作为高德地图在 React 中的实现,实际使用中不可避免的需要通过地图对象调用各种方法,reac...

    1 年前
  • 高品质 React UI 组件

    A high quality UI Toolkit, A Component Library for React 16+. 💘 Installation npm install isui --s...

    3 年前
  • 骚操作!在react中使用vuex

    原文地址 前言 笔者最近在学习使用react,提到react就绕不过去redux。redux是一个状态管理架构,被广泛用于react项目中,但是redux并不是专为react而生,两者还需要react...

    2 年前
  • 项目文档说明:react + Ant Design 的 blog-react-admin

    前言 此 blog-react-admin 项目是基于 蚂蚁金服开源的 ant design pro 之上,用 react 全家桶 + Ant Design 的进行再次开发的,项目已经开源,项目地址...

    2 年前
  • 项目中引入特殊字体【小程序、h5】包括canvas画图

    请看清楚我虚线下面所有的话。 横线上的废话随便你看不看。 说实话这个字体已经把我折腾的死去活来了一段时间,而且我们项目还经常要画分享图去刷朋友圈,默认字体没办法达到设计的那种效果,查了不少资料,也自己...

    2 年前
  • 面试题:Hooks 与 React 生命周期的关系

    React 生命周期很多人都了解,但通常我们所了解的都是 单个组件 的生命周期,但针对 Hooks 组件、多个关联组件(父子组件和兄弟组件) 的生命周期又是怎么样的喃?你有思考和了解过吗,接下来我们将...

    1 年前

官方社区

扫码加入 JavaScript 社区