react admin dashboard material ui

17 de noviembre de 2022

React Admin Panel de administración | Enlace en vivo

Tecnología utilizada

1. Reaccionar
2. Ui material
3. Formik
4. Sí
5. Gráfico nivo
6. Calendario completo
7. React-pro-sidebar

Esta aplicación consiste en

• Modo Light & Dark
• Resumen del tablero
• 3 páginas de tabla de datos diferentes
• Página de formulario de entrada del usuario
• Integración de calendario
• Página de preguntas frecuentes
• 4 gráficos diferentes

Contexto de aprendizaje

• ... Operador de extensión + carga de propiedad de objeto base condicional a nivel de tema
• introducir con la herramienta CSS ==> Pesticida
• por matriz de objeto {text, icon}, construye el menú lateral
• Pantalla de datos de diseño de columna de fila-UI ...
• Uso del diseño data-grid de material ui ...
• El nombre de la ruta se convierte en elemento de menú seleccionado, después de actualizar también ...
• Validación de formulario de entrada del usuario yup Comprobación ...
• Número de teléfono Patrón regex de la cadena de entrada ...
• Uso de [email protected] con su css ...
• Uso de la biblioteca full-calendar ...
• Uso del sistema nivo chart ...
• migrar la experiencia de Vite a reaccionar,
  • Porque Vite tiene un tema con librios de calendario completo ...

Paquetes base de hilo/lib ...

No	Nombre de los paquetes	Descripción
01	hilo agregar react-router-dom	Navegación de URL
02	Yarn Agregar [email protected]	Barra lateral react Pro
03	hilo agregar formik	Formulario de elementos
04	hilo agregar yup	Validaciones de formulario
05	hilo agregar @mui/material	Ui material
06	hilo agregar @emotion/react	Ui material
07	hilo agregar @emotion/styled	Ui material
08	hilo agregar @emotion/styled	Ui material
09	Yarn Agregar @mui/x-data-grid	Ui material
10	hilo agregar @mui/icons-material	Ui material
11	hilo agregar @fullcalendar/core	¿Calendario completo?
12	hilo agregar @fullcalendar/daygrid	¿Calendario completo?
13	hilo agregar @fullcalendar/timegrid	¿Calendario completo?
14	hilo agregar @fullcalendar/list	¿Calendario completo?
15	hilo agregar @fullcalendar/interaction	¿Calendario completo?
16	hilo agregar @fullcalendar/react	¿Calendario completo?
17	hilo agregar @nivo/core	Gráfico nivo?
18	hilo agregar @nivo/pie	Gráfico nivo?
19	hilo agregar @nivo/bar	Gráfico nivo?
20	hilo agregar @nivo/line	Gráfico nivo?
21	hilo agregar @nivo/geo	Gráfico nivo?

Jerarquía de archivos y carpetas

 ?
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