How to use react with antd components to implement a management system

This time I will show you how to use react with antd components to implement the management system, and what are the precautions for using react with antd components to implement the management system. The following is a practical case, let's take a look.

Using create-react-app scaffolding

For specific basic configuration, please refer to

Management system demo implemented with antd components, online address

Reflection before development

1. Load on demand

webpack's import function of dynamically loaded modules, import (parameter), the parameter is the module address.

Note: A promise object will be returned after import.

import('/components/chart').then(mud => {
  dosomething(mod)
});

This demo builds an asynchronous loading component Bundle. For specific codes, please see

class Bundle extends Component {
 constructor(props) {
   super(props);
   this.state = {
     mod: null
   };
 }
 unmount = false
 componentDidMount = () => {
  // 加载组件时，打开全局loading
  this.props.dispatch(loading(true))
  this.load(this.props)
 }
 componentWillUnmount = () => {
  this.unmount = true
 }
 
 componentWillReceiveProps(nextProps) {
   if (nextProps.load !== this.props.load) {
     this.load(nextProps)
   }
 }
 load(props) {
   if (this.state.mod) {
     return true
   }
   //注意这里，使用Promise对象; mod.default导出默认
   props.load().then((mod) => {
     if (this.unmount) {
       // 离开组件时，不异步执行setState
       this.props.dispatch(loading(false))
       return false
     }
     this.setState({
       mod: mod.default ? mod.default : mod
     }, _ => {
      // 组件加载完毕，关闭loading
      this.props.dispatch(loading(false))
     });
   });
 }
 render() {
   return this.state.mod ? this.props.children(this.state.mod) : null;
 }
}

Specific usage

<Bundle load={() => import('路径')}>
  {Comp => {
   return Comp ? <Comp /> : <p>加载中...</p>
  }}
 </Bundle>

2. Global loading

With redux, dispatch => reducer update => mapstate update, load rendering in the root component

For details, please see this demo address src/routers/router.js——render function

3. Configure routing objects

The project layout is as follows

##This demo uses router4, and the official document demonstrates a single line Route (such as Vue router) does not have a unified configuration object. The management system basically revolves around content for business development. Building a common configuration is helpful for developing and building router.config.js

const routers = [
 {
  menuName: '主页',
  menuIco: 'home',
  component: 'home/home.js', // 主页
  path: '/admin/home' // 主页
 },
 {
  menuName: '用户',
  menuIco: 'user',
  children: [
   {
    menuName: '用户列表',
    component: 'user/list.js', // 主页
    path: '/admin/user/list' // 主页
   }
  ]
 },
 {
  menuName: '多级菜单',
  menuIco: 'setting',
  children: [
   {
    menuName: '多级菜单2',
    children: [
     {
      menuName: '菜单',
      component: 'user/list.js', // 主页
      path: '/admin/user/list3' // 主页
     }
    ]
   }
  ]
 },
 {
  menuName: '关于我',
  menuIco: 'smile-o',
  component: 'about/about.js', // 主页
  path: '/admin/about' // 主页
 }
]

to implement the idea. The outermost layout is Admin, and the content is wrapped by Admin, then you can use this. props.children, enter the content into content. (Use the bundle component to be loaded asynchronously and then inserted into the component for rendering)

<Admin>
  <Content { ...this.props } breadcrumb={this.state.breadcrumb}>
    {this.props.children}
  </Content>
</Admin>
// Content组件内部
render() {
  return (
    <p> 
      {this.props.children}
    </p>
  )
}
// 本demo实现,详见src/routers/router.js
<Route
 path="/admin"
 render={item => (
  <Admin {...item} { ...this.props }>
   {initRouters.map(el => this.deepItem(el, { ...this.props, ...item}))}
  </Admin>
 )}
/>

4. Configure a general reducer

For multiple people to cooperate in development, the components of some business scenarios need to be improved. (Students who do not understand status improvement, please surf the Internet scientifically)

import otherReducers from './otherReducers'
const App = combineReducers({
  rootReducers,
  ...otherReducers // 其他需要增加的reducers
})

