北京网站备案负责人变更,网页版传奇如何作弊?,国内室内设计师排名,南宁建企业网站公司引言 由于 10 月份做的 React Native 项目没有使用到 Redux 等库#xff0c;写了一段时间想深入学习 React#xff0c;有个想法想做个 demo 练手下#xff0c;那时候其实还没想好要做哪一个类型的#xff0c;也看了些动漫的#xff0c;小说阅读#xff0c;聚合资源的开源…引言 由于 10 月份做的 React Native 项目没有使用到 Redux 等库写了一段时间想深入学习 React有个想法想做个 demo 练手下那时候其实还没想好要做哪一个类型的也看了些动漫的小说阅读聚合资源的开源项目。由于正好在学习开源的 Android 小说阅读器 -- 任阅开始边学边做已完成的功能列在下面。项目地址 在这里如果有好的意见欢迎提 issue或pr。 效果图 目标功能 [x] 排行榜 -- 完成[x] 书籍详情 -- 完成[x] 阅读书籍 -- 完成[x] 书单推荐 -- 完成[x] 搜索书籍 -- 完成[x] 精选书籍 -- 完成[x] 分类书籍 -- 完成[x] 主题书单 -- 完成[x] 书单详情 -- 完成[x] 主 页 -- 完成目录结构 .
├─actions #redux的action,业务逻辑
├─components #页面容器
│ └─common #公共目录
│ ├─component-module #封装的组件
│ ├─images #项目图片
│ │ └─icon
│ └─style #组件样式
├─modules #公用模块
│ ├─api #管理api请求类
│ └─constants #公共字段类
├─reducers #redux中的reducers处理action发送的数据流
├─router #路由管理模块
├─store #redux中的store,联结reducers
└─template #存放html模版
. 项目的初始结构和说明已罗列如上。 下面对目录结构作以下说明 项目最初始是参考 react-pxq 初始化的。中间件引人日志中间件 —— redux-logger异步 API 调用 —— redux-thunk 等;component-module 和 components 存放的都是 react 组件区别是容器组件就放在components中和模块组件(比如左侧菜单组件、书籍列表组件等)就放到 component-module中;页面状态等公共部分最好是独立起来统一管理;跨域配置使用 pathRewrite 字段需要注意 webpack-dev-server 的版本准备工作 整理 API学习 Redux(搭建脚手架)API 数据 数据来源主要是两个地方一个是开源的Android项目与RN版本的数据另一个是追书神器h5移动端数据跨域网上查了不少方法考虑到便捷使用反向代理的方式处理学习 Redux 刚开始我差不多用一个星期多学习了 Github 上的 从零开始学 ReactJSReactJS 101基本上每一天看个 1-2 章玩的也很开心浅显易懂适合初学者阅读。 前面 8 章主要是熟悉接下来会用到的基础概念当然每一章讲完理论后面都会有例子自己可以动手实践加深对于前面概念的理解。 后面 9、10 两章开始运用上面学到的内容做一个简单的项目。 接着是用了 5-6 天学习网上开源项目的脚手架 —— 一个 react redux 的完整项目 和 个人总结基本上是看 参考所使用的库、编译打包的脚本以及 redux 代码。 最后大概花了 3 天看了阮一峰老师写的 Redux 入门教程 这部分内容是后面在搭建项目整体结构的时候看的对于 reducers、action、store 的内容比较深入加深理解。 技术栈 虽然列了众多核心库但是自己也谈不上熟练运用所以列了一些遇到的问题和后期改进的东西。Webpack(3.10.0) 本项目主要用了第三方的脚手架学习了反向代理部分当然自己也搭建过 webpack后续会升级 webpack。这里提下反向代理部分关于使用 webpack-dev-server 进行配置反向代理的时候如果使用 pathRewrite 到属性需要注意 webpack-dev-server 版本这个属性是在 1.15.0 中不然是不起作用的。特此说明网上查到相同问题没有这个解释以免浪费时间。升级Webpack到3.10版本并更新其他老的包比如file-loader,css-loader等出现的问题在下发表格中。Webpack1.x升级到Webpack3.10 问题1.x3.10备注参考webpack 2 cannot resolve empty extensionsextensions数组中不能出现空字符或者字符串resolve: {extensions: [,.css]}resolve: {extensions: [.css]}参考1Error: Chunk.entry was removed. Use hasRuntime()extract-text-webpack-plugin: ^1.10.0,extract-text-webpack-plugin: ^2.1.2,版本问题参考1Error: Breaking change: extract now only takes a single argument. Either an options object *or* the loader(s).loader: ExtractTextPlugin.extract(style, [css, autoprefixer]),ExtractTextPlugin.extract({ fallback: style-loader, use: css-loader })新的版本只支持一个参数npm run dev 命令运行结果错误提示找不到API SchemamodulesDirectoriesmodules属性名称变更npm run dist 命令运行结果错误提示找不到OccurenceOrderPluginnew webpack.optimize.OccurenceOrderPlugin(),newwebpack.HotModuleReplacementPlugin(),new webpack.NoErrorsPlugin(),new webpack.optimize.UglifyJsPlugin()new webpack.HotModuleReplacementPlugin(),new webpack.optimize.UglifyJsPlugin()移除了OccurenceOrderPlugin 和 NoErrorsPlugin参考1Redux 简单的讲他是一个管理单向数据流的框架根据业务复杂度可以把控其中颗粒度。一开始学习的时候感觉反而把项目复杂化看原理也是半懂不懂后面不断实践理解前面看的内容总归理论要与实践结合起来。 模型如下简单的数据流向可以看作 View - Action - (Middleware) - ReducerReact-router(2.x) react-router(2.x)与react-router(4.x)的还是不同的当然主要是写法上所以没更新到4.0 另外 发布打包时使用nginx等应用服务器托管的时候需要配置下所用路由走index.html文件不然路由会被拦截。 Antd(2.13) antd是蚂蚁金服体验技术部经过大量的项目实践和总结沉淀出的一个中台设计语言 Ant Design使用者包括蚂蚁金服、阿里巴巴、口碑、美团、滴滴等一系列知名公司其中包括了移动端Web端Pro(最近刚出)遇到错误可以翻看 Antd的issues基本能解决。提 Issues 的话要符合一定规范一开始感觉麻烦后来看了 提问的智慧恍然大悟这部分的必要性。扩展内容 功能扩展 讨论区数据统计分析主要想知道一段时间的热点内容。测试及优化 现在项目代码是没有进行单元测试后续学习集成JEST测试优化部分页面的组件以及一些 bugs转载于:https://www.cnblogs.com/lmf-techniques/p/7852525.html
