使用rekit构建react应用

2019/03/20

初始化和启动项目

rekit是一个react脚手架,类似于create-react-app,他能提供一个配置完整的react项目。

➜  ~ rekit create rekit-app

可以创建一个名称为rekit-app的项目。

安装依赖和启动项目

➜  cd rekit-app
➜ cnpm i
➜ npm start

6075端口是项目运行端口

6076端口是一个可视化的控制台,可以直接在网页上编码,这个东西叫做rekit-studio。

rekit-studio使用的UI组件库是antd,主要通过socket来监听文件的变化,可以直接在网页中发起请求修改本地的代码。

目录解构分析

rekit快速的构建了一个react app,这个app是前端渲染的单页面应用,不能支持后端渲染。

相对于redux我更加偏爱于灵活简洁的mobx,但是事实上redux的实现更加简单,同时也更加安全以及便于维护和测试。所以大多数复杂的项目都会优先选择redux,rekit的数据管理也是redux。

6076的端口的dashboard是src下的主要文件,主要包括features和others,用ide打开项目,可以发现dashboard里的others其实指的就是除了features以外的代码,包括common, images, styles, index.js和Root.js。其实除了common以外其他的代码就很一目了然了,不需要多做介绍。

common目录

common目录下有两个文件configStore和rootReducer是用来统一配置store的,而history和routeConfig是用来统一配置路由的。

features目录

features目录相对来说复杂一点,由于前端的页面并不是按照数据边界来划分模块的,所以这个文件夹的名字并不是叫做modules。而大多数的后端应用的这个地方都会叫做modules,看第一眼的时候很不习惯,这里不叫做pages,不叫做components,非要特立独行的叫做features,显得很另类,但是确实这个单词用来形容这个地方的划分很贴切,很难想到更合适的名字了。

features下边会有多个文件夹,每个文件夹称作一个feature

点开home文件夹。可以看到一个redux文件夹,和一些其他的文件。

index.js是用来整合这个feature的所有页面的,然后被route.js引入然后根据路由管理页面

route.js是用来管理这个feature所覆盖的路由的,然后会被/src/comon/routeConfig.js全部引入统一管理

style.less是用来整合所有的样式,然后被/src/styles/index.less全部引入

其他的是一个Page.js和一个Page.less可以理解为组件或者页面,一个features下边会有多个components或者pages。

redux文件夹下边会有actions.js,constants.js,initialState.js,reducer.js,以及其他的添加的store文件。

每个store文件会包括一个action和一个reducer

initialState.js是初始化的状态

constants.js是所有action常量保存的地方

actions.js会整合所有的store中的action

reducer.js会整合虽有的store中的reducer,然后再被/src/common/rootReducer统一引入放在同一个store中。

以上便是一个rekit-app的代码解构和工作机制。

配合rekit studio使用

脚手架的好处是代替很大一部分的人工编码,rekit生成的项目的代码组织结构非常统一,所以可以直接通过rekit studio生成基本代码,包括添加components和actions。然后只需要修改对应的部分就好了,重复性的工作通过可视化工具完成即可。

小小的反思

这也是前端工具链整合的一个趋势,当然并不是完全赞成这种开发方式,我相信前端的模块化或者所谓的feature划分是非常难的,对于组件化开发的前端业务来说,这个工具的局限性还是很大的

1. features的开发方式更像是模块化的开发,显然前端是组件化开发的

2. 组件之间的关系非常复杂,层次感很强

3. UI组件,功能组件,副作用组件,高阶组件,业务组件各自的特点很不相同

4. 前端代码的组织方式过于依赖产品和UI,而不是简单的程序设计的好就可以。

也就是说前端的开发方式,远远比rekit所作的事情比较复杂,灵活多变,固定模式脚手架局限比较大。

但是这种组织结构是非常值得学习的,rekit studio可以很快的生成代码,极大的简化了开发速度和减少了重复性工作。

嗨,请先登录

加载中...
(๑>ω<๑) 又是元气满满的一天哟