Building react rapid development framework based on Umi 01

Introduced

Build a rapid development framework based on Umi and react application framework. Umi is based on routing, supports the next.js of the class, and various advanced routing functions, and expands the functions, such as on-demand loading with the support of the routing level.
We will develop a framework for common functions and business functions based on Umi.
Framework Feature List

• Global layout
• Rights Management
• Package list additions and deletions change
• Internationalization
• Integrated G2 Chart Charts
• Integrated Socket.io
• .... (Subsequent additions)

Business functions

• User Management
• .... (Subsequent additions)

Create a project

Umi provides scaffolding for us to quickly create projects. Refer to Umi scaffolding to create a project
Package Manager We recommend yarn to replace the Npm,yarn in the package installation speed does improve a lot

1. Execute in your empty directory,

yarn create umi

We need to choose antd, code splitting, dll, hard source

2. Installation dependencies

yarn

3. Start the Local development

yarn start

Building Global layout and menus

Umi thesrc/layoutsdirectory to store our global layout components, add code in the Index.js as follows

class BaseLayout extends React.Component {
  state = {
    collapsed: false,
  };

  onCollapse = (collapsed) => {
    console.log(collapsed);
    this.setState({ collapsed });
  }

  render() {
    return (
      <Layout style={{ minHeight: '100vh' }}>
        <Sider
          collapsible
          collapsed={this.state.collapsed}
          onCollapse={this.onCollapse}
        >
          <div className={styles.logo} />
          <MenuComponent />
        </Sider>
        <Layout>
          <Header style={{ background: '#fff', padding: 0 }} />
          <Content style={{ margin: '0 16px' }}>
            <Breadcrumb style={{ margin: '16px 0' }}>
              <Breadcrumb.Item>User</Breadcrumb.Item>
              <Breadcrumb.Item>Bill</Breadcrumb.Item>
            </Breadcrumb>
            <div style={{ padding: 24, background: '#fff', minHeight: 360 }}>
              {this.props.children}
            </div>
          </Content>
          <Footer style={{ textAlign: 'center' }}>
            Ant Design ©2018 Created by Ant UED
          </Footer>
        </Layout>
      </Layout>
    );
  }
}
export default BaseLayout;



Layout componentsMenuComponentare required,
Before building the component we need to mock the menu data, Umi support mock, we add auth.js under the mock file




const menu = [
   {
     id: 1,
     name: 'Overview',
     icon: 'dashboard',
     url: '/ dashboard',
   },
   {
     id: 2,
     name: 'System Management',
     icon: 'setting',
     url: '/ system',
     children: [
       {
         id: 21,
         name: 'User Management',
         icon: 'user',
         url: '/ system / user',
       }
     ]
   },
];




Menu data is a tree structure, in the project, can be structured into the foreground, you can also let the back-end small partners return. More flexible, we can do the rendering based on the data.
There is also a very important concept, Umi also integrates the DVA, wesrc/modelsadd auth.js below the path below.




import { getMenu } from '../services/auth';
export default {
  namespace: 'auth',

  state: {
    menu: []
  },

  effects: {
    *getMenu(_, { put, select, call }) {
      const menu = yield call(getMenu);
      yield put({
        type: 'setMenu',
        payload: menu,
      });
    },
  },

  reducers: {
    setMenu(state, { payload }) {
      return {
        ...state,
        menu: payload,
      };
    },
  },
};





The basic work has been completed. Can be used to build menucomponent components.




@connect(({auth}) => {
  return {
    menu: auth.menu,
  }
})
class MenuComponent extends React.Component {

  componentDidMount() {
    // 获取 menu 数据
    this.props.dispatch({
      type: 'auth/getMenu',
    })
  }

  link = (url) => {
    router.push(url);
  }

  renderMenu = (data) => {
    return data && data.map(d => {
      if (d.children && d.children.length > 0) {
        return <SubMenu
          key={d.id}
          title={<span><Icon type={d.icon} /><span>{d.name}</span></span>}
        >
          {this.renderMenu(d.children)}
        </SubMenu>
      }
      return (
          <Menu.Item
            key={d.id}
            onClick={() => {this.link(d.url)}}
          >
            <Icon type={d.icon} />
            <span>{d.name}</span>
        </Menu.Item>
      )
    });
  }

  render() {
    const { menu } = this.props;
    return (
      <Menu theme='dark'
        defaultSelectedKeys={['1']}
        mode='inline'>
        {
          this.renderMenu(menu)
        }
      </Menu>
    );
  }
}

export default MenuComponent;




In general, the menu component accesses the saga effect, sends out an asynchronous request to get the data, and then gets the menu data through DVA connect to render.





We refresh the browser to see that the menu has been rendered correctly.



Conclusion


This is the beginning of the first step, but also welcome the supervision, the next step will gradually improve the above mentioned functions. The code has been placed on GitHub and you can view the umi-react on your own.





I built a QQ group, we add in, you can communicate together. Group No. 787846148





For those who do not understand the contents of the following reference
Umi official website
DVA official website