Маршрутизация и History API

Теперь наше приложение практически готово, но состоит всего из одной страницы. Пришло время разобраться с маршрутизацией. Поэтому сегодня сэмулируем многостраничность в одностраничном приложении на JavaScript. Интегрируем маршрутизацию с адресной строкой браузера через хэши и History API. Отрефакторим код маршрутизатора через композицию для повторного использования в разных проектах. И в итоге перейдём на аналогичный готовый React Router. И помимо этого эффектами доработаем автообновление цен лотов и добавим возможность делать шаблоны для страниц:

  • 00:00:44 - Создание компонента Router
  • 00:01:22 - Добавление состояния локации
  • 00:03:02 - Переключение локации
  • 00:04:55 - Использование ссылок
  • 00:07:53 - Вынос компонента Link
  • 00:12:40 - Вынос маршрута Route
  • 00:15:13 - Передача через контекст
  • 00:17:37 - Хук для контекста
  • 00:19:25 - Дополнительные опции ссылок
  • 00:20:41 - Вынос навигации и контента
  • 00:22:06 - Извлечение вёрстки
  • 00:24:28 - Применение в приложении
  • 00:26:29 - Добавление реальных страниц
  • 00:29:27 - Шаблоны страниц
  • 00:31:28 - Single Page Application
  • 00:34:01 - Динамические маршруты с параметрами
  • 00:38:10 - Передача параметров запроса
  • 00:41:32 - Сопоставление по exact
  • 00:45:37 - Дополнительные свойства маршрута
  • 00:48:11 - Оптимизация производительности со Switch
  • 00:55:59 - Если страница не найдена
  • 00:57:00 - Проблема ошибок загрузки
  • 00:57:49 - Кнопка повторной загрузки
  • 01:00:02 - Поддержка актуальности данных
  • 01:01:43 - Автовыгрузка лотов при уходе
  • 01:05:38 - Привязка к адресу в браузере
  • 01:06:48 - Работа с хэшами в браузере
  • 01:08:22 - Работа с хэшами в JavaScript
  • 01:10:28 - Подписка на hashchange
  • 01:12:55 - Указание адреса в ссылках
  • 01:14:06 - Рефакторинг генерации адреса
  • 01:15:55 - Запуск Nginx через Docker
  • 01:18:57 - Навигация через History API
  • 01:27:51 - Универсальный Router
  • 01:29:29 - Композиция вместо наследования
  • 01:30:09 - Вынос драйвера истории
  • 01:32:33 - Написание драйверов навигации
  • 01:36:17 - Обзор результата
  • 01:38:01 - Обзор React Router
  • 01:44:36 - Подключение React Router
  • 01:47:38 - Обзор результата
  • 01:50:55 - Хранилище MobX
  • 01:52:32 - Отличия от реального React

И теперь разобрав React пора продолжать серию по Slim и React.

А за то, что досмотрели эту серию до конца, выражаю вам свою благодарность в блоге.

Скрытый контент
Комментарии (8)
Huang

Уважаемый, а есть переводимый текст? Я не понимаю по-русски.

Ответить
Arunas

из-за таких уроков стоит изучать русский язык :)

Ответить
Huang

У меня есть такая идея, но русский и китайский - разные языки. Это слишком сложно. Есть уловка?

Ответить
Юлия Елисеева

Мы попробуем перевести текст. Но на это нужно много времени.

Ответить
Huang

Спасибо за ответ. Было бы здорово, если бы у вас были английские субтитры, и, конечно, это принесет большую отдачу вашему труду. 💪💪💪

Ответить
Huang

45 Аутентификация OAuth2 с JWT 46 Query-модель и страница профиля 47 Message Driven архитектура

Dear, how long do I have to wait for these three courses?

Ответить
Arunas

Спасибо.

Ответить
Руслан

Спасибо!

Ответить
Зарегистрируйтесь или войдите чтобы оставить комментарий

Или войти через:

Google
GitHub
Yandex
MailRu