preface

React-Admin is a management system architecture based on React16.x and Ant Design3.x. Using the front and back end separation, built in many common functions of the management system, through some scripts, encapsulation to help developers develop the management system quickly, focus on business logic.

background

Generally, Internet companies have a large number of management systems either internally or externally. Traditional companies generally have back-end developers to develop management systems, and most of the technologies used are JSP and template language. With the development of the company, the number and complexity of management systems increase, developers spend a lot of energy in the development and maintenance of management systems. Because the management system is mostly used within the company, many companies and teams do not pay attention to it, resulting in poor usability, bugs and ugly pages. Users complain, developers suffer…

Technology of iteration

With the development and iteration of front-end technology, the traditional development method based on back-end template language and jQuery has become outdated, which is difficult to cope with complex requirements and rapid project iteration. In recent years, with the rise of React, Es6 and other technologies, the front-end can be separated from the back-end, and modular components can be used to build large and complex projects.

difficult

WebPack takes five minutes to develop and two hours to configure, combining various solutions: React, Component library, Redux, Router, Ajax, internationalization, theme, Less, CSS Module… There are many good tools and components in the community, but very few that come together to form a systematic solution. Want to make your own? The basic code is just written, and I have to work overtime to fix bugs. Where is the time to work on the framework

The React – Admin is introduced

React-Admin focuses on solving a series of problems involved in management system development, using the latest front-end stack: React, ES6+, componentization, modular, etc. For the management system, the integration of a large number of open source community excellent components, tool libraries; Integrated a large number of common management system functions!

Project screenshots

Here only provides part of the page screenshots, according to the document to quickly start the construction of the project, browse the project rich features!

The project structure

Standardized directory organizations are commonly used in the community.

.├ ─ config // Build Configuration ├─ Nginx-conf // Production Deployment Nginx Configuration Reference ├─ public // Not to Build static files ├─ scripts build Script ├─ SRC │ ├─ Commons / / general js │ ├ ─ ─ the components / / common component │ ├ ─ ─ i18n / / internationalization │ ├ ─ ─ layouts / / page frame layout components │ ├ ─ ─ based component library / / │ ├ ─ ─ │ mock / / simulation data ├─ Models // Based on Redux │ ├─ pages // Page Component │ ├─ Router // Route │ ├─ app.js // Root component │ ├─ index.css // Global Style │ ├─ index.js // project import │ ├ ─ ─ menus. Js/menu/configuration │ ├ ─ ─ setupProxy. Js / / backend alignment proxy configuration │ └ ─ ─ theme. The js/theme/variable ├ ─ ─ package. The json ├ ─ ─ the README. Md └ ─ ─ yarn.lockCopy the code

function

After years of precipitation and accumulation, screening and iteration, the system currently has the following integrated functions:

  • Menu configuration: flat data organization, convenient writing, storage;
  • Page configuration: provides configuration decorator, page function configuration;
  • System routing: simplified routing configuration, a variable to fix;
  • Ajax request: Restful specification, automatic error prompt, prompt can be configured;
  • Mock data: Provide your own data without waiting for the back end to simplify Mock writing.
  • Style & Theme: Less simplified CSS writing, CSS Module conflict prevention, users can customize the theme color;
  • Navigation layout: multiple navigation modes, one-click switch;
  • Model(Redux) : simplify Redux writing, configure synchronization LocalStorage;
  • Internationalization: multiple language support;
  • Permission control: menu level, function level permission control;
  • Nginx configuration: built-in configuration reference;
  • Development agent: interface with back-end debugging during development;
  • Code generation tool: CRUD basic one-click generation, improve development efficiency;

The system provides some basic pages:

  • The login
  • Change the password
  • The menu editor
  • User management
  • Role management

Some Functions

The system integrates a large number of functions, a few brief introduction. There are many functions, not one introduction, interested can stamp here;

The menu

Menu often involves tree operation, state selection, layout and other issues, the system has built-in menu functions:

  • System built-in menu permission editing page
  • Internationalization support
  • Permission to support
  • The menu supports three layout modes: head, left, and head + left.
  • The system automatically selects the corresponding menu based on the route path.
  • If no menu is available, you can select the corresponding parent menu on the secondary page.
  • The left menu will automatically scroll to the visual range;
  • The left menu supports expanding, folding, dragging and changing the width
  • Page title, TAB TAB title and breadcrumbs are automatically generated based on menu status, but corresponding modification methods are also provided.
  • Through the menu configuration, you can open the page with embedded IFrame or open the page with a label.

routing

React-router is used to route the system, and developers also need to write configuration files. As the system grows, configuration files become larger and larger, and multiple people collaborate on various Git conflicts

React-admin built-in route encapsulation, no need to write configuration, just write a variable

@config({
    path: '/path',})export default class SomePage extends React.Component {... }Copy the code

The navigation layout

The system has a variety of built-in navigation layout, one-click switch:

  • The head menu
  • The left side menu
  • Head + left menu
  • The TAB page way

Page to keep

The list page finds a record after querying, page-turning and other operations, click edit page to jump, then jump back to the list page, the list page initialization, but also to find again. If only the page could be kept in the same state every time it was switched! React-admin encapsulates the base layer, enabling it with one click. No special coding is required.

Model(Redux)

Redux is powerful and easy to use, but it’s a lot of boilerplate code. I just want to share data across components. React-admin encapsulates Redux. Use Redux and write only one function.

// page.model.js
export default {
    initialState: {
        title: void 0,},setTitle: title= > ({title}),
}

/ / use
this.props.action.page.setTitle('my title');


Copy the code

The project address

Open Source China: gitee.com/sxfad/react…

GitHub:github.com/sxfad/react…

Documents: the open. Vbill. Cn/react – admin…

The authors introduce

Shubin Wang, front-end architect, Architecture Department, Bank Of China. Deeply engaged in large front-end technology stack, proficient in React, React Native, Vue and other new front-end technologies, and committed to improving front-end r&d efficiency.