资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/react高仿掘金移动版，支持服务端渲染

react高仿掘金移动版，支持服务端渲染

longshengwang / 1410人阅读

摘要：一个高仿的掘金，大部分是按照掘金的来实现的，个别地方就根据自己想法修修改改，只做了移动端的部分，还做的部分就要花太多时间了，支持服务端渲染等，写这个项目主要是对近几个月所学的技术做个实践，看看有哪里还有不足，以及在实际开发的时候会踩到哪些

react-juejin

一个高仿的掘金，大部分是按照掘金的ui来实现的，个别地方就根据自己想法修修改改，只做了移动端的部分，还做pc的部分就要花太多时间了，支持服务端渲染、pwa等，写这个项目主要是对近几个月所学的技术做个实践，看看有哪里还有不足，以及在实际开发的时候会踩到哪些坑，该怎么解决

运行 
</>复制代码 
  1. yarn or npm install
  2. # development
  3. npm run dev:client
  4. npm run dev:server
  5. # production
  6. npm run build
  7. npm start
技术栈

react

react-dom

react-router-dom

react-helmet （设置title及meta）

react-loadable

react-redux

redux-connect （异步路由跳转）

react-router-config

react-virtual-list （长列表渲染）

prop-types

@rematch/core （rematch 一个更好用的redux）

@rematch/loading （调用effects时，自动设置loading）

immer （以带副作用的方式修改数据并返回新引用的数据，不会影响原始数据）

axios

babel-polyfill

classnames

lodash-es

react-swipe

react-toastify

react-content-loader （内容占位的loading）

react-lazyload

react-swipe

swipe-js-is

husky （husky注册git hook）

lint-staged （对被提交的文件依次执行写好的任务）

webpack

eslint

express

实现的功能

公共头部

登录

首页

文章点赞

切换分类

文章页

评论列表

评论点赞

推荐文章列表

沸点页

小册

开源库

活动页

用户主页

关注用户

用户动态列表

用户专栏

用户沸点

用户的点赞

用户关注的标签

大概就是以上的功能，登录的话只支持手机登录，或者可以手动设置一个这样的cookie，再刷新页面就登录成功了

</>复制代码 
  1. const userInfo = {
  2.     token: data.token,
  3.     clientId: data.clientId,
  4.     uid: data.user.uid
  5. }
  6. Cookies.set("userInfo", userInfo, { path: "/" })
项目结构 
</>复制代码 
  1. ├─.gitattributes
  2. ├─ecosystem.json    pm2部署配置
  3. ├─src
  4. |  ├─app.jsx
  5. |  ├─entry-client.js
  6. |  ├─entry-server.js
  7. |  ├─registerServiceWorker.js
  8. |  ├─utils      工具函数
  9. |  ├─store      store配置
  10. |  ├─routes     路由配置
  11. |  ├─models     store的model文件，创建state、reducers、effects
  12. |  ├─containers     页面组件
  13. |  ├─components     展示组件
  14. |  ├─assets     需要webpack处理的资源
  15. |  ├─api      对请求库的封装及获取数据的方法
  16. ├─server    服务端渲染
  17. ├─public    静态资源
  18. ├─build     webpack配置
  19. |   ├─dll   生成dll的配置
  20. ├─.vscode
  21. |    └launch.json
预览 首页

文章页

沸点

小册

开源库

活动

用户页

最后

要是感兴趣的话，可以自行看代码，大部分内容还是比较简单的，有问题的话欢迎提出了一起讨论

</>复制代码 
  1. 项目地址
    线上地址
云服务器 GPU云服务器 webrtc支持移动端吗 移动端支持webrtc么 兼容支持webrtc的移动端 移动端对webRTC的支持情况

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

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

相关文章

  • 大前端 - 收藏集 - 掘金

    摘要：是目前唯一一个支持同步调用的跨平台年度上最多的个项目前端掘金年接近尾声，在最近的几篇文章中，会整理总结一些年度开源项目。 JS 全栈教程 - 前端 - 掘金本课程是基于阮一峰的 js 全栈教程的视频版本，免费供大家观看... 2016 年 10 个最佳的 CodePen 作品 - 前端 - 掘金说到 CodePen，前端开发者们肯定不会陌生。如果说 Dribbble 是设计师们聚集的圣...

    honhon 评论0 收藏0

  • Android框架 - 收藏集 - 掘金

    摘要：说好的分类集合来啦，采用标签云的方式来展示掘金阅读提示点击下文中返回到顶部有分类不合理的地方请提。反编译这个后发现其使用个优质的开源项目掘金是由的开源的一个库，用于构建可预期的和声明式的用户界面。 想不想通过一线互联网公司面试？ - Android - 掘金国内一线互联网公司内部面试题库 以下面试题来自于百度、小米、乐视、美团、58、猎豹、360、新浪、搜狐内部题库 熟悉本文中列出的知...

    zengdongbao 评论0 收藏0

发表评论

登陆后可评论

0条评论

longshengwang

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<