react 生态体系架构，结合 react、router、redux、saga 实现
react 生态体系架构，结合 react、router、redux、saga 实现
React UI框架
共42Star
详细介绍
winterfall v 2.0.0
—— Winter is coming
目录结构
-
app/：源代码根目录； -
Components/：功能性模块，无法通过url单独导航到；Button/：模块名字，可通过import方式导入到实际页面；
index.js：默认内容；styles.css：默认样式；
-
Modules/：页面大模块，包含几大业务模块;Index/：首页模块
-
Images/: 图片目录； -
Pages/: 页面子模块，可通过url单独导航到；IndexPage:index.js：默认内容；styles.css：默认样式；selectors.js：所有从store中获取内容的函数；
-
Store: 数据流页面，数据存储及流转等过程；action.js：所有的action函数（Redux）；actionType.js：所有的actionType定义（Redux）；reducer.js：所有store变动函数（Redux）；sagas.js：所有saga函数，主要是和fetch进行配合；
-
Utils/：工具模块；-
request.js：异步请求工具； -
asyncInjectors：异步注入saga和reducer工具；
-
-
app.js：项目总入口； -
index.html：项目主页面模板； -
routes.js：项目所有路由，配置url； -
reducers.js：项目基础reducer以及所有其他reducer的集合； -
store.js：项目构建store，加入所有的依赖； -
docs/：存放开发过程中产生的开发文档； -
***.md：描述信息的markdown文件； -
server/：Node服务器配置信息，用于本地研发； -
.gitignore：屏蔽git版本控制路径； -
.eslintrc:ESLint配置文件； -
package.json：控制npm依赖包； -
README.md：项目基础描述信息； -
webpack.base.config.js：webpack基础配置信息； -
webpack.dev.config.js：webpack开发配置信息； -
webpack.prod.config.js：webpack产品配置信息；
安装指令
$ git clone <url>
$ npm install
国内可以选择使用cnpm--点击这里
项目启动
$ npm run start
打开游览器，地址栏输入http://localhost:8080；
项目检测
$ npm run lint
引入 eslint-->点击这里 代码规范检测机制。
检测内容详见 .eslintrc 的配置，具体涵盖如下几项：
- 箭头函数参数使用圆括号；
- 箭头函数体使用大括号；
- object 末尾加逗号；
- 使用一致的缩进（暂时除去了这项检测，无法配置成'tab'，请自觉使用 tab 完成缩进）；
- 禁止对 function 的参数进行重新赋值，参数的任何属性值变动不会报错；
- 禁用 console，出现 console 会出警告；
- 要求使用模板字面量而非字符串连接；
- 要求对象字面量的简写或非简写一致性；
- 其他详见: eslint-plugin-import、 eslint-plugin-jsx-a11y、 eslint-plugin-react、 eslint-plugin-redux-saga
Sublime ESlint 插件
- SublimeLinter
- SublimeLinter-contrib-eslint
License
项目更新日志
v2.0.0
- 为加强暂存数据的有效管理，引入大模块的概念，将原有Page的方式修改为以模块的形式 进行组织，具体方式参见目录结构Modules部分。
- Modules目录下包含Base、Load、Login、Index等模块，Base是基础框架模块，Load是资源 信息加载模块，Login是用户登录和退出模块，Index是首页模块。
- 在项目的webpack配置文件中添加了HtmlWebpackPlugin中favicon的配置项。
- 基于winterfall 2.0版本，针对项目中可能运用插件制作了Demo，主要包括以下几个方面：
- Ant Design，内容详见分支demo_antd；
- 百度地图开放API，内容详见分支demo_bmap；
- 开源地图引擎Leaflet，内容详见分支demo_leaflet；
- 三维地理信息开发API CityMaker，内容详见分支demo_citymaker；
- JavaScript 的图表库 ECharts，内容详见分支demo_echatrs；
- ecidi数字化研发部BIM模型显示控制插件DGN 插件（WebBIM），内容详见分支demo_dgn；
- 360全景图加载，借助720yun平台实现，内容详见分支demo_720yun；
v1.1.0
- 新增图片和背景图demo，通过require能通过js动态实现图片路径的变动。
- 新增代码检测机制。
- 根据新的代码检测机制调整代码。
- 完成代码检测机制的文档内容。
-
87 Star
-
8 Star
