87

react-template-easily | 简单易用的react工程化模板，适用于h5，webapp，hybrid开发

 6 years ago
source link: https://jinjiaxing.github.io/react-template-easily/?
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

react-template-easily

Desc：

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

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，请点击此处](https://github.com/jinjiaxing/react-template-easily/issues/10)

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


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK