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
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在浏览器打开,可以正常运行