react admin dashboard material ui

17 novembre 2022

Tableau de bord d'administration React | Lien en direct

Technologie utilisée

1. Réagir
2. Ui matériel
3. Formik
4. Ouais
5. Nivo
6. Calendrier complet
7. React-pro-sidebar

Cette application se compose de

• Mode clair et sombre
• Résumé du tableau de bord
• 3 pages de table de données différentes
• Page de formulaire d'entrée utilisateur
• Intégration du calendrier
• Page FAQ
• 4 graphiques différents

Contexte d'apprentissage

• ... Spread Operator + Conditional Base Object Property Chargement au niveau du thème
• introduire avec CSS Tool ==> pesticide
• par tableau d'objet {texte, icon}, construire le menu latéral
• Row-Colonne Material-UI Données Données Affichage ...
• Utilisation de la disposition data-grid material ui ...
• Le nom du chemin devient élément de menu sélectionné, après actualiser également ...
• Validation du formulaire d'entrée de l'utilisateur Vérification yup ...
• Numéro de téléphone motif regex à partir de la chaîne d'entrée ...
• Utilisation de [email protected] avec son css ...
• Utilisation de la bibliothèque full-calendar ...
• Utilisation du système nivo chart ...
• migrer l'expérience de Vite à réagir,
  • Parce que Vite a quelques Issus avec une lib à pleine échelle ...

Packages de base en fil / lib ...

Non	Nom de packages	Description
01	fil Ajouter react-router-dom	Navigation URL
02	yarn ajouter [email protected]	React Pro Sidebar
03	fil Ajouter formik	Former des éléments
04	fil Ajouter yup	Formez les validations
05	fil Ajouter @mui/material	Ui matériel
06	fil Ajouter @emotion/react	Ui matériel
07	fil Ajouter @emotion/styled	Ui matériel
08	fil Ajouter @emotion/styled	Ui matériel
09	Yarn Add @mui/x-data-grid	Ui matériel
10	fil Ajouter @mui/icons-material	Ui matériel
11	yarn add @fullcalendar/core	Calendrier complet?
12	yarn add @fullcalendar/daygrid	Calendrier complet?
13	yarn add @fullcalendar/timegrid	Calendrier complet?
14	yarn add @fullcalendar/list	Calendrier complet?
15	yarn add @fullcalendar/interaction	Calendrier complet?
16	yarn add @fullcalendar/react	Calendrier complet?
17	yarn add @nivo/core	Nivo Chart?
18	fil Ajouter @nivo/pie	Nivo Chart?
19	yarn add @nivo/bar	Nivo Chart?
20	fil Ajouter @nivo/line	Nivo Chart?
21	yarn add @nivo/geo	Nivo Chart?

Hiérarchie de fichiers et de dossiers

 ?
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