Руководство по созданию панели администратора React | Дизайн шаблона панели администратора React

• Создание панели администратора с использованием React.  

• Включение различных виджетов, индикатора выполнения и интерактивных графиков.  

• Добавление пользовательской таблицы и страниц со списком.  

• Использование функциональных компонентов и опции темных заметок.  

• Развертывание панели с помощью сервиса хостинга.  

• Использование Hostinger для хостинга.  

• Преимущества: дешево, быстро, 100 веб-сайтов, бесплатный домен и SSL-сертификат.  

• Возможность использования купона для дополнительной скидки.  

• Создание пустой папки и установка приложения React.  

• Использование семейства шрифтов Noto.  

• Удаление ненужных строк и комментариев.  

• Запуск приложения и удаление ненужных стилей CSS.  

• Создание собственных файлов CSS и настройка семейства шрифтов.  

• Удаление ненужных файлов и стилей.  

• Создание страниц: вход, домашняя страница, список пользователей и товаров.  

• Использование JSX для обработки HTML-элементов.  

• Установка и использование SASS для CSS.  

• Создание файлов для страниц: home.js, home.scss, list.js, list.scss, login.js, login.scss.  

• Настройка вложенных стилей и глобальных переменных.  

• Создание функций для изменения страниц внутри приложения.  

• Домашняя страница используется для всех переходов внутри приложения.  

• Для достижения динамики используется React Router.  

• Установка и использование React Router.  

• Импорт компонентов React и использование маршрутизатора.  

• Создание маршрута для домашней страницы.  

• Использование вложенных маршрутов для сложных путей.  

• Создание маршрута для страницы входа в систему.  

• Использование параметров для вложенных маршрутов.  

• Пример с пользователями и продуктами.  

• Передача данных между маршрутами.  

• Пример с идентификатором продукта.  

• Завершение настройки маршрутов и переход к созданию домашней страницы.  

• Создаем боковую панель и панель навигации для использования на всех страницах.  

• Создаем папку компонентов и файлы CSS и JS для боковой панели.  

• Импортируем CSS-файл в JS-файл.  

• Создаем три списка: верхний, центральный и нижний.  

• Логотип, список меню и цветовые опции.  

• Создаем домашний контейнер для боковой панели и меню.  

• Используем flexbox для горизонтального расположения элементов.  

• Настраиваем размеры и цвета фона для контейнера и боковой панели.  

• Удаляем ненужные цвета фона и настраиваем размеры.  

• Центрируем элементы с помощью display flex.  

• Настраиваем высоту и цвет фона для верхнего раздела.  

• Добавляем логотип и hr для разделения элементов.  

• Устанавливаем и используем значки Material UI.  

• Копируем и вставляем значки в CSS.  

• Добавляем названия для элементов списка.  

• Добавление стилей для списков и значков.  

• Настройка размера шрифта, цвета и отступов.  

• Использование display: flex для центрирования элементов.  

• Изменение курсора при наведении на элемент списка.  

• Настройка цвета фона для наведения.  

• Изменение цвета значков и создание глобального файла стилей.  

• Создание двух разделов для темного и светлого режимов.  

• Настройка границ и радиуса для элементов.  

• Использование child для изменения цвета фона.  

• Создание оболочки для navbar и добавление отступов.  

• Импорт нового компонента navbar.  

• Создание панели поиска и значков.  

• Создание и настройка значков.  

• Добавление аватара пользователя.  

• Настройка размера шрифта и цвета фона для аватара.  

• Создание элементов для уведомлений и сообщений.  

• Настройка размера и цвета фона.  

• Центрирование и выравнивание элементов.  

• Изменение положения элементов с помощью абсолютного позиционирования.  

• Использование относительного позиционирования для корректного отображения.  

• Пример с изменением цвета фона для улучшения видимости.  

• Создание контейнера для четырех виджетов.  

• Использование flexbox для вертикального расположения элементов.  

• Добавление отступов и ограничений для корректного отображения.  

• Настройка цвета фона, границы и тени для каждого виджета.  

• Использование генератора теней для создания эффектов.  

• Добавление радиуса границы и увеличение высоты элементов.  

• Добавление текста и значков для каждого виджета.  

• Вертикальное расположение элементов для лучшего восприятия.  

• Настройка шрифтов и размеров для каждого элемента.  

• Использование классов для динамического изменения цвета и размера элементов.  

• Пример с пользователями, заказами и доходами.  

• Применение блоков if-else или switch case для изменения данных в зависимости от типа.  

• Настройка значков и ссылок для каждого типа данных.  

• Временное использование данных для отображения.  

• Подготовка к извлечению реальных данных из базы.  

• Добавление суммы и процента для оформления.  

