记b站的一次react尝试

由于本人喜欢看b站的一些视频，所以当我神奇的发现有个网页版的b站，
就打开了我内心的辣分躁动，一冲动就写了一个react版的b站，顺便学习一下。
ps（刚学习，还没接触到redux，所以代码中有很多重复的,后期想起来了就分离一下把！！！）
还有（后端来源仅为学习，有情况立马删除，做一个合格的舔狗。）
复制代码

首先来给一个项目的构架图

从结构上来看components 里面是我的组件，page目录下是我的一些页面组件。两者被我区分开来了，方便后面我继续填坑。

在给一个package的图

其实也没啥东西，就是一个ant design 的库(ps：weui 个人真的用不习惯！！！！气个半死。)，一个axios， 还有最开始加入的vw、vh(后期维护要换掉)遇到了很大的问题，andorid端的bug让我头发掉了一大把。

ui设计上大部分是仿的b站，但是总体的结构还是我自己来的。并不是全部的高仿，react的单数据让我这个用惯了vue的人也别扭了半天，最难受的当然还是jsx语法。 这次css没有用less或sass 也没有用所谓的typejavascript,纯粹的学习一下react的语法和套路，也让自己的知识面扩充一下。 下面给一波初成品的截图欣赏一下。

首页

这里的话看过网页版的b站的人是知道这李是仿照的b站写的，不过我把一级路由折腾到了下面方便点击， 整体的话没有多费劲的技术。就是图2的层级联动有些麻烦，需要自己操作dom来保证list打开的时候和收缩的active保持同步。（ps 主要的东西其实在后端api的爬取和分析，展示页是有参考物的。）

排行榜

搜索

这里也做了输入联想以及历史记录，主要的实现在api获取

up主信息页

（ps 前两天突然404了，一度让我以为封ip了。其实是b站都没得这个页面了）

视频页

这里的弹幕andorid端会有影响，目前没得什么好办法解决还在思考中。 下面的推荐都是整体视频，并不是b站上的预览6分钟。

以上就是我react的尝试了，都是些简单的东西，就不班门弄斧了。放一下截图给大家看看就好，其实是代码技术很烂&自己又懒，下面放出地址欢迎大佬们指教（服务器带宽很小，所有你懂得。要求不要太高）

预览地址

前端代码地址

转载于:https://juejin.im/post/5c4e6d0ae51d4502fd75a143