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

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

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

        "pubsub-js": "^1.5.4",

        "react": "^15.0.2",

        "react-dom": "^15.0.2",

        "react-hot-loader": "^3.0.0-beta.2",

        "react-router": "^2.0.0"

      },

      "devDependencies": {

        "autoprefixer": "^6.3.6",

        "babel-core": "^6.5.2",

        "babel-loader": "^6.2.2",

        "babel-plugin-react-transform": "^2.0.0",

        "babel-preset-es2015": "^6.5.0",

        "babel-preset-react": "^6.5.0",

        "css-loader": "^0.23.1",

        "extract-text-webpack-plugin": "^1.0.1",

        "html-webpack-plugin": "^2.16.1",

        "json-loader": "^0.5.4",

        "less": "^2.6.0",

        "less-loader": "^2.2.2",

        "style-loader": "^0.13.1",

        "webpack": "^1.13.0",

        "webpack-dev-server": "^1.14.1"

      }


    查看全部
    4 采集 收起 来源:Webpack学习

    2018-04-25

  • "dependencies": { "pubsub-js": "^1.6.0", "react": "^16.2.0", "react-dom": "^16.2.0", "react-hot-loader": "^4.0.0", "react-router": "^4.2.0" }, "devDependencies": { "autoprefixer": "^8.0.0", "babel-core": "^6.26.0", "babel-loader": "^7.1.3", "babel-plugin-react-transform": "^3.0.0", "babel-preset-env": "^1.6.1", "babel-preset-react": "^6.24.1", "css-loader": "^0.28.10", "extract-text-webpack-plugin": "^3.0.2", "html-webpack-plugin": "^3.0.1", "json-loader": "^0.5.7", "less": "^3.0.1", "less-loader": "^4.0.6", "style-loader": "^0.20.2", "webpack": "^4.0.1", "webpack-cli": "^2.0.9", "webpack-dev-server": "^3.1.0" }
    查看全部
    4 采集 收起 来源:Webpack学习

    2018-03-22

  • react生命周期: 

    getDefaultProps 

    getInitialState 

    componentWillMount 

    render 

    componentDidMount

    查看全部
  • react生命周期

    查看全部
  • "dependencies": {
      "pubsub-js": "^1.6.1",
      "react": "^16.4.2",
      "react-dom": "^16.4.2",
      "react-hot-loader": "^4.3.5",
      "react-router": "^4.3.1"
    },
    "devDependencies": {
      "autoprefixer": "^9.1.3",
      "babel-core": "^6.26.3",
      "babel-loader": "^7.1.5",
      "babel-plugin-react-transform": "^3.0.0",
      "babel-preset-env": "^1.7.0",
      "babel-preset-es2015": "^6.24.1",
      "babel-preset-react": "^6.24.1",
      "css-loader": "^1.0.0",
      "extract-text-webpack-plugin": "^3.0.2",
      "html-webpack-plugin": "^3.2.0",
      "json-loader": "^0.5.7",
      "less": "^3.8.1",
      "less-loader": "^4.1.0",
      "style-loader": "^0.22.1",
      "webpack": "^4.17.1",
      "webpack-cli": "^3.1.0",
      "webpack-dev-server": "^3.1.6"
    }


    查看全部
    1 采集 收起 来源:Webpack学习

    2018-08-26

  • "dependencies": {

    "pubsub-js": "^1.5.4",

    "react": "^15.0.2",

    "react-dom": "^15.0.2",

    "react-hot-loader": "^3.0.0-beta.2",

    "react-router": "^2.0.0"

    },

    "devDependencies": {

    "autoprefixer":"^6.3.6",

    "babel-core":"^6.5.2",

    "babel-loader":"^6.2.2",

    "babel-plugin-react-transform": "^2.0.0",

    "babel-preset-es2015":"^6.5.0",

    "babel-preset-react":"^6.5.0",

    "css-loader":"^0.23.1",

    "extract-text-webpack-plugin":"^1.0.1",

    "html-webpack-plugin":"^2.16.1",

    "json-loader":"^0.5.4",

    "less":"^2.6.0",

    "less-loader":"^2.2.2",

    "style-loader":"^0.13.1",

    "webpack":"^1.13.0",

    "webpack-dev-server":"^1.14.1"

    }


    查看全部
    1 采集 收起 来源:Webpack学习

    2018-07-22

  • 设置state.progress的值时:

    this.state = {

        progress:""    // 此处不能写视屏中的"-"  可能会报错

    }

    查看全部
  • 1.创建一个文件夹music-player 2.在这个文件目录下 npm init 生成package.json文件 3.向package.json中加入依赖,可执行npm install react --save,就将react依赖加入了
    查看全部
    1 采集 收起 来源:Webpack学习

    2018-03-16

  • const path = require('path'); module.exports = { entry: './app/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' }, module: { rules: [ { test: /\.js$/, exclude: /node-modules/, loader: 'babel-loader', query: { "presets": ["env"] } }, { test: /\.css$/, loader: 'style!css' }, { test: /\.less$/, use: [{ loader: "style-loader" }, { loader: "css-loader" }, { loader: "less-loader", options: { strictMath: true, noIeCompat: true } }] }, ] } };
    查看全部
  • pubsub事件订阅的理解: 1- 作用:可以A组件调用B组件中的逻辑(函数)-- 实现非父子组件的通信 2- 发送事件 + 监听事件 + 逻辑实现 3- 发送事件: Pubsub.publish() 4- 监听(绑定)事件: Pubsub.subScribe() -- 注意:与之对应的解绑事件: Pubsub.unSubScribe() 5- 逻辑实现:就是实现业务的函数
    查看全部
    1 采集 收起 来源:课程总结

    2018-02-17

  • React组件第一次加载的生命周期
    查看全部
  • dist就是最终打包好的文件: 一个html+一个js 加上static目录下的静态资源就OK了
    查看全部
  • Version: webpack 3.10.0 本章节主要内容: (1)进入指定目录 (2)新建文件夹:终端输入:mkdir react-music-player (3)进入文件夹:终端输入:cd react-music-player (4)文件夹下初始化npm:终端输入:npm init 按照视频依次输入 (5)package.json 安装依赖 npm install 更多配置直接复制进来 参考网址(https://github.com/xiaolin3303/react-music-player/blob/master/package.json) (6)webpack.config.js配置文件 module.exports = { entry:__dirname+'/app/index.js', output: { path:__dirname+'/dist', filename:'bundle.js' } } (7)对应目录下建立文件夹 app dist 和index.js 终端输入 webpack 打包 创建index.html 运行程序查看控制台
    查看全部
    1 采集 收起 来源:Webpack学习

    2017-12-29

  • 思考了一下这个取余,emmmmmm很妙
    查看全部
    1 采集 收起 来源:组件通信(1)

    2017-10-12

  • https://github.com/xiaolin3303/react-music-player
    查看全部
首页上一页1234567下一页尾页

举报

0/150
提交
取消
课程须知
1、有一定的前端开发经验 2、熟悉HTML、CSS,精通JavaScript 3、对前端工程化有一定的了解 4、了解ES6一些基本语法
老师告诉你能学到什么?
1、webpack的配置 2、开发环境的搭建 3、React与传统开发的理念差异 4、组件化开发 5、React-Router的使用 6、事件订阅及通信 7、一些最佳实践

微信扫码,参与3人拼团

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

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