Полное руководство по React Router | React Routing Для начинающих | React Router DOM Tutorial

• Обзор урока по React Router.  

• Создание полнофункционального многостраничного приложения React.  

• Рекомендации для новичков в React.  

• Создание базового проекта React.  

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

• Установка зависимостей и запуск проекта.  

• Очистка папки src и файла app.js.  

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

• Создание файла index.html и добавление ссылки.  

• Объяснение, что такое маршрутизация страниц.  

• Описание React Router как фреймворка для управления маршрутизацией.  

• Преимущества использования React Router для одностраничных приложений.  

• Установка пакета react-router-dom.  

• Остановка и запуск проекта после установки.  

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

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

• Создание папки components и файла navbar.js.  

• Добавление логотипа, пунктов меню и кнопки.  

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

• Импортирован navbar из папки components.  

• Добавлены пункты меню и кнопка "Начать работу".  

• Логотип перенесен в папку проекта.  

• Импортирован логотип в формате png.  

• Логотип добавлен в тег img.  

• Добавлена панель навигации.  

• Импортирована домашняя страница.  

• Страница "Товары" добавлена, но не отображается.  

• Установлен пакет react-router-dom.  

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

• Добавлены маршруты и сам маршрут.  

• Импортированы маршруты и сам маршрут.  

• Настроены маршруты для домашней страницы, страницы "Товары", "О программе" и "Контакты".  

• Добавлены элементы для отображения соответствующих страниц.  

• Навигатор отображается на всех страницах.  

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

• Проверка работы маршрутизации на разных URL.  

• Добавлены свойства CSS для панели навигации.  

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

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

• Изменены фон и цвет кнопки.  

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

• Логотип уменьшен до нужного размера.  

• Перемещение текста в центр веб-страницы.  

• Добавление заголовка на все страницы.  

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

• Добавление контейнера с классом в файл index.css.  

• Использование display flex, align-item center и justify-content center.  

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

• Добавление тега ссылки в навигационную панель.  

• Импорт тега ссылки из react-router-dom.  

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

• Создание папки layout и файла rootlayout.js.  

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

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

• Импорт провайдера маршрутизатора и указание маршрутизатора.  

• Удаление старого метода настройки маршрутизатора.  

• Проверка работы нового метода на веб-странице.  

• Замена тега link на nav-link.  

• Импорт nav-link из react-router-dom.  

• Использование тега nav-link для навигации по страницам.  

• Замена тега ссылки на навигационную ссылку.  

• Проверка структуры HTML с помощью инструмента разработки.  

• Тег ul с элементами списка и тегом a для каждой ссылки.  

• Тег a преобразуется в тег с активным классом.  

• Активный класс перемещается при переходе на другую страницу.  

• Пример с тегом a для домашней страницы и тегом a для контактов.  

• Тег nav link отслеживает путь и добавляет активный класс.  

• Пример добавления цвета к активному классу в CSS.  

• Активный класс используется для определения активного маршрута.  

• Перенаправление на другой маршрут программным способом.  

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

• Пример перенаправления на страницу "О программе" и "Контакты".  

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

• Пример использования replace для замены текущего маршрута.  

• Пример замены страницы "О программе" на страницу "Контакты".  

• Вложенные маршруты позволяют изменять компоненты текущего маршрута.  

• Создание макета контакта и вложенных маршрутов.  

• Пример отображения контактной информации и формы на основе вложенных маршрутов.  

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

• Создание компонентов "контактная информация" и "контактная форма".  

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

• Добавление кнопок для перехода к вложенным маршрутам.  

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

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

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

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

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

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

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

• Объяснение функции загрузчика маршрутизатора.  

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

• Настройка маршрута для отображения страницы вакансий и добавление меню на панель навигации.  

• В папке assets создаем новый файл data.json.  

• В файле добавляем объект с свойством jobs.  

• В свойство jobs добавляем массив с информацией о вакансиях.  

• Добавляем пять данных о вакансиях в файл data.json.  

• Используем npx для запуска локального API.  

• Открываем ссылку в веб-браузере для проверки API.  

• В компоненте "Работа" добавляем вызов API.  

• Используем функцию fetch для получения данных из API.  

• Возвращаем данные из API и используем их в компоненте.  

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

• Используем хук useLoaderData для получения данных.  

• Отображаем данные на веб-странице с помощью метода map.  

• Добавляем класс jobs для улучшения дизайна.  

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

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

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

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

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

• Добавляем путь с двоеточием и именем, например, id.  

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

• Компонент отображается при добавлении любого идентификатора в URL.  

• Добавляем заголовок "страница сведений о задании".  

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

• Используем хук use patterns для извлечения идентификатора из URL.  

• Добавляем идентификатор в тег h1.  

• URL-адрес позволяет получать разные идентификаторы.  

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

• Добавляем функцию загрузки для асинхронного вызова API.  

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

• Вызываем API и возвращаем данные.  

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

• Компонент сведений о задании отображает данные на основе параметра.  

• Используем хук use loader data для отображения данных.  

• Отображаем данные из API на веб-странице.  

• Добавляем кнопку "Подать заявку сейчас".  

• Исправляем орфографию и добавляем CSS для стилизации страницы.  

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

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

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

• Добавление идентификатора в метод string для получения идентификатора в формате string.  

• Добавление ключа с идентификатором точки задания.  

• Пример использования: переход на страницу с описанием работы на основе идентификатора.  

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

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

• Пример: отображение ошибки при вводе неверного идентификатора.  

• Создание файла error.jsx в папке компонентов.  

• Добавление сообщения об ошибке и кнопки для перехода на главную страницу.  

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

• Добавление элемента ошибки в маршрут для отображения компонента ошибки при ошибке.  

• Проверка ответа API и отображение сообщения об ошибке при неудачной загрузке данных.  

• Пример: отображение сообщения "не удалось найти информацию о задании" при ошибке.  

• Импорт компонента ошибки и его настройка в маршруте.  

• Пример: отображение сообщения об ошибке и кнопки для перехода на главную страницу.  

• Добавление свойств CSS для стилизации компонента ошибки.  

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

• Обзор всех важных концепций React Router.  

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