react+react-router-dom+redux+axios項目搭建
一．搭建react項目
1.創建一個react項目
create-react-app my-app
cd my-app
npm start
文件夾目錄結構：
看下頁面是否打開，是否運行正確。
注意：如果頁面沒有src文件夾，
第一種：卸載全局安裝包：
npm uninstall -g create-react-app
yarn global remove create-react-app
然后 npm start，瀏覽器會打開頁面。
如果第一種不行，用第二種
第二種：忽視掉本地的create-react-app已存在的版本進行項目的創建
npx --ignore-existing create-react-app my-app二．搭建react路由
刪除App等文件，最后目錄結構
1.安裝：react-router-dom
npm install --save react-router-dom
2.新建index頁面
src/Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import ReactMap from './router/routerMap';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<div>
<ReactMap />
</div>
, document.getElementById('root'));
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
3.新建routerMap頁面
src/router/routerMap.js
import React from 'react' import { HashRouter as Router, Route } from 'react-router-dom' import Login from '../pages/Login/Login' class ReactMap extends React.Component { updateHandle() { console.log("每次router變化后觸發") } render() { return ( <Router history={this.props.history}> <Route exact path="" component={Login} /> </Router> ) } } export default ReactMap;
3.新建Login頁面
src/pages/Login/Login.js
import React, { Component } from 'react'
class Login extends Component {
render() {
return (
<div>hello react!</div>
)
}
}
export default Login;
目錄結構如下：
三．搭建redux
1.安裝 react-redux, redux, redux-thunk
npm install --save react-redux
npm install --save redux
npm install --save redux-thunk
2.修改Index頁面
src/Index.js
import React from 'react'; import ReactDOM from 'react-dom'; import ReactMap from './router/routerMap'; import reportWebVitals from './reportWebVitals'; import { Provider } from 'react-redux' import { createStore, applyMiddleware, compose } from 'redux' import rootRedux from './redux' import thunk from 'redux-thunk' const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose const enhancer = composeEnhancers(applyMiddleware(thunk)); const store = createStore( rootRedux, enhancer ) ReactDOM.render( <div> <Provider store={store}> <ReactMap /> </Provider> </div> , document.getElementById('root')); // If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals reportWebVitals();
3.新建redux/index.js文件
src/redux/index.js
import { combineReducers } from 'redux'
import set from './set'
export default combineReducers({
data: set
})
4.新建redux/ set.js文件
src/redux/set.js，這里返回的key名：list，是使用時候的key名，不要重復
const set = (state = [], action) => { switch (action.type) { case 'GET_LIST': return { ...state, list: action.list } case 'SET_USERNAME': return { ...state, userName: action.list } default: return state } } export default set
5.新建actions / index.js文件
src/actions/index.js
export const getList = (list) => { return { type: 'GET_LIST', list: list } } export const setUserName = (list) => { return { type: 'SET_USERNAME', list: list } }
6.使用：
//在要使用的頁面里面引入,這里獲取了list
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { getList } from '../../actions/index'
class Login extends Component {
componentDidMount() {
const { dispatch } = this.props
//設置參數
dispatch(getList({ 'back': true, 'user': true, 'homepage': true }))
//獲取參數
const list = this.props.data.list
console.log(list)
}
render() {
return (
<div>hello react!</div>
)
}
}
export default connect(state => state)(Login);
目錄結構：
四．不抽離 webpack配置的方案antd(npm run build 后找不到圖片路徑，暫未解決)
cnpm install --save react-app-rewired customize-cra
cnpm install --save babel-plugin-import
1.配置less,less-loader
cnpm install --save less less-loader
2. 根目錄新建config-overrides.js文件
const { override, fixBabelImports, addWebpackAlias, addLessLoader } = require('customize-cra')
const path = require('path')
function resolve(dir) {
return path.join(__dirname, dir)
}
// addLessLoader 添加less的引用
// fixBabelImports 按需加載antd組件
// addWebpackAlias 路徑別名配置
/* 路徑別名配置 */
module.exports = override(
addWebpackAlias({
'@': resolve('src'),
components: resolve('./src/components'),
assets: resolve('./src/assets'),
static: resolve('./src/static'),
img: resolve('./src/static/img'),
js: resolve('./src/static/js'),
css: resolve('./src/static/css'),
}),
/* antd組件按需加載 */
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: true,
}),
addLessLoader({
javascriptEnabled: true,
modifyVars: { '@primary-color': '#1DA57A' },
}),
);
3. 修改package.json文件，目錄結構
4. 使用：頁面引用less
import '@/static/css/index.less'
五．抽離 webpack配置的方案
npm run eject
運行后會出現config文件夾，在里面配置less 和路徑別名配置
1.配置less,less-loader
cnpm install --save less less-loader
在webpack.config.js里面進行less的配置
2.配置路徑別名
在webpack.config.js里面進行路徑別名的配置
六．配置server, axios
1.配置antd,axios
//安裝antd 組件庫
npm install –save antd
//安裝axios
npm install –save axios
2.src路徑下新建server文件夾，新建server.js文件
import axios from 'axios' //引入antd插件 import { message } from 'antd' // ip地址 axios.defaults.baseURL = 'http://127.0.0.1:8081' axios.defaults.timeout = 300000 // 添加請求攔截器 axios.interceptors.request.use(function (config) { // 在發送請求之前做些什么 return config; }, function (error) { // 對請求錯誤做些什么 return Promise.reject(error); }); // 添加響應攔截器 axios.interceptors.response.use(function (response) { // 對響應數據做點什么 const data = response.data if (!data.success) { // message.error(data.msg) } return data; }, function (error) { // 對響應錯誤做點什么 message.error('服務器錯誤') return Promise.reject(error); }); // 登錄接口 export let checkPatientLogin = async (obj) => { return await axios.post('/checkPatientLogin', obj) }
3.使用：頁面引用
import { checkPatientLogin } from '@/server/server'
六．打包
1.修改package.json文件
2.npm run build
成功后會出現build文件夾，雙擊index.html在瀏覽器打開，可以正常運行