react admin dashboard material ui

17 de novembro de 2022

Reactar o painel de administração | Link ao vivo

Tecnologia usada

1. Reagir
2. Ui material
3. Formik
4. Sim
5. Gráfico Nivo
6. Calendário completo
7. React-pro-sidebar

Este aplicativo consiste em

• Modo claro e escuro
• Resumo do painel
• 3 páginas de tabela de dados diferentes
• Página de formulário de entrada do usuário
• Integração do calendário
• Página de perguntas frequentes
• 4 gráficos diferentes

Contexto de aprendizado

• ... Operador espalhado + propriedade de objeto base condicional Carregando no nível do tema
• Introduzir com a ferramenta CSS ==> pesticida
• por matriz de objeto {text, ícone}, construir um menu lateral
• Dados de layout de material-UI da coluna de linha ROW ...
• Uso do layout data-grid da interface material ui ...
• Nome do caminho Torne -se o item de menu selecionado, após a atualização também ...
• Validação do formulário de entrada do usuário yup verificação ...
• Número de telefone padrão regex padrão da string de entrada ...
• Uso de [email protected] com seu css ...
• Uso da biblioteca full-calendar ...
• Uso do sistema nivo chart ...
• migrar a experiência de vite para reagir,
  • Porque Vite tem algum Issus com Lib de Calendário Full ...

Pacotes base de fios/lib ...

Não	Nome dos pacotes	Descrição
01	Fios Adicione react-router-dom	Navegação de URL
02	Yarn Add [email protected]	React Pro barra lateral
03	YARN ADD formik	Elementos de forma
04	Fio Adicione yup	Valitações de formulário
05	Fio Adicionar @mui/material	Ui material
06	Fio Adicione @emotion/react	Ui material
07	Fios Adicione @emotion/styled	Ui material
08	Fios Adicione @emotion/styled	Ui material
09	Fio Adicionar @mui/x-data-grid	Ui material
10	YARN ADD @mui/icons-material	Ui material
11	Fio Adicionar @fullcalendar/core	Calendário completo?
12	Fio Adicionar @fullcalendar/daygrid	Calendário completo?
13	Fio Adicionar @fullcalendar/timegrid	Calendário completo?
14	Fio Adicionar @fullcalendar/list	Calendário completo?
15	Fio Adicionar @fullcalendar/interaction	Calendário completo?
16	Fio Adicionar @fullcalendar/react	Calendário completo?
17	Fio Adicionar @nivo/core	Gráfico nivo?
18	Fio Adicionar @nivo/pie	Gráfico nivo?
19	Fio Adicionar @nivo/bar	Gráfico nivo?
20	Fio Adicionar @nivo/line	Gráfico nivo?
21	Fio Adicionar @nivo/geo	Gráfico nivo?

Hierarquia de arquivos e pastas

 ?
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