react admin dashboard material ui

17. November 2022

Admin admin Dashboard | Live -Link

Technologie verwendet

1. Reagieren
2. Material UI
3. Formik
4. Jawohl
5. NIVO -Diagramm
6. Vollkalender
7. React-Pro-SideBar

Diese Anwendung besteht aus

• Hell & Dark -Modus
• Dashboard -Zusammenfassung
• 3 verschiedene Datentabellenseiten
• Benutzereingangsformularseite
• Kalenderintegration
• FAQ -Seite
• 4 verschiedene Diagramme

Lernkontext

• ... Operator ausbreiten + Bedingte Basisobjekteigenschaft Laden auf Themenebene
• Einführung mit CSS -Tool ==> Pestizid
• durch Array des Objekts {Text, Symbol}, Konstruktionsseite-Menu konstruieren
• Zeilen-Säulen-Material-UI-Layout-Daten Anzeige ...
• Verwendung des data-grid Layouts von material ui ...
• Pfadname wird ausgewählt, nach dem Aktualisieren auch ...
• Benutzereingangsformular Validierung yup -Überprüfung ...
• Telefonnummer Regex -Muster aus der Eingabezeichenfolge ...
• Verwendung von [email protected] mit seinem css ...
• Nutzung der full-calendar ...
• Verwendung des nivo chart ...
• Erfahrung von vite zu reagieren,
  • Weil Vite etwas ISSUS mit vollem Kalendar Lib hat ...

Garn Basispakete/lib ...

NEIN	Pakete Name	Beschreibung
01	Garn Add react-router-dom	URL -Navigation
02	Garn add [email protected]	React Pro Sidebar
03	Garn fügen Sie formik hinzu	Formelemente
04	Garn fügen Sie yup	Formularvalidierungen
05	Garn fügen Sie @mui/material hinzu	Material UI
06	Garn fügen @emotion/react	Material UI
07	Garn fügen @emotion/styled	Material UI
08	Garn fügen @emotion/styled	Material UI
09	Garn fügen Sie @mui/x-data-grid	Material UI
10	Garn fügen Sie @mui/icons-material hinzu	Material UI
11	Garn fügen Sie @fullcalendar/core hinzu	Voller Kalender?
12	Garn fügen Sie @fullcalendar/daygrid hinzu	Voller Kalender?
13	Garn fügen Sie @fullcalendar/timegrid hinzu	Voller Kalender?
14	Garn add @fullcalendar/list hinzufügen	Voller Kalender?
15	Garn fügen Sie @fullcalendar/interaction	Voller Kalender?
16	Garn fügen Sie @fullcalendar/react	Voller Kalender?
17	Garn fügen Sie @nivo/core hinzu	NIVO -Diagramm?
18	Garn fügen Sie @nivo/pie hinzu	NIVO -Diagramm?
19	Garn fügen Sie @nivo/bar	NIVO -Diagramm?
20	Garn fügen Sie @nivo/line hinzu	NIVO -Diagramm?
21	Garn fügen Sie @nivo/geo hinzu	NIVO -Diagramm?

Datei- und Ordnerhierarchie

 ?
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