• Исправление опечатки и проверка работы.  

• Настройка цвета и фона значков.  

• Создание контейнера для двух диаграмм.  

• Первая диаграмма отображает ежедневные доходы.  

• Вторая диаграмма показывает доходы за предыдущие шесть месяцев.  

• Создание компонентов для диаграмм в боковой панели.  

• Импорт CSS и настройка стилей.  

• Разделение компонентов на flex-элементы.  

• Изменение отступов и размеров элементов.  

• Добавление заголовка и значка вертикального меню.  

• Создание кругового индикатора выполнения и трех пунктов.  

• Использование библиотеки для создания кругового индикатора выполнения.  

• Импорт и настройка компонента.  

• Добавление текста и настройка ширины штриха.  

• Добавление текста для общего объема продаж и описания.  

• Центрирование элементов и изменение размера контейнера.  

• Настройка шрифтов и цветов для текста.  

• Создание трех пунктов: цель, на прошлой неделе, на прошлом месяце.  

• Импорт данных и значков.  

• Настройка стилей для отображения флагов и выравнивания текста.  

• Добавление положительных и отрицательных шрифтов.  

• Изменение цветов и иконок для пунктов.  

• Тестирование и проверка работы всех элементов.  

• Обсуждение выбора диаграммы для визуализации данных.  

• Рассмотрение различных библиотек, таких как react-v и nivo.  

• Выбор библиотеки rechart из-за простоты использования.  

• Установка библиотеки rechart.  

• Импорт необходимых компонентов и настройка данных.  

• Использование линейного градиента для визуализации данных.  

• Удаление ненужных данных и настройка параметров диаграммы.  

• Изменение названия и идентификатора данных.  

• Настройка соотношения сторон и размеров диаграммы.  

• Настройка стилей диаграммы в CSS-файле.  

• Удаление оси Y и изменение цветов.  

• Настройка сетки диаграммы и её обводки.  

• Создание табличного компонента для отображения последних заказов.  

• Настройка контейнера для списка и компонента таблицы.  

• Применение глобальных стилей и настройка заголовка списка.  

• Быстро разберись с моей функцией.  

• Назови класс.  

• Закрой все и снова открой боковую панель.  

• Переход к интерфейсу Material UI.  

• Использование простой таблицы.  

• Импорт компонентов и данных.  

• Импорт компонентов таблицы.  

• Использование HTML-таблицы.  

• Изменение стилей таблицы.  

• Изменение стилей ячеек таблицы.  

• Добавление уникального ключа для элементов данных.  

• Отображение изображения и названия продукта.  

• Создание класса для статуса.  

• Изменение цветов фона в зависимости от статуса.  

• Завершение домашней страницы.  

• Создание компонента таблицы данных.  

• Импорт боковой панели и навигационной панели.  

• Настройка контейнера для боковой панели.  

• Создание нового компонента.  

• Импорт таблицы данных из Material UI.  

• Закрытие страниц и компонентов.  

• Создание функции и импорт CSS-файла.  

• Установка таблицы данных Material UI.  

• Использование пользовательской разбивки на страницы.  

• Импорт таблицы данных и столбцов.  

• Настройка высоты таблицы и добавление отступов.  

• Проверка работы таблицы и отображение данных.  

• Объяснение структуры строк и столбцов.  

• Использование функции получения значений для объединения данных.  

• Применение render set для отображения HTML-элементов.  

• Создание исходного кода для данных.  

• Экспорт пользовательских строк и столбцов.  

• Применение рендеринга ячейки для отображения изображений и имен.  

• Импорт пользовательских столбцов и строк.  

• Настройка отображения изображений и имен в таблице.  

• Применение гибкого отображения и выравнивание элементов.  

• Создание новых полей для электронной почты и статуса.  

• Применение стилей для отображения статусов.  

• Использование различных цветов для активного, пассивного и ожидающего статуса.  

• Создание компонента для действий.  

• Добавление кнопок "просмотреть" и "удалить" в таблицу данных.  

• Настройка ширины и рендеринг ячейки для отображения кнопок.  

• Использование метода объединения для добавления столбца "действие".  

• Присвоение стилей классам "действие в ячейке", "кнопка просмотра" и "кнопка удаления".  

• Настройка отступов, радиуса и цвета текста для кнопок.  

• Добавление отступов и радиуса для кнопки "просмотр".  

• Настройка цвета фона и границы для кнопки "удаление".  

• Увеличение количества строк на странице до девяти.  

• Сортировка и выбор элементов.  

• Создание единой страницы с боковой панелью и контейнером.  

• Импорт компонентов и настройка стилей.  

• Разделение компонентов на верхний и нижний.  

