| nav |
| ||||
|---|---|---|---|---|---|
| toc | content | ||||
| title | Get Started |
The next generation of admin enterprise applications with awesome architecture, x3 time faster development and better performance Preview:https://react-admin-pro.netlify.app
- 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
- 🎨 Tailwind Css
- 💎 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
- Fist init check config in
script/locale/locale-config.json - Run script
script/locale/locale-translate.ts
- Setup:
lobe-i18n -0 - Enter key or proxy server
- Translate
lobe-i18n
- Go tor src/locale/translation/*
- every add split file need to import to _all
- CRUD components
- 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
├──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 fileOpen the project in Gitpod (free online dev environment for GitHub) and start coding immediately.
[![Open in Gitpod] soon
Local development environment: pnpm start
Online development environment: pnpm build:dev
Online testing environment: pnpm build:testing
Online production environment: pnpm build
Modern browsers.
 Edge |  Firefox |  Chrome |  Safari |  Opera |
|---|---|---|---|---|
| Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
Any type of contribution is welcome, here are some examples of how you may contribute to this project:
- Use
React Next Adminin your daily work. - Submit issues to report bugs or ask questions.