[作品分享] 使用 React 写的一个社区系统

[54sword]

小度鱼

线上地址：https://www.xiaoduyu.com
前端源码：https://github.com/54sword/xiaoduyu.com
后端 API 源码：https://github.com/54sword/api.xiaoduyu.com

特点

• 页面极度简洁
• SPA 单页面应用，前后端分离
• 使用 React 服务器端渲染，首屏服务端渲染，且完美支持 SEO
• 相对完整的功能：发帖子、评论、富文本、通知、新帖子提醒、头像上传、邮箱微博 QQ 注册登录 …

使用技术

• 前端：React、React-redux、React-router、ES6、SASS、CSS-Modules …
• 前端测试框架：Jest、Enzyme
• 后端：NodeJS、Express、Mongoose
• 数据库：MongoDB
• 通信：Socket.io
• 富文本编辑器：Draft.js

二维码

截图

@xilixjd 回复里面，不能包含外链了，这里给你回复下

额，可能表达不了太细，大概是这样

## URL 请求入口
https://github.com/54sword/xiaoduyu.com/blob/master/server/routes/serverRender.js
该文件是处理服务端渲染的入口文件，所有 URL 请求都会经过它，然后它会根据 URL 获取到页面组件

## 获取到组件后，在服务端加载想要的数据
例如访问帖子详情页面： https://xiaoduyu.com/posts/58fc99916268f6c7706c2c68
对应的页面组件是： https://github.com/54sword/xiaoduyu.com/blob/master/src/containers/posts-detail/index.js
然后执行该组件里面的 loadData 方法，它是专门处理预先在服务端加载数据的，
数据请求成功后，数据会储存到 Redux 的 State 里面，最后使用 renderToString 将 State 用到模版里，就完成渲染了

[gimp]

点击“我的”后建议加个 Esc 关闭窗口的监听

[haiyang416]

支持一下,样式比较合我的胃口.

[54sword]

@gimp 不错的建议，这么细节的功能，已加入我的任务清单

[xilixjd]

我想问一下 SEO 怎么做的，有教程吗

[deleteDB]

同问 SEO 嘿嘿

[hzwei]

注册支持。

[54sword]

@xilixjd 我的 React SEO 学习路径是到 Gitub 找 Demo，对我最有帮助的，主要是看的这个 Demo，

https://github.com/ibufu/douban-movie-react-ssr

然后读懂它，再然后改造用到自己的项目里面。

[hzwei]

首页清新简洁的风格比较喜欢。
提几个问题，一是顶部的“说说”、“提问”和“写文章”有什么区别？它们点进去都是同一个编辑页面。
二是我看见有的回复折叠起来了，是不想页面过长的原因吗？
三是从本地上传的图片是上传到哪去？

[54sword]

@hzwei

1、说说：正文可以不填写，提问：需要填写正文，写文章：正文需要大于一定字数
相应帖子也会做上标记，方便以后可以筛选这三种类型的帖子

2、首页的评论数量，目前最大是 5 条，更多就会折叠，如果评论被标记削弱，也会被折叠。

3、图片目前是上传到七牛

[xilixjd]

@54sword 看了一下这个项目，没找到 SEO 的重点。。

[50vip]

@xilixjd 使用的服务端渲染，就解决 seo 问题了啊

[Sukizen]

这个有意思。能导入 discuz 的用户数据吗。 有一个 discuz 老站一直想升级或更改一个更轻一点的程序。

[54sword]

@Sukizen 还没有考虑到这个，因此还不行哈

[heshanfu]

这个网站有很多相关的： https://reactjsexample.com