为了账号安全,请及时绑定邮箱和手机立即绑定

使用React构建一款音乐播放器

musiq Web前端工程师
难度中级
时长 2小时39分
学习人数
综合评分9.33
41人评价 查看评价
9.4 内容实用
9.3 简洁易懂
9.3 逻辑清晰
被“Uncaught ReferenceError: $ is not defined” 卡住的小伙伴们,
我发现可以把jQuery用npm倒入进来,这样就不会报错了。
步骤:
1. npm i jquery --save
2. 在需要用的页面(root.js)添加:import $ from 'jquery';
问题就解决了。
我把这个 React 音乐播放器 和 React 画廊应用整合在一个项目里,另外还添加了封面图片旋转功能,附详细的README文档。预览地址: https://nnngu.github.io/MusicPhoto/
源代码: https://github.com/nnngu/MusicPhoto

最赞回答 / nnngu
1、首先你的仓库的 Github Page 功能要打开2、然后用命令 npm run dist 把你的项目打包成静态页面,打包好的页面就存放在 dist 目录里3、把打包好的目录 push 到 GitHub 的 gh-pages 分支,使用如下命令:            git subtree push --prefix=dist origin gh-pages4、在 GitHub 对应的仓库的 Settings 里面开启 Github Pages 功能,并选择 gh-pages分支即可。可以参考我的这...

已采纳回答 / 慕勒7123956
现在的推荐这样写{test: /\.js$/,use: ["babel-loader"],include: path.join(__dirname + "/src")}

最新回答 / 慕九州9535070
(e)=> 和function(e)有一些区别的,他们里面的this是不同的,es6可以看一下http://es6.ruanyifeng.com/
按照这个大神WU5229485的代码写了,但是我的/list下面的页面显示不出来Cannot GET /list,这是为什么呢
跳跃好大,亿脸懵逼 -_-|||
React的请求用什么好一些呢,之前用的fetch请求,但是兼容不是很好
课程非常好,感谢。
结合老师的思路用 dva+react实现了这版音乐播放器,支持从播放列表点击跳转播放音乐。
数据方面没用全局变量,通过前端mock数据涵盖了完整的前后端数据流交互流程。
欢迎大家拍砖交流~~
地址:https://github.com/hangview/react-music-player
在对当前播放歌曲进行颜色加深时,musiclistitem.less文件中的&.focus是什么意思啊,还有ls文件中<li>标签在模板函数判断的时候为什么要在focus前面加一个空格?开始写的时候没注意加空格,样式都乱了。还有less文件中的&::before那些又代表什么意思呢?求大神解答呀!!!!

最赞回答 / wbc0301
1:&.focus 中的“&”表示父选择器,详见less官网,http://less.bootcss.com/features/#parent-selectors-feature2:focus前面加空格是因为要拼进前边的类名中去,类名之间要用空格隔开。3:&::befor表示父选择器的伪元素希望对你有帮助
使用create-react-app脚手架搭建react音乐播放器
项目地址:https://github.com/LuvJia/react-musicplayer
项目预览:https://luvjia.github.io/react-musicplayer/
使用create-react-app脚手架搭建react音乐播放器
项目地址:https://github.com/LuvJia/react-musicplayer
项目预览:https://luvjia.github.io/react-musicplayer/
使用create-react-app脚手架搭建react音乐播放器
项目地址:https://github.com/LuvJia/react-musicplayer
项目预览:https://luvjia.github.io/react-musicplayer/
let barStyle = {
width: `${this.props.progress}%`
};
return (
<div className="components-progress" >
<div className="progress" style={barStyle}></div>
</div>
);
课程须知
1、有一定的前端开发经验 2、熟悉HTML、CSS,精通JavaScript 3、对前端工程化有一定的了解 4、了解ES6一些基本语法
老师告诉你能学到什么?
1、webpack的配置 2、开发环境的搭建 3、React与传统开发的理念差异 4、组件化开发 5、React-Router的使用 6、事件订阅及通信 7、一些最佳实践

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

举报

0/150
提交
取消