react+router-dom项目搭建

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