create-react-app实现音乐播放器

一、效果演示

音乐播放.gif

二、 github项目地址

三、安装react-create-app脚手架

npx create-react-app my-app
cd my-app
npm start

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   └── favicon.ico
│   └── index.html
│   └── manifest.json
└── src
    └── App.css
    └── App.js
    └── App.test.js
    └── index.css
    └── index.js
    └── logo.svg
    └── registerServiceWorker.js

四、写项目

记录一下项目过程中的问题

1. create-react-app 不支持less解决方案

cd node_modules/react-scripts     在node_modules下找到react-scripts文件夹
yarn add less less-loader         安装
配置

可参考文章
同样的，要解析其他类型的文件，都可以采用这种方式

2. ES6 中 Class类的使用

class Progress extends React.Component {
constructor(props) {
        super(props);
            this.state({
                .......
           })
    }
  render(){
       return (
       ..... 
      )
  }

}
export default  Progress

具体可看文档

3. 关于React-router
   最新版现在是v4, 改动很大，可以参考项目代码或者文档

五、 视频地址

注：视频不是最新代码，使用最新版本可以参考我的项目

这是我最近学习的用react 写的小项目，之后了解react的生命周期、路由、组件间通信以及相关的事件机制，感觉视频的思路都很不错，推荐！！欢迎star,遇到问题的朋友可以私信我！！