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

2020-02-13

前言

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

页面展示

项目地址及项目预览

项目介绍

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

  • <input checked="" disabled="" type="checkbox"> react组件异步加载,提供两种方案,一种是es6的import,封装成高阶组件,另一种是通过react-loadable</input>

//通过高阶组件异步加载组件
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;
}

  • <input checked="" disabled="" type="checkbox"> webpack热更新</input>
  • <input checked="" disabled="" type="checkbox"> reducer热更新</input>

if (module.hot) {
    module.hot.accept('./reducer/main', ()=>{
        const nextRootReducer = require('./reducer/main.js').default;
        store.replaceReducer(nextRootReducer)
    });
}

  • <input checked="" disabled="" type="checkbox"> 自己手动封装的react-redux,点击查看代码</input>
  • <input checked="" disabled="" type="checkbox"> webpack代码分割</input>
  • <input checked="" disabled="" type="checkbox"> 封装fetch请求 点击查看代码</input>
  • <input checked="" disabled="" type="checkbox"> babel,eslint,postcss-px-to-viewport配置</input>
  • <input checked="" disabled="" type="checkbox"> 多入口打包</input>

//多入口
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() &amp;&amp; fs.existsSync(fileName)) {
            entryMap[pathname] = fileName;
        }
    });
    return entryMap;
}

  • <input checked="" disabled="" type="checkbox"> 集成react-router-dom,redux,react-redux,react-thunk,axios</input>
  • <input checked="" disabled="" type="checkbox"> 解决1像素问题,rem适配,图片适配不同dpr设备</input>
  • <input checked="" disabled="" type="checkbox"> 部署打包,采用gh-pages,使用npm run deploy自动发布git pages</input>
  • <input checked="" disabled="" type="checkbox"> 代码在仓库中,如有需要可点击查看代码</input>

疫情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盒模型
下一篇:前端|LeetCode155_最小栈
相关教程
关注微信

扫码加入 JavaScript 社区

相关文章

首次访问,需要验证
微信扫码,关注即可
(仅需验证一次)

欢迎加入 JavaScript 社区

号内回复关键字:

回到顶部