5. Login verification

Use the withRouter function, which is triggered when the page performs routing jump

const newWithRouter = withRouter(props => {
  // ....
})

If you are not logged in, return to

return <Redirect to="/login" />

6. Routing interception

Same as above, return to the corresponding menu or block based on routing configuration and permissions

return <Redirect to={其他} />

7 Other configurations

7-1. Custom style

// 修改webpack.config.dev.js 和 webpack.config-prod.js 配置文件
{
  test: /\.(css|less)$/,
  // 匹配src的都自动加载css-module
  include: [/src/],
  exclude: [/theme/],
  use: [
    require.resolve('style-loader'), {
      loader: require.resolve('css-loader'),
      options: {
        importLoaders: 1,
        modules: true, // 新增对css modules的支持
        localIdentName: '[path]_[name][local]_[hash:base64:5]'
      }
    }, {
      loader: require.resolve('postcss-loader'),
      options: {
        // Necessary for external CSS imports to work
        // https://github.com/facebookincubator/create-react-app/issues/2677
        ident: 'postcss',
        plugins: () => [
          require('postcss-flexbugs-fixes'),
          autoprefixer({
            browsers: [
              '>1%', 'last 4 versions', 'Firefox ESR', 'not ie < 9&#39;, // React doesn&#39;t support IE8 anyway
            ],
            flexbox: &#39;no-2009&#39;
          })
        ]
      }
    }, {
      loader: require.resolve(&#39;less-loader&#39;) // compiles Less to CSS
    }
  ]
}, {
  // 不匹配node_modules,theme的都不能自动加载css-module
  test: /\.(css|less)$/,
  include: [/node_modules/,/theme/],
  use: [
    {
      loader: "style-loader"
    }, {
      loader: "css-loader",
      options: {
        importLoaders: 1
      }
    }, {
      loader: require.resolve(&#39;less-loader&#39;) // compiles Less to CSS
    }
  ]
},

Usage: Directly import

import './assets/theme/App.less'

in App.js 7-2. Hot update

Step 1:

// 安装react-hot-loader 
npm install --save-dev react-hot-loader

Step 2:

Add react-hot-loader/patch# to the entry value of webpack.config.js

##Step 3:

Set hot to true in webpackDevServer.config.js

Step 4: Add react to plugins in babel-loader in webpack.config.dev.js -hot-loader/babel

{
  test: /\.(js|jsx|mjs)$/,
  include: paths.appSrc,
  loader: require.resolve('babel-loader'),
  options: {
    // This is a feature of `babel-loader` for webpack (not Babel itself). It
    // enables caching results in ./node_modules/.cache/babel-loader/ directory for
    // faster rebuilds.
    cacheDirectory: true,
    plugins: [
      'react-hot-loader/babel'
    ]
  }
},

Step 5:

Rewrite index.js, App mount

import { AppContainer } from 'react-hot-loader'
const render = Component => {
  ReactDOM.render(
    <AppContainer>
      <Component></Component>
    </AppContainer>,
    document.getElementById('root')
  )
}
render(App)
if(module.hot) {
  module.hot.accept('./App',() => {
    render(App);
  });
}

7-3. Local browsing

Add

homepage:'.'

directly to package.json Postscript: Insights on using react and vue

react is functional programming, code difficulty, learning curve, pretentiousness index, community ecological diversity are related A bit higher than vue.

vue provides a large number of instructions to reduce the difficulty of development, and detailed and complete documentation makes it faster to get started.

react provides fewer APIs. Compared with vue's instructions, the functions of business scenarios need to be implemented by yourself, which is more difficult.

vue is suitable for small and medium-sized projects, and can be quickly coordinated by a single soldier or a small number of people. Development

react is suitable for large-scale projects, multi-person collaboration

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

How to use vue to implement SMS verification performance optimization

Use vue-i18 plug-in in Vue to achieve Multi-language switching

The above is the detailed content of How to use react with antd components to implement a management system. For more information, please follow other related articles on the PHP Chinese website!