前后端俱全的 具有聊天功能的 react 项目

#1

一个 React 全家桶项目

项目地址: 传送门 可手动复制网址访问: https://github.com/MasterShu/react-hiring

这个作品是本人近期才完成的, 使用的是 react 16.2 配合这 react-router 4.2.2 使用, 状态管理 redux 3.7 和socket.io 2.0.4, 以及 express 4.16.2 和 UI 组件 antd-Mobil 2.1.3 都是最新的生产.

具体功能

由于完成时间较短, 所以功能基本没问题, 还是存在一些 bug 的, 所以正式环境慎用, 不过学习和新手参考还是很有价值的, 并且本项目 也是可以 服务端渲染, 来时实现首屏加速, 和 更好的 SEO 支持(其实这些本人并没有深究过, 不过有这方功能便是好的)

即时通讯

利用 socket.io 和 socket.io-client 做为 websocket 的开发库, 结合express 来实现即时聊天通讯, 并且内置了一些 emoji , 不过这个 PC浏览器支持不好, 用手机效果那是棒棒哒

登录/注册

这个是基本功能, 肯定是有的

后端开发

利用 express + MongoDB 开发服务器, 倒也是够得


如果要在本地跑程序, 需要你同时运行 server 服务端程序, 同时还需要安装 MongoDB, 的数据库支持

服务端渲染

利用 babel-node 库来支付 react 的服务端渲染, 更好的支持优化


9/2/2018

本次项目新增 react-hot-loader
这个主要就是方便调试, 虽然 webpack server 有自动更新功能, 但是会丢失状态, 这个就可以在更新代码的同时, 却依旧保持状态, 方便一些特定问题的调试

4 Likes
#2

看到一个做到挺好的项目,本来想给个star,可是看到readme最下面挂了2个二维码(扫一扫请你和杯咖啡:coffee:),想想还是算了,与我所认同的开源精神不符合。

#3

其实我也不喜欢这个, 看到大家都有这个, 我没有, 岂不是太尴尬, :slight_smile:

#4

正文里边两个链接是…一样的…?

#5

是啊,防止无法访问

#6

有接口一直无法访问啊,报错啊

#7

你把action,reducer混在一起写,如果后期内容多了会比较混乱吧

#8

我的意思是这儿如果后期逻辑内容多了的话, 就把单个 redux 拆分成一个模块, 如果功能逻辑并不复杂的情况下使用一个文件, 后期扩展也是比较方便

#9

这个需要安装 MongoDB, 然后运行服务端代码

node server/server.js
#10

先顶一个,有空再来抄

#11

其实里面涉及的东西还是蛮多的, 不过都是使用比较简单的实现, 作为练手和学习还是值得参考的!

#12

这个是慕课网实战项目里的。我最近也在跟着做。

#13

不过慕课网上的东西比较简单, 而且功能不够齐全, 后面的路还有很多的呢!
欢迎多多交流

#14

用的是nodejs + express +react +mongodb么?

#15

请问有这个项目的慕课网链接分享么

#16

是的, 如果大家支持的话, 以后是打算把聊天功能改成 极光IM 的, 来实现图片和更好的 适合开发使用的 即时通讯 功能.

这个只是一个初级的例子. 主要是react 的使用方式和用法

#17

很赞 很精美简洁

#18

多谢支持, 有你们的支持, 我会继续优化下去的, :stuck_out_tongue:

#19

想问下页面跳转的路由器是写在哪里的?

#20

跳转路由是动态配置的, 主要是在 dashboard 下