安装
-
全局安装脚手架：
npm install -g create-react-app -
创建新项目：
create-react-app my-app -
安装react-app-rewired
yarn add [email protected] babel-plugin-import
将package.json中的script启动方式替换为rewired
"scripts": {
“start”: "react-app-rewired start“
} -
安装ant Ui插件
yarn create react-app antd-demo -
安装react-router 路由:
npm i react-router-dom -
安装: redux
yarn add redux react-redux 或者 npm i redux react-redux -
安装: redux-logger redux-thunk
yarn add redux-thunk react-logger（redux中间件）
项目搭建
新建 config-overrides.js
const {injectBabelPlugin} = require('react-app-rewired');
module.exports = function override(config,env){ //antd 按需加载
config = injectBabelPlugin([
//引入模块：antd , 文件夹名：es，包含：css
'import',{libraryName:'antd-mobile',libraryDirectory:'es',style:'css'}],config)
//添加装饰器能力
config = injectBabelPlugin(
['@babel/plugin-proposal-decorators',{legacy:true}],config
)
return config;
}
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import 'lib-flexible'
import './assets/font_74bntjvs7d9/iconfont.css' // 字体文件
import App from './App';
import * as serviceWorker from './serviceWorker';
import './index.css';
import {Provider} from 'react-redux'
import reducer from './store'
import {createStore,applyMiddleware} from 'redux'
import thunk from 'redux-thunk'
import logger from 'redux-logger'
const store = createStore(reducer,applyMiddleware(thunk,logger))
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>
, document.getElementById('root'));
serviceWorker.unregister();
index.html
<!DOCTYPE html>
<html>
<head>
<!-- set `maximum-scale` for some compatibility issues -->
<!-- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" /> -->
<meta name="description" content="QQ音乐是腾讯公司推出的一款网络音乐服务产品，海量音乐在线试听、新歌热歌在线首发、歌词翻译、手机铃声下载、高品质无损音乐试听、海量无损曲库、正版音乐下载、空间背景音乐设置、MV观看等，是互联网音乐播放和下载的优选。">
<meta name="keywords" content="音乐,音乐网站,mp3下载,音乐下载,在线听歌,正版音乐,歌词,歌词翻译,MV,新歌热歌,经典老歌,音乐排行榜,空间背景音乐,播放器,高品质音乐,无损音乐,电台,专辑,歌单,歌手">
<link rel="shortcut icon" href="//y.qq.com/favicon.ico?max_age=2592000">
<!-- 是否启动webapp功能 设置为yes 网站就会在满屏模式full-screen mode删除默认的苹果工具栏和菜单栏 -->
<meta content="yes" name="apple-mobile-web-app-capable" />
<!-- 开启对web app程序的支持 -->
<meta content="yes" name="apple-touch-fullscreen" />
<!-- 忽略识别手机号码和邮箱 -->
<meta content="telephone=no,email=no" name="format-detection">
<title>QQ音乐 - 千万正版音乐海量无损曲库新歌热歌天天畅听的高品质音乐平台！</title>
<script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></script>
<script>
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function() {
FastClick.attach(document.body);
}, false);
}
if(!window.Promise) {
document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>');
}
</script>
</head>
<body>
<div id="root"></div>
</body>
</html>
redux
在src下新建store文件夹
index.js
import {combineReducers} from 'redux'
import player from './player.redux'
import rank from './rank.redux'
import recommend from './recommend.redux'
import search from './search.redux'
import songList from './songList.redux'
export default combineReducers({player,rank,recommend,search,songList})
player.redux.js
基本结构
export default(state,action)=>{
state = state || {}
switch(action.type){
case 'send':
retun{...state,data:action.data}
default:
return state
}
}
rank.redux.js
import * as api from '../api'
export default (state,action)=>{
state = state || {}
switch(action.type){
case 'RANK_INIT':
return {data:action.data}
default:
return state
}
}
//异步请求方法
export const rank =()=>(dispatch)=>{
fetch(aip.TOP_LIST).then(res=>res.json()).then(req=>{
dispatch({type:"RANK_INIT",data:req.data})
})
}
Rank.jsx
import React from 'react';
import {connect} from 'react-redux'; // redux 装饰器
import {rank} from '../../store/rank.redux'
@connect(
(state)=>({
data:state.rank.data
}),
{
rank
}
)
class Rank extends React.Component{
constructor(props){
super(props)
}
componentDidMount(){
this.props.rank()
}
}
export default Rank;
react-router使用
app.js
import React from 'react';
import { BrowserRouter as Router, Route,Redirect,Switch } from 'react-router-dom'
import Home from './components/Home'
import SongList from './components/SongList'
import Player from './components/Player'
import './App.css';
class App extends React.Component {
render() {
return (
<Router>
<Switch>
<Route path="/songList/:id" component={SongList}></Route>
<Route path="/player/:songMid/:songId" component={Player}></Route>
<Route path="/" component={Home}></Route>
</Switch>
</Router>
);
}
}
export default App;
home.jsx
import React from 'react';
import {NavLink,Route,Redirect,Switch} from 'react-router-dom'
import Recommend from '../Recommend'
import Rank from '../Rank'
import Search from '../Search'
import './index.css';
class App extends React.Component {
render(){
return (
<div>
/* <!-- 导航区 --> */
<NavLink to="/recommend">推荐</NavLink>
<NavLink to="/rank">排行榜</NavLink>
<NavLink to="/search">搜索</NavLink>
<Switch>
<Route exact path="/recommend" component={Recommend}></Route>
<Route path="/rank" component={Rank}></Route>
<Route path="/search" component={Search}></Route>
<Redirect to="/recommend"/>
</Switch>
</div>
)
}
}
