內容導讀

這是我最近學習的用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,遇到問題的朋友可以私信我！！