vlambda博客
学习文章列表

写在前面

先看看这个项目的截图，你就说有几分相似程度？

「react-bilibili」

❝

此项目仅供学习和交流，不得用于商业用途

❞

推荐一款开源的高仿B站Web移动端，该项目可以用于 React 技术栈的学习项目。

本项目基于此SSR服务端渲染模板，使用React16.8，Typescript开发,前端使用的核心技术栈基于 React，后端服务使用 Express。

技术点

• react

• react-router-dom

• react-router-config

• redux(数据管理)

• redux-thunk(支持异步Action)

• react-helmet(Head管理)

• react-lazyload(图片懒加载)

• loadable-components(代码分割)

• cross-fetch(浏览器和node通用的Fetch API)

• express(后端服务)

实现功能

• 首页
• 分类页
• 排行榜
• 搜索

「视频详情页」

• 1.视频播放
• 2.弹幕
• 3.推荐列表
• 4.评论列表

「UP主页」

• 1.详情
• 2.投稿列表
• 个人中心
• 历史记录

「直播」

• 直播列表
• 分类

「直播间」

• 1.直播播放
• 2.聊天弹幕

运行方法

运行 先运行服务端接口，见bilibili-api目录。本http服务默认端口: 3010

npm install

安装项目依赖包

npm run dev

运行开发环境

npm run build

打包客户端和服务端，运行生产环境前必须先打包

npm run start

运行生产环境

写在后面

上面就是本期开源的全部内容了，你学废了吗？

有问题请留言或者@博主,谢谢支持o(￣︶￣)o~

「感谢您的阅读,如果此文章或项目对您有帮助，请扫个二维码点个关注吧，若可以的话再给个一键三连吧！」

GitHub有开源项目,需要的小伙伴可以顺手star一下！

GitHub: https://github.com/langyuxiansheng