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

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

musiq Web前端工程师
难度中级
时长 2小时39分
学习人数
综合评分9.33
41人评价 查看评价
9.4 内容实用
9.3 简洁易懂
9.3 逻辑清晰
155
跳跃性太大了,感觉有一大截没讲
感谢老师 看着旧版的react还有2.0的router的教程各种报错,还得自己填坑改成新的写法,不过增强了动手动脑能力
一个建议:希望在github仓库中提供一个没有进行逻辑编写的空白的js文件,像这样不断去复制代码,还不提供原来模板,那我们接下来怎么去做
webpack 3.0+开始绝对路径
entry: __dirname + '/app/index.js',
output: {
path: __dirname + '/dist',
filename: 'bundle.js'
}
否则会报错
progress.less文件不生效 。。。。
3. dependencies: 使用 --save 安装的插件被写入到 dependencies对象中

当然你也可以自己一个个安装
devDependencies: 使用 --save-dev 安装的插件被写入到 deDependencies对象中
dependencies: 使用 --save 安装的插件被写入到 dependencies对象中
提醒大家不要忘记安装全局的 webpack: npm isntall webpack -g,
可以尝试最新的安装,并不一定按照以前的旧版本,我使用的都是最新的,如下:
"dependencies": {
"pubsub-js": "^1.5.8",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-hot-loader": "^3.1.3",
"react-router": "^4.2.0"
},
Fmc
console.log(react.version); 报错了,应该是大写React
如果有什么underfind的话,可能是你this没有绑定,
constructor(props) {
super(props);
this.onChange = this.onChange.bind(this);
}

onChange(e){
let test = this.refs.testbar;
console.log(test);
this.props.onChangeChange && this.props.onChangeChange(e);
}
你在onChange里面使用this的时候一定要在constructor里面绑定,不然找不到this
打卡打卡打卡
react-router v4.0 : https://github.com/RiversCoder/react_music_player
react-router v4.0版本下 实现过程:

调用:
import { BrowserRouter as Router,Link,Route,Switch} from 'react-router-dom';

组件更改:
<Router >
<section>
<Header />
<Switch>
<Route path="/" component={Player} />
<Route path="/list" component={MusicList} />
</Switch>
</section>
</Router>
真不知道该怎么形容。。。还真是坑巨多呀 react-router默认安装是v4.0版本 结果发现好多api都已经废弃了,结果就一直挣扎在报错、调试、报错、调试 不断的重复的过程中……
router4 用法
安装 react-router-dom
引入import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
return
<Router>
<div>
<Header logoSrc="./ico.svg" appName="Music Player" />
<Route path="/" component={player} />
{...其他路由}
</Router>
课程须知
1、有一定的前端开发经验 2、熟悉HTML、CSS,精通JavaScript 3、对前端工程化有一定的了解 4、了解ES6一些基本语法
老师告诉你能学到什么?
1、webpack的配置 2、开发环境的搭建 3、React与传统开发的理念差异 4、组件化开发 5、React-Router的使用 6、事件订阅及通信 7、一些最佳实践

微信扫码,参与3人拼团

微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

友情提示:

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

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

举报

0/150
提交
取消