react-template-easily

Desc：

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

URL:

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

Demo:

React Demo展示（请使用chrome模拟移动端方式查看，或者使用手机查看）

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

• react runtime size

• preact runtime 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

• name: jinjiaxing
• company: baidu
• mail: [email protected]