react admin dashboard material ui

17 ноября 2022 года

React Admin Dashboard | Живая ссылка

Технология используется

1. Реагировать
2. Материал UI
3. Форма
4. Ага
5. Ниво диаграмма
6. Полный календарь
7. React-Pro-Sidebar

Это приложение состоит из

• Свет и темный режим
• Резюме приборной панели
• 3 разные страницы таблицы данных
• Страница ввода пользователя
• Интеграция календаря
• Страница часто задаваемых вопросов
• 4 разных диаграммы

Контекст обучения

• ... Оператор спреда + Условное свойство базового объекта Загрузка на уровне темы
• ввести с инструментом CSS ==> Пестицид
• по массиву объекта {text, icon}, построить боковой меню
• Столовый материал для макета-макета
• Использование data-grid material ui ...
• Имя пути становятся выбранным пунктом меню, после обновления также ...
• Проверка ввода пользователя yup Проверка ...
• Установка режима режима номера телефона от входной строки ...
• Использование [email protected] с его css ...
• Использование full-calendar библиотеки ...
• Использование системы nivo chart ...
• мигрировать опыт от Vite, чтобы отреагировать,
  • Потому что у Vite есть какая-то вещество с полным календарным LIB ...

Пакеты базовых пряжи/lib ...

Нет	Пакеты название	Описание
01	пряжа добавить react-router-dom	URL -навигация
02	пряжа добавить [email protected]	React Pro боковая панель
03	пряжа добавить formik	Формируйте элементы
04	пряжа добавить yup	Валидации формы
05	пряжа добавить @mui/material	Материал UI
06	пряжа добавить @emotion/react	Материал UI
07	пряжа добавить @emotion/styled	Материал UI
08	пряжа добавить @emotion/styled	Материал UI
09	пряжа добавить @mui/x-data-grid	Материал UI
10	пряжа добавить @mui/icons-material	Материал UI
11	пряжа добавить @fullcalendar/core	Полный календарь?
12	пряжа добавить @fullcalendar/daygrid	Полный календарь?
13	пряжа добавить @fullcalendar/timegrid	Полный календарь?
14	пряжа добавить @fullcalendar/list	Полный календарь?
15	пряжа добавить @fullcalendar/interaction	Полный календарь?
16	пряжа добавить @fullcalendar/react	Полный календарь?
17	пряжа добавить @nivo/core	Nivo диаграмма?
18	пряжа добавить @nivo/pie	Nivo диаграмма?
19	пряжа добавить @nivo/bar	Nivo диаграмма?
20	пряжа добавить @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