Маршрутизация и 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.

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

Скрытый контент
Комментарии (14)
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

Спасибо.

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

Спасибо!

Ответить
kashamamina

Привет. А я не совсем понял, зачем могут пригодится вложенные пути, это же получается на странице сразу контент из двух маршрутов отрисовываться, в каких ситуациях это может быть полезным?

Ответить
Дмитрий Елисеев

Чтобы группировать маршруты и чтобы выводить вложенные подстраницы как в примере.

Ответить
kashamamina

Спасибо.

Ответить
kashamamina

Привет, а как вы вообще готовите эти выпуски? В том плане, что взять, например, тот же react-router. Вы, получается, берете его документацию, смотрите исходный код, дальше пишете основываясь на нем упрощенную версию и показываете нам, параллельно рассказывая какие проблемы решает этот инструмент и как именно он это делает?

Просто, если подумать, то на первый взгляд это очень сложно. Еще и все это вы делаете по такой крутой пошаговой методике, показывая не просто работу с готовым инструментом, что по сути возможно уже после прочтения документации, а то, как к нему пришли, то есть, какие проблемы при разработке подвигнули разработчиков к его созданию и почему они сделали именно так, а не по-другому. Это же получается что нужно не просто досконально изучить инструмент, а и написать его, при этом отбросив все "лишнее", оставив лишь реализацию основной задумки.

Это все выглядит капец каким сложным, хотя к подобному методу изучения я и стремлюсь, потому что полностью согласен с тем что писал Ричард Фейнман:

What I cannot create, I do not understand.

И это я к тому, что как вы вообще изучаете что-то новое? Может у вас есть какие-то пришедшее с опытом методики изучения, которые значительно ускоряют процесс? В плане, вот вы решили изучить какой-то новый инструмент, с чего вы начинаете, что вы делаете в процессе?

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

Ответить
Дмитрий Елисеев

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

Да, смотрю примеры в документации и досконально разбираю код. Но если просто смотреть код, то не всем может быть понятно, что там происходит в общем и почему сделано именно так.

Но если понять общие архитектурные принципы и паттерны программирования, рефакторинга и тестирования из книг, докладов и своих экспериментов, то со временем начинаешь видеть это же в чужом коде, написанном другим программистом по тем же принципам и паттернам.

Это все выглядит капец каким сложным...

Да, это сложно и долго. И порой за время разбора приходится многое дополнять и порой по несколько раз переделывать чтобы стало понятнее.

И это я к тому, что как вы вообще изучаете что-то новое? Может у вас есть какие-то пришедшее с опытом методики изучения, которые значительно ускоряют процесс?

Увы, но ускоряющих методик нет. Только ежедневное программирование и исследование.

Ответить
kashamamina

спасибо!

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

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

Google
GitHub
Yandex
MailRu