我的React前端工程化模板&组件库
2017-11-10 19:39
302 查看
react-template-easily
Desc:
react-template-easily 是一套以react技术搭建的项目模板,适用于移动端H5, webapp和hybirdApp开发。其中包含常用20+常用组件,精细计算的rem,以及诸多项目的实践。URL:
https://github.com/jinjiaxing/react-template-easilyDemo:
Demo展示(请使用chrome模拟移动端方式查看,或者使用手机查看)技术栈
react:16react-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
…
目录结构和文件说明
client 客户端主目录,PS:为将来SSR时加入server做准备,所以叫做client --actions redux全部action放入其中 --commonAction.jsx 通用的action放入其中 --pageHomeAction.jsx 首页Demo的Action --common 公用util文件夹 --constant 常量 --CommonActionName.jsx action全部名称 --Constant.jsx 常量变量集合 --StatisticConstant.jsx 自定义其他常亮 --img 公共图片 --style 公共css文件 --utils 公共util类 --Common.jsx 所有公用方法以及rem计算均在此文件中 --component 全部react组件 --common 公共组件自定义了一些常用组件 --组件持续更新中 --business 放入自身业务组件(没建立者文件夹,大家可自行建立) --pages 存放全部页面组件 --PageHome demo首页组件 --img 存放每个页面的图片 --_pageHome.scss 每个页面独立的样式文件 --PageHome.jsx 组件jsx文件 --reducers 全部reducers放入此文件夹 --commonReducer.jsx 通用reducer --mainReducer.jsx 用于连接各reducer --pageHomereduces.jsx demo主页的reducer --service http请求类库 --Service.jsx 用于ajax/jsonp请求的方法均在此处,应用了promise --store --store.jsx --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
developer
name: jinjiaxingcompany: baidu
mail: 34568305@qq.com
相关文章推荐
- React组件生命周期-正确执行初始化阶段的函数
- React-Native 组件练习-购物app侧滑菜单
- React组件通信 的几种方式-- 格式化文档
- react——组件
- React Native控件之ScrollView组件详解
- React-Native 组件之 Modal的使用详解
- React中父子组件间的通信问题
- 初学React:定义一个组件
- React Native组件之Navigation
- React-Native 基础(四)使用style定义组件的样式
- React Native 中组件的生命周期
- React.js 基础入门二--组件嵌套
- React Native之ViewPagerAndroid 组件
- React创建组件的三种方式及其区别
- 开发一个基于React Native的简易demo--视频组件+布局
- React官网(2)—组件和属性
- react-native组件封装与传值
- [React]组件的生命周期
- 关于react中组件通信的几种方式详解
- React-Native新列表组件FlatList和SectionList学习 | | 联动列表实现