内容导读

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

一、效果演示

音乐播放.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 安装
配置

可参考文章

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

1. ES6 中 Class类的使用

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

具体可看文档

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

五、 视频地址

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

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