简单易用的react工程化模板,适用于h5,webapp,hybrid开发
Switch branches/tags
Nothing to show
Clone or download
jinjiaxing
jinjiaxing update readme file
Latest commit 9253cad Aug 13, 2018

README.md

react-template-easily

Desc:

react-template-easily 是一套以react技术搭建的项目模板,适用于移动端H5, webapphybirdApp开发。其中包含常用20+常用组件,精细计算的rem,以及诸多项目的实践。

URL:

https://github.com/jinjiaxing/react-template-easily

Demo:

React Demo展示(请使用chrome模拟移动端方式查看,或者使用手机查看)

Preact Demo
大家可以看到Preact和React的Demo,都完美运行,目前并无差别

  • react runtime size react size

  • preact runtime size preact_size

大家可以看到,同样的结构在压缩后(gizip),react的大小是preact包的2.68倍,差距在100kb

截图

技术栈

  • react:16.4.2
  • react-dom:16.4.2
  • react-router-dom:4.3.1
  • redux:4.0.0
  • redux-thunk:2.3.0
  • react-redux:5.0.7
  • sass
  • postcss
  • webpack:4.16.3
  • iscroll:5
  • ...

目录结构和文件说明

├── client                                # c端主目录,为将来SSR时加入server做准备,所以叫做client
│   ├── actions                           # action目录
│      ├── commonAction.jsx               # 通用的action放入其中此文件
│      ├── pageHomeAction.jsx             # 首页Action文件(demo)  
│   ├── common                            # 通用类文件夹
│      ├── constant                       # 常量文件夹
│         ├── CommonActionName.jsx        # action全部名称写在此文件
│         ├── Constant.jsx                # 常量文件
│         ├── StatisticConstant.jsx       # 自定义常量(如埋点)
│      ├──img                             # 公共图片文件夹
│      ├──style                           # 公共css文件夹
│      ├──utils                           # 公共util类
│         ├──Common.jsx                   # 公用方法写在此文件 
│   ├── component                         # 组件文件夹
│      ├── common                         # 公共组件文件夹
│      ├── business                       # 业务组件文件夹  
├── pages                                 # 页面组件文件夹
│      ├── PageHome                       # 首页(demo)
│         ├──img                          # 页面文件夹
│         ├── _pageHome.scss              # 页面样式文件
│         ├── PageHome.jsx                # 页面文件  
├── reducers                              # reducers目录
│      ├── commonReducer.jsx              # 通用reducer文件
│      ├── mainReducer.jsx                # 用于连接各reducer文件
│      ├── pageHomereduces.jsx            # 首页reducer  
├── service                               # api请求目录
│      ├── Service.jsx                    # 自行封装的jsonp/ajax请求库文件  
├── store                                 # store目录
│      ├── store.jsx                      # store文件 
├── app.jsx                               # 父级入口文件
├── index.html                            # html文件
├── router.jsx                            # 路由文件

install & run

git clone https://github.com/jinjiaxing/react-template-easily.git
npm install
npm run dev
浏览器访问:0.0.0.0:8080

release

npm run release 或 sh ./build.sh 

preact dev&release

npm run dev:preact
npm run release:preact

如何切换react与preact,请点击此处

update

2017/10/22 新增Drawer组件
2017/12/01 修改Toast组件默认样式
2017/12/02 修改Toast组件结构
2018/01/02 更新全部组件风格
2018/01/04 添加InputField组件
2018/01/08 添加preact版本,支持一键切换preact和react
2018/04/17 更新Header组件back按钮回退问题
2018/05/02 babel-preset-es2015 -> babel-preset-env
2018/06/06 新增Scrollable组件(可拖拽面板)
2018/06/06 新增ListView组件(基于Jroll2的list组件)
2018/08/03 升级webpack4

developer