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

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

musiq Web前端工程师
难度中级
时长 2小时39分
学习人数
综合评分9.33
41人评价 查看评价
9.4 内容实用
9.3 简洁易懂
9.3 逻辑清晰

最赞回答 / ywang04
现在全局安装的webpack都是4.几的版本 这个问题是从4开始的 可以指定安装3.10.0的版本 就不会报错了 npm install webpack@3.10.0 -g
推荐下自己写的一个音乐播放器,https://github.com/snow-imprint/react-music-player

最新回答 / qq_越反越爱_0
componentWillUnMount 解绑的是组件,不能是音乐的那个解绑,把讲师讲的最后音乐解绑那个去掉,只能都是Pubsub的

最新回答 / qq_曖狠简单_0
第二个问题:因为没有取到那个对象 如果你看了老师的视频然后又用了github上的代码的话可能因为名字对不上 老师讲的是currentMusicItem 但是循环那个地方用的是currentMusitItem 我的是这样的希望对你有帮助

最新回答 / Flomy
看webpack官方文档  课程用到的webpack版本已经过去很久了  
视频看完了 跟着项目做完了 过程经历一些版本的更新 所以只能网上再找找教程 总算把这个项目堆完,感谢老师的课程,看完之后对react有了更深的认知
em....这个是项目地址 附上:http://react.env107.com/dist/
ES6模板字符串语法
<div className='bar' style = {{width: `${this.props.progress}%` }}></div>
注意: ` 这个不是单引号而是键盘ESC下边那个键
采坑总结
1: render函数中 <Header /><div id='player'></div><Progress progress={this.state.progress} />
2: npm install jquery jplayer --save-dev (使用了这个就不用像老师那样在html中样引入cdn的连接了)
3: 在root.js中写入 import $ from 'jquery'; import 'jplayer';
4: 其他都和老师一样,包括楼下同学讲得什么$(this)不可用,其实也是可以的!
看着楼下同学的各种评论 瞬间觉得yo react-webpack真真好用 看老师的逻辑就行
还是感觉 " yo react-webpack 项目名 " 这个好用
电脑需要
$('#player').jPlayer( "play", progress*100 );
才正常运行
react-hot-loader已经可以不用了webpack-dev-server 自带新功能 HMR (hot-module-replacement),自己配置下就行
如果用ES6类创建方法,需要在构造函数类内绑定该方法,否则报“state not defined”错,ES6类移除了除去默认方法中的autobind this。所以在构造函数中,需要添加:

this.play = this.play.bind(this)
照着老师代码写 ui出来了 但是不能播放的同学 可以看看 index.tpl.html中有没有加上一个id为player的div
还有个坑,除了jQuery加载失败,jPlayer也会加载失败,报:“jPlayer is not a function” 错。虽然jPlayer是jQuery的插件,但是仍然需要手动声明。同加载jQuery类似。
步骤:
1. npm install jpalyer
2. 在需要用的页面(root.js)添加:import jplayer from 'jplayer'

注:其实引用头文件完全不用加分号 (,) ,用ES6创建类的话,里边每一行语句也不用加分号。
被“Uncaught ReferenceError: $ is not defined” 卡住的小伙伴们,
我发现可以把jQuery用npm倒入进来,这样就不会报错了。
步骤:
1. npm i jquery --save
2. 在需要用的页面(root.js)添加:import $ from 'jquery';
问题就解决了。
课程须知
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
提交
取消