资讯专栏INFORMATION COLUMN

react-template-easily(简单易用的react前端工程化模板)

he_xd / 2449人阅读

摘要:是一套以技术搭建的项目模板,适用于移动端和开发。其中包含常用常用组件,精细计算的,以及诸多项目的实践。

react-template-easily Desc:

</>复制代码

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

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

Demo:

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

技术栈

react:16

react-dom:16

react-router-dom:4

redux:3.7.2

redux-thunk:2.2

react-redux:5.0.6

sass

postcss

webpack:3.8.1

iscroll:5

...

目录结构和文件说明

</>复制代码

  1. client 客户端主目录,PS:为将来SSR时加入server做准备,所以叫做client
  2. --actions redux全部action放入其中
  3. --commonAction.jsx 通用的action放入其中
  4. --pageHomeAction.jsx 首页DemoAction
  5. --common 公用util文件夹
  6. --constant 常量
  7. --CommonActionName.jsx action全部名称
  8. --Constant.jsx 常量变量集合
  9. --StatisticConstant.jsx 自定义其他常亮
  10. --img 公共图片
  11. --style 公共css文件
  12. --utils 公共util类
  13. --Common.jsx 所有公用方法以及rem计算均在此文件中
  14. --component 全部react组件
  15. --common 公共组件自定义了一些常用组件
  16. --组件持续更新中
  17. --business 放入自身业务组件(没建立者文件夹,大家可自行建立)
  18. --pages 存放全部页面组件
  19. --PageHome demo首页组件
  20. --img 存放每个页面的图片
  21. --_pageHome.scss 每个页面独立的样式文件
  22. --PageHome.jsx 组件jsx文件
  23. --reducers 全部reducers放入此文件夹
  24. --commonReducer.jsx 通用reducer
  25. --mainReducer.jsx 用于连接各reducer
  26. --pageHomereduces.jsx demo主页的reducer
  27. --service http请求类库
  28. --Service.jsx 用于ajax/jsonp请求的方法均在此处,应用了promise
  29. --store
  30. --store.jsx
  31. --app.jsx 相当于页面的父容器组件进行一些通用处理
  32. --index.html html文件
  33. --router.jsx 入口文件,也是路由文件
install & run

</>复制代码

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

</>复制代码

  1. npm run release 或 sh ./build.sh
preact dev&release

</>复制代码

  1. npm run dev:preact
  2. npm run release:preact

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

update

</>复制代码

  1. 2017/10/22 新增Drawer组件
  2. 2017/12/01 修改Toast组件默认样式
  3. 2017/12/02 修改Toast组件结构
  4. 2018/01/02 更新全部组件风格
  5. 2018/01/04 添加InputField组件
  6. 2018/01/08 添加preact版本,支持一键切换preact和react
developer

name: jinjiaxing

company: baidu

mail: 34568305@qq.com

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/90043.html

相关文章

  • react-template-easily(简单易用react前端程化模板)

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

    rottengeek 评论0 收藏0
  • 前端每周清单第 48 期:Slack Webpack 构建优化,CSS 命名规范与用户追踪,Vue.

    摘要:发布是由团队开源的,操作接口库,已成为事实上的浏览器操作标准。本周正式发布,为我们带来了,,支持自定义头部与脚部,支持增强,兼容原生协议等特性变化。新特性介绍日前发布了大版本更新,引入了一系列的新特性与提升,本文即是对这些变化进行深入解读。 showImg(https://segmentfault.com/img/remote/1460000012940044); 前端每周清单专注前端...

    sean 评论0 收藏0
  • aotoo-hub,一体式大前端架构

    摘要:年底了,开源一套我们的大前端架构,小伙伴们都用得很爽的。听说的人明年会发财文档是一套正式上线的大前端解决方案。是一套前端端彼此相亲相爱不分离,你中有我,我中有你的大前端解决方案。 年底了,开源一套我们的大前端架构aotoo-hub,小伙伴们都用得很爽的。 GITHUB -- 听说star的人明年会发财 文档 aotoo-hub是一套正式上线的大前端解决方案。迭代的这2年多的时间,...

    raoyi 评论0 收藏0
  • 前端每周清单半年盘点之 Angular 篇

    摘要:延伸阅读学习与实践资料索引与前端工程化实践前端每周清单半年盘点之篇前端每周清单半年盘点之与篇前端每周清单半年盘点之篇 前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点;分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公众号(ID:frontshow),及时获取前端每周清单;本文则是对于半年来发布的前端每周清单...

    LeviDing 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<