使用create-react-app+react-router-dom+axios+antd+react-redux构建react项目

1、安装、构建

# 全局安装
npm install -g create-react-app
# 构建一个my-app的项目
npx create-react-app my-app
cd my-app

# 启动编译当前的react项目，并自动打开 http://localhost:3000/
npm start

2、项目目录

//默认

├── package.json
├── public                  # 这个是webpack的配置的静态目录
│   ├── favicon.ico
│   ├── index.html          # 默认是单页面应用，这个是最终的html的基础模板
│   └── manifest.json
├── src
│   ├── app.css             # app根组件的css
│   ├── app.js              # app组件代码
│   ├── app.test.js
│   ├── index.css           # 启动文件样式
│   ├── index.js            # 启动的文件（开始执行的入口）！！！！
│   ├── logo.svg
│   └── serviceworker.js
└── yarn.lock  

//修改
├── package.json
├── public                  # 这个是webpack的配置的静态目录
│   ├── favicon.ico
│   ├── index.html          # 默认是单页面应用，这个是最终的html的基础模板
│   └── manifest.json
├── src
│   ├── assets            # 图片等静态资源
│   ├── redux             # 状态
│   │      ├── action.js                 # action
│   │      ├──reducerjs              # reducer
│   │      └── index.js                 # 主文件
│   ├── router             # 路由
│   │      ├── config.js                 # 配置
│   │      ├── frontendauth.js      # 路由守卫
│   │      └── index.js                 # 主文件
│   ├── serve            # 请求
│   │      ├── index.js            # axio
│   ├── views            # 页面
│   ├── app.css             # app根组件的css
│   ├── app.js              # app组件代码
│   ├── app.test.js
│   ├── index.css           # 启动文件样式
│   ├── index.js            # 启动的文件（开始执行的入口）！！！！
│   ├── logo.svg
│   └── serviceworker.js
└── yarn.lock          

 

3、antd

yarn add antd

修改 src/app.css，在文件顶部引入 antd/dist/antd.css。

@import '~antd/dist/antd.css';

.app {
  text-align: center;
}

...

antd 目前的默认文案是英文，如果需要使用其他语言，可以参考下面的方案。

antd 提供了一个 react 组件 configprovider 用于全局配置国际化文案。

import zhcn from 'antd/es/locale/zh_cn';

return (
  <configprovider locale={zhcn}>
    <app />
  </configprovider>
);

4、axios

yarn add axios

/src/serve/index.js，统一配置并绑定到react上

import react from 'react';
import axios from 'axios';
axios.defaults.headers['content-type'] = 'application/json';


let config = {
  baseurl: '',
  timeout: 60 * 1000, // timeout
};
const _axios = axios.create(config);
_axios.interceptors.request.use(
  (config) => {
    // do something before request is sent
    config.headers['authorization'] = '';
    return config;
  },
  (error) => {
    // do something with request error
    return promise.reject(error);
  }
);

// add a response interceptor
_axios.interceptors.response.use(
  (response) => {
    // do something with response data
    return response
  },
  (error) => {
    // do something with response error
    return promise.reject();
  }
);
react.component.prototype.$axios = _axios;

5、router

yarn add react-router-dom

/src/router/config.js

import login from '../views/login';
import record from '../views/record';
import home from '../views/home';


export const routerconfig = [
  {
    path:'/',
    component:home,
    auth:true,
  },{
    path:'/record',
    component:record,
    //auth:true,
  },{
    path:'/login',
    component:login,
  }
];

/src/router/frontendauth.js

import react, {component} from 'react';
import {route, redirect} from 'react-router-dom';

export class frontendauth extends component {
  render() {
    const {location, config} = this.props;
    const {pathname} = location;
    const islogin = localstorage.getitem('__config_center_token')

    // 如果该路由不用进行权限校验，登录状态下登陆页除外
    // 因为登陆后，无法跳转到登陆页
    // 这部分代码，是为了在非登陆状态下，访问不需要权限校验的路由
    const targetrouterconfig = config.find((v) => v.path === pathname);
    if (targetrouterconfig && !targetrouterconfig.auth && !islogin) {
      const {component} = targetrouterconfig;
      return <route exact path={pathname} component={component}/>
    }

    if (islogin) {
      // 如果是登陆状态，想要跳转到登陆，重定向到主页
      if (pathname === '/login') {
        return <redirect to='/'/>
      } else {
        // 如果路由合法，就跳转到相应的路由
        if (targetrouterconfig) {
          return <route path={pathname} component={targetrouterconfig.component}/>
        } else {
          // 如果路由不合法，重定向到 404 页面
          return <redirect to='/404'/>
        }
      }
    } else {
      // 非登陆状态下，当路由合法时且需要权限校验时，跳转到登陆页面，要求登陆
      if (targetrouterconfig && targetrouterconfig.auth) {
        return <redirect to='/login'/>
      } else {
        // 非登陆状态下，路由不合法时，重定向至 404
        return <redirect to='/404'/>
      }
    }
  }
}

/src/router/index.js

import react, { component } from 'react';
import { switch} from 'react-router-dom';

import { frontendauth } from './frontendauth';
import { routerconfig } from './config';


class routes extends component {
  render() {
    return (
      <switch>
        <frontendauth config={routerconfig} />
      </switch>
    )
  }
}

export default routes

app.js

import {browserrouter as router} from 'react-router-dom';
import routes from './router/index'

class app extends component  {
  render() {
    return (
      <router>
        <routes></routes>
      </router>
    );
  }
}

export default app;

6、scss

 安装完后，只要把sass文件改成.scss就行了

npm install node-sass sass-loader --save

7、修改端口号

项目默认端口号是3000，如下可以更改：

在package.json中修改
  "start":"react-scripts start",
为
"start":"set port=9000 && react-scripts start",

8、react-redux

redux不是项目必需的，如果你不确定是否需要，那就是不需要，在react无法实现时，再考虑。

npm install react-redux redux --s

 /src/redux/action.js

/*
 * action 类型
 */

export const count = 'count';
/*
 * 初始值
 */

export const config = {
    count:1000
};


/*
 * action 创建函数
 */

export function setcount(value) {
    return { type: count, value }
}

/src/redux/reducer.js

//这是action
import {
  count
} from './actions'

//这是reducer
const reducer = (state , action) => {
  switch (action.type) {
    case count:
      let count =  action.value;
      return {...state,...{count}};
    default:
      return state;
  }
};
export default reducer

/src/redux/index.js

import { createstore } from 'redux';
import {config} from './actions';
import reducer from './reducer';
let store = createstore(reducer,config);

export default store

/src/index.js

import { provider } from 'react-redux'
import store from './redux/index'

reactdom.render(
  <configprovider locale={zhcn}>
    <provider store={store}>
      <app />
    </provider>
  </configprovider>, document.getelementbyid('root'));

//页面调用示例

import react, { component } from 'react';
import { connect } from 'react-redux';
import {
  setcount,
} from '../redux/actions'

class reduxtest extends component {

  componentdidmount() {
    console.log(this.props)
  }
  render() {
    const { payincrease,tiger } = this.props;
    return (
      <div classname="app">
        <h2>当月工资为{tiger}</h2>
        <button onclick={payincrease}>升职加薪</button>
      </div>
    );
  }
}
//需要渲染什么数据
function mapstatetoprops(state) {
  return {
    tiger: state.count
  }
}
//需要触发什么行为
function mapdispatchtoprops(dispatch) {
  return {
    payincrease: () => dispatch(setcount(99999)),
  }
}

export default reduxtest = connect(mapstatetoprops, mapdispatchtoprops)(reduxtest)