react admin dashboard material ui

2022 년 11 월 17 일

관리자 대시 보드에 반응 | 라이브 링크

사용 된 기술

1. 반응
2. 재료 UI
3. Formik
4. 예
5. Nivo 차트
6. 풀 캘린더
7. React-Pro-SideBar

이 응용 프로그램은로 구성됩니다

• 빛과 어두운 모드
• 대시 보드 요약
• 3 개의 다른 데이터 테이블 페이지
• 사용자 입력 양식 페이지
• 캘린더 통합
• FAQ 페이지
• 4 개의 다른 차트

학습 맥락

• ... 스프레드 연산자 + 조건부 기본 객체 속성 테마 수준에서 로딩
• CSS 도구 ==> 살충제로 소개하십시오
• 객체의 배열 {text, icon}, side-menu를 구성하십시오
• Row-Column Material-UI 레이아웃 데이터 디스플레이 ...
• material ui 의 data-grid 레이아웃 사용 ...
• 경로 이름은 새로 고침 후 선택된 메뉴 항목이됩니다 ...
• 사용자 입력 양식 유효성 검사 yup 확인 ...
• 입력 문자열에서 전화 번호 Regex 패턴 ...
• css 와 함께 [email protected] 의 사용 ...
• full-calendar 라이브러리 사용 ...
• nivo chart 시스템 사용 ...
• 경험을 Vite에서 React로 마이그레이션하고
  • Vite는 전체 칼렌더 lib가있는 issus를 가지고 있기 때문에 ...

원사베이스 패키지/lib ...

아니요	패키지 이름	설명
01	원사는 react-router-dom 추가합니다	URL 탐색
02	원사 추가 [email protected]	Pro 사이드 바를 반응합니다
03	원사 추가 formik	형태 요소
04	원사 추가 yup	양식 검증
05	원사 추가 @mui/material	재료 UI
06	원사 add @emotion/react	재료 UI
07	원사는 @emotion/styled 추가합니다	재료 UI
08	원사는 @emotion/styled 추가합니다	재료 UI
09	원사 추가 @mui/x-data-grid	재료 UI
10	원사 add @mui/icons-material	재료 UI
11	원사 Add @fullcalendar/core	전체 캘린더?
12	원사 Add @fullcalendar/daygrid	전체 캘린더?
13	원사 Add @fullcalendar/timegrid	전체 캘린더?
14	원사 추가 @fullcalendar/list	전체 캘린더?
15	원사 Add @fullcalendar/interaction	전체 캘린더?
16	원사 Add @fullcalendar/react	전체 캘린더?
17	원사 add @nivo/core	Nivo 차트?
18	원사 add @nivo/pie	Nivo 차트?
19	원사 추가 @nivo/bar	Nivo 차트?
20	원사 add @nivo/line	Nivo 차트?
21	원사 추가 @nivo/geo	Nivo 차트?

파일 및 폴더 계층

 ?
src
├── components
|   ├── BarChart.jsx
|   ├── GeographyChart.jsx
|   ├── Header.jsx
|   ├── index.js
|   ├── LineChart.jsx
|   ├── PieChart.jsx
|   ├── ProgressCircle.jsx
|   └── StatBox.jsx
|
├── constants
|   ├── contactsColumns.js
|   ├── faq.js
|   ├── inputFormFields.js
|   ├── inputFormValues.js
|   ├── invoicesColumns.js
|   ├── mockData.js
|   ├── mockGeoFeatures.js
|   ├── sidebarMenu.js
|   └── teamColumns.js
|
├── pages
|   |   Dashboard.jsx
|   |   index.js
|   |
|   ├── charts
|   |   ├── Bar.jsx
|   |   ├── Geography.jsx
|   |   ├── Line.jsx
|   |   └── Pie.jsx
|   |
|   ├── global
|   |   ├── SidebarMenu.jsx
|   |   ├── SidebarMenuItem.jsx
|   |   └── Topbar.jsx
|   |
|   ├── info
|   |   ├── Contacts.jsx
|   |   ├── Invoices.jsx
|   |   └── Team.jsx
|   |
|   └── inputs
|       ├── Calendars.jsx
|       ├── FAQ.jsx
|       └── InputForm.jsx
|
├── styles
|   ├── index.css
|   └── theme.js
|
├── App.jsx
└── index.js
?

 tree /f