React 一个综合类PC站分享学习
2023-09-27 14:28:55 时间
使用react + webpack + react-router + es6 构建的电影新闻图书等综合类网站,适用于react初级学者研究,其中使用豆瓣电影API,聚合新闻API等
源码:https://github.com/jixianu/EasyFun
其中功能页面比较费时,故搁浅,但主要学习功能已完成。
简趣
一个简单趣味的pc-react站
###技术栈
- React
- React-Router
- ES6
- Less
- Antd
- Mock.js
- Webpack
###运行 在目录中,运行指令
yarn install
开发版
yarn run dev
发布版
yarn run pro
###历程(各种偷懒啊)
2.24 配置webpack与包管理
2.25 配置webpack开发热更新 4.6 使用stage-0编程,这样可以省去bind(this) 使用聚合数据API与localStorage做用户登录,接口只能接受username-aaa 4.21 完成电影详情页,首页 5.21 router的异步加载
###挖坑埋坑
- 公共的base,其他css引用不每次都要引用
- 豆瓣的API访问次数,30次/min
- 异步读取数据时,返回数据之前切换router会使页面报waring,setState nothing 用给路由一个状态this.mouted
- fetch时mock的数据需要放在服务器环境才能拦截http请求,未解决--需要配置node后台环境
- 组件样式问题,需要在渲染组件上引入,不应在容器组件上那应用样式,会导致再次使用时还需引样式
- fetch错误的catch怎么能统一返回一个数据组合?给一个state做判断,能不能统一返回一个DOM节点--不能
- 组件的大小样式是px像素,而当二次使用时不可适配,应使用百分比
- webpack打包无法处理jsx中的img标签引用,使用require()则会被编译
- react-router@4.x.x渲染是需要按照react-router-dom,没有hashHistory方法,推荐使用browserHistory,只有react-router@3.x.x才有hashHistory
相关文章
- 学习ASP.NET Core Razor 编程系列五——Asp.Net Core Razor新建模板页面
- WCF学习之旅—WCF中传统的异常处理(十六)
- [转] React之Immutable学习记录
- JAVA学习第五十一课 — IO流(五)流的操作基本规律
- react学习笔记1
- 《数据挖掘:理论与算法》学习笔记(九)—关联规则
- 机器学习——逻辑回归、肿瘤预测案例(恶性乳腺)
- 诗人般的机器学习,ML工作原理大揭秘
- 多巴胺:谷歌开源新型增强学习框架
- NLP学习笔记
- springboot学习笔记(含源代码+视频链接)
- ABP理论学习之MVC控制器(新增)
- 《react学习之道》---阅读笔记
- (数据科学学习手札27)sklearn数据集分割方法汇总
- react navite 学习资料
- Selenium2学习-005-WebUI自动化实战实例-003-三种浏览器(Chrome、Firefox、IE)启动脚本源代码
- 机器学习算法与Python实践之(三)支持向量机(SVM)进阶
- 计算机网络第2章(物理层)学习笔记
- 划分子网和构造超网的学习
- 【数字IC验证快速入门】13、SystemVerilog interface 和 program 学习
- Android学习之手机震动
- Unity3D学习笔记(一、环境安装)
- linux学习参考网站
- React学习之路之创建项目