使用react技术栈完全重写一个vue书城项目

aaron 发布于2019-08-21 11:59 / 2535人阅读

摘要：本项目是在之前一个项目基础上，用技术栈重写的一个书城项目版本地址本项目地址预览地址项目说明本项目是一个构建的移动书城项目，数据是通过爬虫爬取，存储在中，项目通过构建，前端部分是技术栈。

本项目是在之前一个vue项目基础上，用react技术栈重写的一个书城项目

vue版本地址

本项目地址

预览地址

项目说明

本项目是一个react + nodejs + mysql构建的移动书城项目，数据是通过nodejs爬虫爬取，存储在mysql中，项目api通过express构建，前端部分是react技术栈。关于爬虫和api的详情请参考vue版本的说明，地址。

在写这个之前对于vue算是比较熟练了，转到react，jsx的语法研究了两天，然后研究了一下redux，发现跟vuex是类似的东西，上手起来也比较快。

然后开始用react全家桶重写这个项目，利用空余时间前后花了大概不到一个星期的样子，再之后花了一两天新增了vue版本没有的书架功能。

项目是基于create-react-app构建的，增加了sass的支持，组件热重载还未支持，加入了react-router和redux。

总结一下，vue和react的理念我认为是差不多的，重点都是组件化，state、props也是类似的作用，vuex和redux也有一定程度的类似，二者区别可能就是语法不一样了，vue写起来更像传统的html、js、css开发方式，jsx的写法有的人可能难以接受，但是也不难掌握，另外可能react对于js的掌握程度要求更高一些。

所以我认为，vue和react如果你熟悉其中之一，我相信上手另一个是很快的，因为核心理念你已经掌握了，剩下了就是语法了，vuex和redux也是一样。

本项目难点我认为是书架功能，也都写了注释，有类似想法的可以相互印证。

功能

[x] 首页推荐

[x] 书籍详情

[x] 相似推荐

[x] 分类查看

[x] 阅读器

[x] 章节跳转

[x] 更改字体

[x] 更换主题

[x] 夜间模式

[x] 翻页浏览

[x] 本地存储（存储每本书的阅读进度）

[x] 书架

项目截图

私有云专线服务怎么部署react项目 java 手写一个栈 react使用webrtc 技术栈

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

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

一个vue+express+nodejs爬虫构建的伪整站移动书城

摘要：数据有了，接下来该构建了，谷歌了一下发现用好像不错，于是又学习了部分，构建了所需的。采用分离的写法，分开写，方便维护。另外本项目中还写了一些可直接迁移使用的组件比如组件左右弹出层的背景阴影组件。最后上点项目截图界面是抄起点的项目地址：点击预览地址：点击 api地址：点击爬虫地址：点击技术栈：vue + vue-router + vuex + webpack + axios ...

levius 2019-08-20 17:51 评论0 收藏0
前端每周清单：Node.js 微服务实践，Vue.js 与 GraphQL，Angular 组件技巧

摘要：前端每周清单第期微服务实践，与，组件技巧，攻防作者王下邀月熊编辑徐川前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点分为新闻热点开发教程工程实践深度阅读开源项目巅峰人生等栏目。前端每周清单第 26 期：Node.js 微服务实践，Vue.js 与 GraphQL，Angular 组件技巧，HeadlessChrome 攻防作者：王下邀月熊编辑：徐川...

wall2flower 2019-08-21 11:55 评论0 收藏0
为什么我们从Angular 2迁移到Vue.js（为什么我们没有选择React）

摘要：在，我们刚刚使用发布了我们的客户端的新版本。得到了最多的提及，排在第二位。根据，这个许可证旨在保护他们免受专利巨魔的侵害。正在获得更多开发者的支持，我们在开发过程中看到了这一点，让我们更加相信，我们的选择是对的。 showImg(https://segmentfault.com/img/bVbdxdq?w=1960&h=960);在Rever（www.reverscore.com），我...

zhjx922 2019-08-02 10:52 评论0 收藏0
为什么我们从Angular 2迁移到Vue.js（为什么我们没有选择React）

摘要：在，我们刚刚使用发布了我们的客户端的新版本。得到了最多的提及，排在第二位。根据，这个许可证旨在保护他们免受专利巨魔的侵害。正在获得更多开发者的支持，我们在开发过程中看到了这一点，让我们更加相信，我们的选择是对的。 showImg(https://segmentfault.com/img/bVbdxdq?w=1960&h=960);在Rever（www.reverscore.com），我...

wpw 2019-08-30 15:54 评论0 收藏0