nav

toc

title

title	order
Docs	1

content

Get Started

React-Next-Admin

The next generation of admin enterprise applications with awesome architecture, x3 time faster development and better performance Preview:https://react-admin-pro.netlify.app

Features

Umi - React Framework: File-based routing(V6), auto importing, plugins(role/i18n etc), micro-front-end etc.
💡 TypeScript, of course 100%
✅ State management: Umi Model(context with selector) / Valtio (Proxy Base)
✅ Apollo GraphQL: auto generator base on gql schema
🎨 UnoCSS - The instant on-demand atomic CSS engine (Uno,Tailwind,Bootstrap...)
😃 Use UnoCSS icons in Pure CSS, small bundles
💎 Antd V5: Beautiful, Fast, enterprise UI components
✅ Antd Procomponents - Template component, Layout/Skeleton/Table/Form/Validation/Charts
📱 Responsive: Designed for variable screen sizes
🎨 Theming and layout: Customizable with theme editor and layout editor
💎 AHooks: high-quality & reliable React Hooks library
🌐 International: Built-in i18n
⚙️ Best Practices: Solid workflow to make your code healthy
Eslint & Prettier: lint system to improve our code clean and consistency
✅ Husky & Commitlint: commits with rule Commit convention (feat|chore|fix..: 'first commit' )
✅ Custom VsCode Snippets
✅ Mock development: Easy to use mock development solution
✅ UI Test (cypress,Jest): Fly safely with unit and e2e tests
✅ Page Tab: multi-page navigation like chrome with persistent support
✅ Documents/DevTool: use Dumi for writing doc and Floating dev tools browsing view in one place

TODO

CRUD components

Teach Stack & Preparation

node and git - Project development environment
Webpack MFSU - Familiar with Webpack features
React - React] official website:
TypeScript - Familiar with the basic syntax of TypeScript
Es6+ - Familiar with es6 basic syntax
Vue-Router-Next - Familiar with the basic use of vue-router
Ant-Design V5 - Enterprise UI library
Antd procomponents - Antd procomponent

file structure

├── README.md //Description file
├── config //Configuration directory
│ ├── config.dev.ts //Online development environment configuration file
│ ├── config.local.ts //local development environment configuration file
│ ├── config.pro.ts //Online official environment configuration file
│ ├── config.testing.ts //Online test environment configuration file
│ ├── config.ts //General configuration entry file
│ ├── layout.ts //background layout configuration file
│ ├── dumi.ts //dumi document configuration
│ ├── theme.ts //Global style variable configuration
│ ├── proxy.ts //Proxy configuration file
│ └── routes.ts //routing configuration file
├── docs //public documentation directory
│ └── demo.md //document description example
├── mock //mock mock data directory
│ └── api.ts
├── package.json
├── public
│ └── favicon.ico
├── src
│ ├── typings.d.ts //ts type declaration
│ ├── access.ts //umijs layout permission verification hook
│ ├── app.ts //umijs convention runtime configuration file
│ ├── assets //resource storage directory
│ │ └── images
│ ├── components //Component directory
│ │ ├── ErrorBoundary //Global error capture component
│ │ ├── FormCustom //Form package component
│ │ ├── Exception //Grouping of components such as global exceptions
│ │ ├── RightContent //Top bar component
│ │ └── TableCustom //Table package component
│ ├── global.css //Global style file
│ ├── layouts //The global routing public layout can be used optionally
│ │ └── index.tsx
│ ├── locales //Internationalization
│ │ ├── en-US.js
│ │ └── zh-CN.js
│ ├── models //Global state directory named XXXXModel interface
│ │ ├── globalUserModel.ts //dva writing
│ │ ├── useGlobalModel.ts //umijs writing
│ │ └── useUserModel.ts
│ ├── pages
│ │ └── document.ejs //html file configuration
│ ├── hooks //Custom hooks storage folder
│ │ └── usexxxx.ts
│ ├── services //request directory
│ │ ├── config.ts //Request interceptor
│ │ ├── handler.ts //Request type encapsulation
│ │ └── index.ts //Storage request
│ ├── e2e //Browser test
│ │ ├── baseLayout.e2e.js //public test file format routes automatic test page
│ └── utils //The directory for storing public tools or methods
│ ├── globalUtils.ts //Global method, automatically loaded to the global when webpack compiles
│ ├── utils.test.ts //function test
│ └── index.ts //Business public use separately
├── tests //Automatic test extension writing
└── tsconfig.json //ts configuration file