前言
本文是介绍如何搭建企业级react项目，所用的技术都是最新最主流的，后面我会再写一篇 《基于React企业级SSR项目搭建全记录》，敬请期待！
技术选型
| Package Name | Version |
|---|---|
| antd | ^3.16.6 |
| axios | ^0.18.0 |
| connected-react-router | ^6.4.0 |
| classnames | ^2.2.6 |
| immutable | ^4.0.0-rc.12 |
| @loadable/component | ^5.10.0 |
| react | ^16.8.6 |
| react-redux | ^7.0.3 |
| react-router-config | ^5.0.0 |
| react-router-dom | ^5.0.0 |
| react-scripts | 3.0.1 |
| redux | ^4.0.1 |
| redux-actions | ^2.6.5 |
| redux-logger | ^3.0.6 |
| redux-persist | ^5.10.0 |
| redux-persist-expire | ^1.0.2 |
| redux-persist-transform-immutable | ^5.0.0 |
| redux-saga | ^1.0.2 |
| history | ^4.7.2 |
使用create-react-app创建新项目
create-react-app react-project目录结构如下所示
|-- .gitignore
|-- README.md
|-- package.json
|-- yarn.lock
|-- public
| |-- favicon.ico
| |-- index.html
| |-- logo192.png
| |-- logo512.png
| |-- manifest.json
| |-- robots.txt
|-- src
|-- App.css
|-- App.js
|-- App.test.js
|-- index.css
|-- index.js
|-- logo.svg
|-- serviceWorker.js然后我们把webpack暴露出来，执行如下命令：
yarn eject目录结构如下所示：
|-- .gitignore
|-- README.md
|-- package.json
|-- yarn.lock
|-- config
| |-- env.js
| |-- modules.js
| |-- paths.js
| |-- pnpTs.js
| |-- webpack.config.js
| |-- webpackDevServer.config.js
| |-- jest
| |-- cssTransform.js
| |-- fileTransform.js
|-- public
| |-- favicon.ico
| |-- index.html
| |-- logo192.png
| |-- logo512.png
| |-- manifest.json
| |-- robots.txt
|-- scripts
| |-- build.js
| |-- start.js
| |-- test.js
|-- src
|-- App.css
|-- App.js
|-- App.test.js
|-- index.css
|-- index.js
|-- logo.svg
|-- serviceWorker.js添加依赖包
"dependencies": {
"@babel/plugin-proposal-decorators": "^7.4.0",
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
"@loadable/component": "^5.10.0",
"antd": "^3.16.6",
"axios": "^0.18.0",
"babel-plugin-import": "^1.11.0",
"babel-plugin-transform-decorators-legacy": "^1.3.5",
"classnames": "^2.2.6",
"connected-react-router": "^6.4.0",
"history": "^4.7.2",
"immutable": "^4.0.0-rc.12",
"node-sass": "^4.11.0",
"prettier": "^1.16.4",
"react-redux": "^7.0.3",
"react-router-config": "^5.0.0",
"react-router-dom": "^5.0.0",
"redux": "^4.0.1",
"redux-actions": "^2.6.5",
"redux-logger": "^3.0.6",
"redux-persist": "^5.10.0",
"redux-persist-expire": "^1.0.2",
"redux-persist-transform-compress": "^4.2.0",
"redux-persist-transform-encrypt": "^2.0.1",
"redux-persist-transform-immutable": "^5.0.0",
"redux-saga": "^1.0.2"
},添加好了依赖包，我们运行起来看看有没有问题yarn start
添加框架基础配置文件
1、添加.editorconfig文件统一格式化标准
root = true
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.yml]
indent_style = space
indent_size = 22、添加.eslintrc文件代码检验标准
{
"extends": ["react-app", "plugin:prettier/recommended"]
}3、去掉package.json里面的babel设置，再添加.babelrc文件对babel的支持
{
"presets": [
"react-app"
],
"plugins": [
[
"import",
{
"libraryName": "antd",
"libraryDirectory": "es",
"style": "css"
},
"antd"
]
]
}
目录结构如下所示：
|-- .babelrc
|-- .editorconfig
|-- .gitignore
|-- README.md
|-- package.json
|-- yarn.lock
|-- config
| |-- env.js
| |-- modules.js
| |-- paths.js
| |-- pnpTs.js
| |-- webpack.config.js
| |-- webpackDevServer.config.js
| |-- jest
| |-- cssTransform.js
| |-- fileTransform.js
|-- public
| |-- favicon.ico
| |-- index.html
| |-- logo192.png
| |-- logo512.png
| |-- manifest.json
| |-- robots.txt
|-- scripts
| |-- build.js
| |-- start.js
| |-- test.js
|-- src
|-- App.css
|-- App.js
|-- App.test.js
|-- index.css
|-- index.js
|-- logo.svg
|-- serviceWorker.js代码运行起来看看有没有问题。
删除src下所有文件
目录结构如下：
|-- .babelrc
|-- .editorconfig
|-- .gitignore
|-- README.md
|-- package.json
|-- yarn.lock
|-- config
| |-- env.js
| |-- modules.js
| |-- paths.js
| |-- pnpTs.js
| |-- webpack.config.js
| |-- webpackDevServer.config.js
| |-- jest
| |-- cssTransform.js
| |-- fileTransform.js
|-- public
| |-- favicon.ico
| |-- index.html
| |-- logo192.png
| |-- logo512.png
| |-- manifest.json
| |-- robots.txt
|-- scripts
| |-- build.js
| |-- start.js
| |-- test.js
|-- srcsrc目录
1、添加index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { ConfigProvider, message } from "antd";
import zhCN from "antd/es/locale/zh_CN";
import moment from "moment";
import "moment/locale/zh-cn";
import * as serviceWorker from "./serviceWorker";
import "./assets/css/index.css";
import "./assets/css/base.scss";
import "./assets/css/override-antd.scss";
moment.locale("zh-cn");
message.config({
duration: 2,
maxCount: 1
});
//去掉所有页面的console.log
if (process.env.NODE_ENV === "production") {
console.log = function() {};
}
ReactDOM.render(
//增加antd对中文的支持
,
document.getElementById("root")
);
2、添加App.js文件
App.js里面包含对redux的配置，代码如下：
import React, { Component } from "react";
import { Spin } from "antd";
import { Provider } from "react-redux";
import { renderRoutes } from "react-router-config";
import { ConnectedRouter } from "connected-react-router/immutable";
import { PersistGate } from "redux-persist/es/integration/react";
import configureStore, { history } from "./redux/store";
import AppRoute from "./layout/AppRoute";
const { persistor, store } = configureStore();
store.subscribe(() => {
// console.log("subscript", store.getState());
});
class App extends Component {
constructor(props) {
super(props);
}
render() {
const customContext = React.createContext(null);
return (
);
}
}
export default App;
3、添加assets文件夹
目录结构如下：
|-- assets
|-- audio
|-- css
|-- fonts
|-- image
|-- video4、添加components组件文件夹
同时创建common文件夹，目录结构如下：
|-- components
|-- common5、添加config文件夹
并添加base.config.js文件，里面包含一些框架基础信息以及后台的url和port数据，代码如下：
export default {
company: "Awbeci",
title: "后台管理系统平台",
subTitle: "后台管理系统平台",
copyright: "Copyright © 2019 Awbeci All Rights Reserved.",
logo: require("../assets/image/hiy_logo.png"),
host: "http://10.0.91.189",
port: "19101",
persist: "root"
};
目录结构如下：
|-- config
|-- base.conf.js6、添加HOC高阶组件文件夹(可选)
同时创建control.js文件，作用是根据屏幕分辨率自动计算宽高，代码如下：
import React from "react";
import { is, Map, fromJS } from "immutable";
const control = WrappedComponent =>
class extends React.Component {
constructor(props) {
super(props);
this.state = {
// 可视区高度和宽度
document: {
body: {
width: 0,
height: 0
},
//侧边栏高度和宽度
sidebar: {
width: 0,
height: 0
},
//内容区域高度和宽度
content: {
width: 0,
height: 0
},
header: Map({
height: 64,
width: 0,
menu: Map({
height: 0,
width: 0
})
})
}
};
}
componentWillMount() {
let cw = document.body.clientWidth;
let ch = document.body.clientHeight;
this.computedLayout(cw, ch);
}
componentDidMount() {
window.addEventListener("resize", this.computedLayout);
}
componentWillUnmount() {
window.removeEventListener("resize", this.computedLayout);
}
computedLayout = () => {
let width = document.body.clientWidth;
let height = document.body.clientHeight;
this.setState((state, props) => ({
//todo:
}));
};
shouldComponentUpdate(nextProps, nextState) {
const thisProps = this.props || {};
const thisState = this.state || {};
nextState = nextState || {};
nextProps = nextProps || {};
if (Object.keys(thisProps).length !== Object.keys(nextProps).length || Object.keys(thisState).length !== Object.keys(nextState).length) {
return true;
}
for (const key in nextProps) {
if (!is(thisProps[key], nextProps[key])) {
return true;
}
}
for (const key in nextState) {
if (!is(thisState[key], nextState[key])) {
return true;
}
}
return false;
}
render() {
return 目录结构如下：
|-- HOC
|-- control.js7、添加app文件夹
app文件夹包含框架布局和页面布局组件以及路由等配置文件，目录结构如下：
|-- app
|-- AppRoute.js
|-- Loading.js
|-- RouterView.js
|-- layout
| |-- index.js
| |-- index.scss
|-- master
|-- index.js
|-- index.scss8、添加pages文件夹
pages文件夹包含登录和首页页面文件，目录结构如下：
|-- pages
|-- Index.js
|-- NoFound.js
|-- NoPermission.js
|-- login
|-- Login.js
|-- login.scss9、添加redux文件夹
redux文件夹包含redux-actions和redux-saga以及middleware中间件配置，目录结构如下：
|-- redux
|-- reducers.js
|-- sagas.js
|-- store.js
|-- auth
| |-- authAction.js
| |-- authReducer.js
| |-- authSaga.js
|-- layout
| |-- layoutPageAction.js
| |-- layoutPageReducer.js
|-- middleware
|-- authTokenMiddleware.js10、添加router文件夹
同时添加index.js文件，目录结构如下：
|-- router
|-- index.js11、添加service文件夹
service文件夹封装了对后台api接口的请求 ，目录结构如下：
|-- service
|-- apis
| |-- 1.0
| |-- index.js
| |-- urls.js
|-- request
|-- ApiRequest.js
详细配置
上面把代码和目录结构都已经给出，下面我们详细讲解下如何配置redux、redux-saga、react-acitons、immutable等等
1、配置action
配置action我们选用的是 redux-actions插件，如下所示
import { createActions } from "redux-actions";
export const authTypes = {
AUTH_REQUEST: "AUTH_REQUEST",
AUTH_SUCCESS: "AUTH_SUCCESS",
AUTH_FAILURE: "AUTH_FAILURE",
SIGN_OUT: "SIGN_OUT",
CHANGE_PASSWORD: "CHANGE_PASSWORD"
};
export default createActions({
[authTypes.AUTH_REQUEST]: ({ username, password }) => ({ username, password }),
[authTypes.AUTH_SUCCESS]: data => ({ data }),
[authTypes.AUTH_FAILURE]: () => ({}),
[authTypes.SIGN_OUT]: () => ({}),
[authTypes.CHANGE_PASSWORD]: (oldPassword, newPassword) => ({ oldPassword, newPassword })
});
2、配置reducer
跟actions类似，使用的也是redux-actions,代码如下：
import { handleActions } from "redux-actions";
import { authTypes } from "./authAction";
import { Map, fromJS, merge } from "immutable";
const initState = fromJS({
user: null,
token: ""
});
const authReducer = handleActions(
{
[authTypes.AUTH_SUCCESS]: (state, action) => {
return state.merge({
user: action.data.user,
token: action.data.token
});
},
[authTypes.SIGN_OUT]: (state, action) => {
return state.merge({
user: null,
token: ""
});
}
},
initState
);
export default authReducer;
添加完了，不要忘了注册一下reducer
import { combineReducers } from "redux";
import { connectRouter, LOCATION_CHANGE } from "connected-react-router/immutable";
import layoutReducer from "./layout/layoutReducer";
import authReducer from "./auth/authReducer";
export default history =>
combineReducers({
router: connectRouter(history),
layoutReducer,
authReducer
});
3、配置redux-saga
代码如下所示：
import { call, put, takeLatest, select } from "redux-saga/effects";
import { push } from "connected-react-router";
import authAction, { authTypes } from "./authAction";
import { layoutPageTypes } from "../layout/layoutAction";
import { message } from "antd";
import Apis from "../../service/apis/1.0";
import config from "../../config/base.conf";
function strokeItem(name, value) {
localStorage.setItem(name, value);
}
function clearItem(name) {
localStorage.removeItem(name);
}
function* test() {
yield put({
type: authTypes.AUTH_SUCCESS,
data: {
user: {
name: "Awbeci"
},
token: "awbeci token"
}
});
yield put({
type: layoutPageTypes.GET_MENUS,
menus: [
{
icon: "file",
id: 1,
isShow: "1",
title: "页面一",
url: "/"
},
{
icon: "file",
id: 2,
isShow: "1",
title: "页面二",
url: "/departmentManage"
},
{
icon: "file",
id: 3,
isShow: "1",
title: "页面三",
url: "/userManage"
}
]
});
yield put({
type: layoutPageTypes.SAVE_MENU_INDEX,
payload: {
keyPath: ["1"]
}
});
yield put(push("/"));
}
function* signout(action) {
yield call(clearItem, "token");
yield call(clearItem, `persist:${config.persist}`);
//清除token
// 设置选中第一个菜单
yield put({
type: layoutPageTypes.SAVE_MENU_INDEX,
payload: {
keyPath: ["126"]
}
});
yield put({
type: layoutPageTypes.SAVE_MENU_COLLAPSED,
payload: {
collapsed: false
}
});
yield put({
type: layoutPageTypes.GET_MENUS,
menus: []
});
//跳转到登录页面
yield put(push("/login"));
}
function* signin(action) {
try {
yield call(test);
} catch (error) {
message.info("用户名或密码错误");
yield call(clearItem, "token");
} finally {
}
}
export default function* watchAuthRoot() {
yield takeLatest(authTypes.AUTH_REQUEST, signin);
yield takeLatest(authTypes.SIGN_OUT, signout);
}
添加saga文件不要忘了注册一下，如下：
import { all, fork } from "redux-saga/effects";
import authSaga from "./auth/authSaga";
/*添加对action的监听 */
export default function* rootSaga() {
yield all([fork(authSaga)]);
}
4、配置store
配置store的时候其实已经把redux-logger、redux-persist、immutable.js一起配置了，代码如下所示：
import { createStore, compose, applyMiddleware } from "redux";
import { routerMiddleware } from "connected-react-router/immutable";
import { createMigrate, persistStore, persistReducer } from "redux-persist";
import createEncryptor from "redux-persist-transform-encrypt";
import immutableTransform from "redux-persist-transform-immutable";
import storage from "redux-persist/es/storage";
import createSagaMiddleware from "redux-saga";
import logger from "redux-logger";
import { createBrowserHistory } from "history";
import createRootReducer from "./reducers";
import rootSaga from "./sagas";
import config from "../config/base.conf";
import { authTokenMiddleware } from "./middleware/authTokenMiddleware";
export const history = createBrowserHistory();
// create the router history middleware
const historyRouterMiddleware = routerMiddleware(history);
// create the saga middleware
const sagaMiddleware = createSagaMiddleware();
// 组合middleware
const middleWares = [sagaMiddleware, historyRouterMiddleware, logger];
// 加密localstorage
const encryptor = createEncryptor({
secretKey: "hiynn",
onError: function(error) {}
});
const persistConfig = {
transforms: [
immutableTransform()
],
key: config.persist,
storage,
version: 2
};
const finalReducer = persistReducer(persistConfig, createRootReducer(history));
export default function configureStore(preloadedState) {
const store = createStore(finalReducer, preloadedState, compose(applyMiddleware(...middleWares)));
let persistor = persistStore(store);
sagaMiddleware.run(rootSaga);
return { persistor, store };
}
5、使用store
在App.js文件中添加对store的引用，代码如下：
import React, { Component } from "react";
import { Spin } from "antd";
import { Provider } from "react-redux";
import { renderRoutes } from "react-router-config";
import { ConnectedRouter } from "connected-react-router/immutable";
import { PersistGate } from "redux-persist/es/integration/react";
import configureStore, { history } from "./redux/store";
import AppRoute from "./app/AppRoute";
const { persistor, store } = configureStore();
store.subscribe(() => {
// console.log("subscript", store.getState());
});
class App extends Component {
constructor(props) {
super(props);
}
render() {
const customContext = React.createContext(null);
return (
);
}
}
export default App;
AppRoute.js
import React, { Component } from "react";
import { connect } from "react-redux";
import { Switch, Redirect } from "react-router";
import { BrowserRouter as Router, HashRouter, Route } from "react-router-dom";
import Login from "../pages/login/Login";
import LayoutContainer from "./layout";
import NoFound from "../pages/NoFound";
@connect(store => ({
store
}))
class AppRoute extends Component {
// 用户认证
Authentication() {
return this.props.store.authReducer.get("token") ? */}
this.Authentication()} />
{/* */}
);
}
}
export default AppRoute;
6、配置middleware
中间件作用是当刷新页面的时候重新把token设置到ApiRequest这样token就不会丢失了。
import { REHYDRATE } from "redux-persist/lib/constants";
import ApiRequest from "../../service/request/ApiRequest";
import { authTypes } from "../auth/authAction";
import { fromJS } from "immutable";
/**保存token中间件 */
export const authTokenMiddleware = store => next => action => {
/**当刷新页面 persist会触发 action = REHYDRATE*/
if (action.type === REHYDRATE) {
if (typeof action.payload !== "undefined") {
let authReducer = action.payload.authReducer;
if (authReducer) {
const token = authReducer.get("token");
ApiRequest.setToken(token ? token : null);
}
}
}
/**当登录成功会触发 action = AUTH_SUCCESS*/
if (action.type === authTypes.AUTH_SUCCESS) {
ApiRequest.setToken(action.data.token);
}
return next(action);
};
7、配置静态路由
import React from "react";
import loadable from "@loadable/component";
import RouterView from "../app/RouterView";
import NoFound from "../pages/NoFound";
import NoPermission from "../pages/NoPermission";
import Loading from "../app/Loading";
const Index = loadable(() => import("../pages/Index"), { fallback: 静态路由需要react-router-config配合使用，代码如下：
import { renderRoutes } from "react-router-config";
import routes from "../../router";
// 这里的routes就是上面的路由文件
renderRoutes(routes)8、封装axios
包含get、post、delete、put、upload等等
import axios from "axios";
import { message } from "antd";
import config from "../../config/base.conf";
/**
* Http服务类
* get
* post
* upload
* put
* patch
* delete
*/
class ApiRequest {
constructor() {
//创建axios实例
this.instance = axios.create({
baseURL: `${config.host}:${config.port}`
});
}
/**
* 通过authTokenMiddleware中间件监听action=REHYDRATE|AUTH_SUCCESS来设置token
*/
setToken = token => {
this.instance.defaults.headers.common["Authorization"] = token;
};
authentication = str => {
let errJson = JSON.parse(str);
if (errJson.response && errJson.response.status === 401) {
message.error("用户认证出错，正在跳转登录页面！");
setTimeout(() => {
localStorage.removeItem(`persist:${config.persist}`);
window.location.href = "/login";
}, 1500);
}
};
upload(url, formData) {
return new Promise((resolve, reject) => {
this.instance
.post(url, formData, {
headers: {
"Content-Type": "multipart/form-data"
}
})
.then(({ data }) => {
resolve(data);
})
.catch(error => {
let errStr = JSON.stringify(error);
this.authentication(errStr);
reject(errStr);
});
});
}
get(url, params = {}) {
return new Promise((resolve, reject) => {
this.instance
.get(url, { params: { ...params } })
.then(({ data }) => {
resolve(data);
})
.catch(error => {
let errStr = JSON.stringify(error);
this.authentication(errStr);
reject(errStr);
});
});
}
delete(url, params = {}) {
return new Promise((resolve, reject) => {
this.instance
.delete(url, { params: { ...params } })
.then(({ data }) => {
resolve(data);
})
.catch(error => {
let errStr = JSON.stringify(error);
this.authentication(errStr);
reject(errStr);
});
});
}
post(url, params = {}) {
return new Promise((resolve, reject) => {
this.instance
.post(url, { ...params })
.then(({ data }) => {
resolve(data);
})
.catch(error => {
let errStr = JSON.stringify(error);
if (url.includes("login")) {
reject(errStr);
} else {
this.authentication(errStr);
}
});
});
}
put(url, params = {}) {
return new Promise((resolve, reject) => {
this.instance
.put(url, { ...params })
.then(({ data }) => {
resolve(data);
})
.catch(error => {
let errStr = JSON.stringify(error);
this.authentication(errStr);
reject(errStr);
});
});
}
patch(url, params = {}) {
return new Promise((resolve, reject) => {
this.instance
.patch(url, { ...params })
.then(({ data }) => {
resolve(data);
})
.catch(error => {
let errStr = JSON.stringify(error);
this.authentication(errStr);
reject(errStr);
});
});
}
}
export default new ApiRequest();总结
1、其实redux、redux-saga、react-router都有介绍如何配置，只是整合时插件前后顺序有问题
2、ConnectedRouter是连接redux reducer和react-router的插件，并且要支持immutable.js
3、React项目集成Immutable.js
4、antd-layoutui
5、本文代码