Add a code generator to generate a single table CURD page based on the table structure, and then modify it manually according to the actual business. react-admin-generator

Parcel

The biggest surprise for developers at the end of 2017 was Parcel. Anyone who has used Webpack will feel that the configuration is too complex, and even Webpack maintainers sometimes copy common configurations for projects. If you use Parcel, just define index.html, index.js, and index.css and it will do all the packaging for you as if you had never used any of the packaging tools.

Webpack is complex but flexible and full of features, and Parcel comes at a price for zero configuration, and we expect it to improve.

Mobx

Redux is the default state management option when developing React applications, but I chose Mobx. Redux is influenced by functional programming, but many people come from object-oriented language backgrounds and have a hard time adapting to the principles of functional programming at first. So Mobx is more beginner friendly.

Mobx’s principle is simple: anything derived from application state should be automatically acquired. How to understand? Let’s say I have a variable A, and my application subscribes to that variable, and when A changes my application automatically receives the latest value. The variable in React is state. When state changes, Mox-React rerenders the view.

Technology stack

Core library

  • typescript
  • react@v16
  • react-router@v4
  • mobx
  • mobx-react

tool

The directory structure

├ ─ ─ the SRC │ ├ ─ ─ app. The SCSS │ ├ ─ ─ app. The TSX # entry documents │ ├ ─ ─ pages. The TSX # page template │ ├ ─ ─ routes. The ts # menu │ ├ ─ ─ assets # resource file │ │ └ ─ ─ Logo. SVG │ ├─ Components │ ├─ Content-Container # Defines the fade in animation │ │ │ └ ─ ─ index. The TSX │ │ ├ ─ ─ index. The TSX # components entry documents │ │ ├ ─ ─ layout # page layout │ │ │ ├ ─ ─ index. The SCSS │ │ │ └ ─ ─ Index. The TSX │ │ ├ ─ ─ the login - landing form # component │ │ │ ├ ─ ─ index. The SCSS │ │ │ └ ─ ─ index. The TSX │ │ └ ─ ─ the router cc-link │ │ └ ─ ─ index. The TSX │ ├ ─ ─ Service # API │ │ ├ ─ ─ base. The ts │ │ ├ ─ ─ but ts # API entry documents │ │ └ ─ ─ the user │ │ └ ─ ─ index. The ts │ ├ ─ ─ stores # mobx store │ │ ├ ─ ─ app │ │ │ └ ─ ─ but ts │ │ ├ ─ ─ base. The ts │ │ ├ ─ ─ but ts # store entrance file │ │ ├ ─ ─ member │ │ │ └ ─ ─ but ts │ │ └ ─ ─ the user │ │ │ └ ─ ─ but ts ├ ─ ─ utils # tools │ │ ├ ─ ─ auth. Ts │ │ ├ ─ ─ the fetch. Ts │ │ ├ ─ ─ but ts # tools entry documents │ │ └ ─ ─ the validator. Ts │ └ ─ ─ views # page │ ├ ─ ─ but ts │ ├ ─ ─ the login │ │ └ ─ ─ index. The TSX │ ├ ─ ─ member │ │ └ ─ ─ index. The TSX │ ├ ─ ─ not - found │ │ └ ─ ─ Index. The TSX │ └ ─ ─ the user │ ├ ─ ─ the add. The TSX │ ├ ─ ─ edit. The TSX │ ├ ─ ─ form. The TSX │ ├ ─ ─ index. The TSX │ ├ ─ ─ the list. The TSX │ └ ─ ─ table. The TSX ├ ─ ─ Index.html ├ ─ ─ tsconfig. Json ├ ─ ─ tslint. Json ├ ─ ─ yarn - error. The log └ ─ ─ yarn. The lock ├ ─ ─ the README. Md ├ ─ ─ package. The jsonCopy the code