• Добавление информации о пользователе и товара.  

• Настройка отображения и отступов для компонентов.  

• Добавление изображения товара и его деталей.  

• Настройка размера и положения изображения.  

• Добавление кнопки редактирования и настройка её стиля.  

• Добавление имени пользователя и других деталей товара.  

• Настройка стилей для элементов и отступов.  

• Создание диаграммы для отображения данных.  

• Импорт и настройка компонента диаграммы.  

• Изменение аспекта и названия диаграммы.  

• Добавление таблицы для отображения данных.  

• Использование единого CSS для стилей.  

• Настройка отступов и границ.  

• Добавление свободного места для элементов.  

• Создание новой страницы с новым товаром.  

• Импорт боковой панели и компонентов.  

• Настройка контейнера и панели.  

• Создание контейнера для названия и формы.  

• Добавление изображения и формы.  

• Настройка отступов и теней.  

• Создание формы с метками и вводами.  

• Добавление текстовых полей для имени, фамилии, электронной почты и пароля.  

• Создание кнопки "Отправить".  

• Создание ввода для изображений.  

• Использование иконки для выбора файла.  

• Настройка отображения и стиля иконки.  

• Создание нового файла для данных формы.  

• Импорт данных для разных страниц.  

• Настройка меток и вводов для разных типов данных.  

• Использование карты для ввода данных.  

• Настройка уникальных ключей для каждого элемента.  

• Применение карты для разных страниц с разными входными данными.  

• Завершение страницы и добавление изображения.  

• Использование useState для хранения изображения.  

• Обработка изменения ввода с помощью метода onchange.  

• Открытие консоли и выбор изображения.  

• Создание нового URL для изображения.  

• Использование условия для отображения предыдущего изображения.  

• Добавление ссылок с помощью react-router-dom.  

• Импорт значков из material-ui.  

• Настройка ссылок для перехода на разные страницы.  

• Удаление стилей и добавление стилей для ссылок.  

• Настройка стилей для кнопок и заголовков.  

• Разделение элементов и добавление стилей для кнопки "Добавить нового пользователя".  

• Создание папки стилей и импорт SCSS.  

• Настройка стилей для темного режима.  

• Изменение цветов и стилей для различных элементов.  

• Настройка таблицы данных и кнопок.  

• Изменение цветов и удаление границ.  

• Настройка стилей для ячеек таблицы и кнопок.  

• Создание режима использования для темного режима.  

• Установка темного режима для боковой панели и панели навигации.  

• Настройка стилей для боковой панели и панели навигации.  

• Использование реквизита для каждой страницы неэффективно.  

• Решение: использование контекстного API React.  

• Создание контекстной папки, файла контекста и файла редуктора.  

• Контекстный API позволяет получать доступ к данным из любого компонента.  

• Создание переменной darkmode и функции переключения для изменения цвета.  

• Возможность использования функции в боковой панели и навигационной панели.  

• Добавление контекста и функции уменьшения темного режима.  

• Начальное состояние darkmode установлено в false.  

• Экспорт контекста и использование методов создания контекста из React.  

• Экспорт поставщика контекста для доступа к данным.  

• Передача приложения провайдеру контекста.  

• Необходимость редуктора для управления функциями переключения режимов.  

• Создание редуктора для управления состоянием темного режима.  

• Использование метода переключения регистров для изменения состояния.  

• Три функции: светлый, темный и переключение режимов.  

• Реализация светлого режима: возврат false.  

• Реализация темного режима: изменение состояния на true.  

• Реализация переключения режимов: изменение состояния в зависимости от текущего состояния.  

• Экспортируем состояние "темный режим" и функцию отправки.  

• Используем редуктор для управления состоянием и функцией отправки.  

• Возвращаем контекстный провайдер для приложения.  

• Связываем приложение с провайдером.  

• Импортируем контекст и используем его в приложении.  

• Применяем темный режим и функцию диспетчеризации.  

• Применяем патч для изменения темного режима.  

• Используем метод onclick для изменения состояния.  

• Проверяем работу патча в разных режимах.  

• Создаем состояние использования для данных.  

• Фильтруем элементы при нажатии на кнопку.  

• Проверяем и удаляем элементы по идентификатору.  

• Обновляем репозиторий на GitHub.  

• Разворачиваем приложение на хостинге.  

• Загружаем файлы в папку сборки и проверяем домен.  

• Проверяем функциональность сайта.  

• Создаем поддомен для панели администратора.  

• Перетаскиваем файлы в поддомен и проверяем проект.  

• Завершаем проект и проверяем поддомен.  

• Призываем подписаться на канал и поддержать автора.  

• Прощаемся и надеемся на встречу в следующем уроке.