react项目 之 client基础搭建框架
安装antd-mobile
1、安装
npm install antd-mobile --save
2、index页面引入
其中的script处理点击延迟
<!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" />
<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></body>
</html>
3、按需打包
下载模块
npm install -s -d babel-plugin-import react-app-rewired customize-cra
根目录创建config-overrides.js
const {override,fixBabelImports} = require("customize-cra");
module.exports = override(
fixBabelImports("import", {
libraryName: "antd-mobile", style: 'css'
})
);
修改package.json的scripts
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test --env=jsdom",
"eject": "react-scripts eject"
},
路由
1、安装包
npm install -s react-router-dom
2、创建路由组件
观察项目所需路由，并在containers文件夹中创建路由组件【文件夹+jsx】
例如：
register
-register.jsx
login
-login.jsx
3、在index.js入口文件中 引入
HashRouter/BrowserRouter，Route，Switch 三者缺一不可
import { HashRouter, Route, Switch } from 'react-router-dom'
import Register from './containers/register/register'
import Login from './containers/login/login'
import Main from './containers/main/main'
ReactDOM.render((
<HashRouter>
<Switch>
<Route path="/register" component={Register}></Route>
<Route path="/login" component={Login}></Route>
<Route component={Main}></Route> {/*默认组件*/}
</Switch>
</HashRouter>
), document.getElementById('root'));
引入redux
1、安装包
npm install --save redux react-redux redux-thunk
npm install --save -d redux-devtools-extension
2、四个js文件
action-types.js【名字常量-变】* 包含n个action type名称常量
actions.js【初始化参数-变】* 包含n个action creator
* 异步action
* 同步action
reducers.js【生成state函数-变】* 包含n个reducer函数
* 根据老的state和指定的action返回新的state
import {combineReducers} from 'redux'
function xxx(state=0,action){
return state
}
function yyy(state=0,action){
return state
}
export default combineReducers({
xxx,
yyy
})
//向外暴露的状态结构{xxx:0,yyy:0}
store.js【套路照搬-不变】* redux最核心的管理对象模块
import {createStore,applyMiddleware} from 'redux'
import thunk from 'redux-thunk'
import {composeWithDevTools} from 'redux-devtools-extension'
import reducers from './reducers'
//向外暴露store对象
export default createStore(reducers,composeWithDevTools(applyMiddleware(thunk)))
