Задонатить и смотреть →
Открой безлимитный доступ к 100+ полезных скринкастов и получай скидки на все предстоящие мероприятия

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

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

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

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

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

Скрытый контент (код, слайды, ...) для подписчиков. Открыть →
Дмитрий Елисеев
elisdn.ru
Комментарии (22)
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

спасибо!

Ответить
S.Polessky

Может, напишите статью в блог о Вашем обучении? Читал по вашему совету "Тайм-драйв: Как успевать жить и работать" / "Экстремальный тайм-менеджмент" - помогло.


Ваша методика очень похожа на "3 столпа обучения":

  1. Получение информации
  2. Осмысление информации
  3. Применение на практике

Можете, пожалуйста, немного рассказать о Вашем процессе обучение в парадигме этих трёх?

Например:

  1. Я получаю информацию из ..., но не беру информацию формата ...
  2. Чтобы осмыслить информацию я ...
  3. Практикую таким образом: ...

Считаю, что практика обязательно должна содержать: ...

Чего НЕ стоит делать: ...

Ответить
S.Polessky

Приведу свой пример в рамках этого курса:

1) Получение информации. Учу с утра, каждый будний день. На это время отключаю все месседжеры через Freedom. Через Free Countdown ставлю таймер на обучение - чтобы не выходить за рамки(сегодня 4 часа получил, а потом 4 дня не учишь из-за завалов). После - работаю. Источники информации:

  • Сам курс
  • Если какую-то тему понимал с трудностью(Промисы, Контейнерные компоненты) - гуглил статьи с хвостом "для чайников". Как правило, на Medium статьи программистов-блогеров помогают лучше понять тему.
  • Если встречал интересную тему, в которую хотел погрузится дополнительно(чистые функции, Промисы, Деструктуризация) - читал документацию.

2) Осмысление.

  • По началу конспектировал весь урок. После 2-3 уроков: только главные моменты - чтобы экономить время. Зачем?: конспектируя мне гарантировано нужно разобраться в теме, иначе я не смогу пояснить что происходит своими словами. {https://i.imgur.com/nNTAhVK.png | https://i.imgur.com/C6fd4Fs.png}
  • Заглядывал в коммиты каждого урока. Копировал локально в IDE, комментировал про себя как ведет себя код
  • Перечитываю важные темы раз в 1-3 недели. Стоит авто-напоминание.

3) Практика.

В курсе действительно сильно не хватает ДЗ. Жгучее чувство на уроке ~№8 заставило искать практику.

  • Реализовал из "Введения React" игру "Крестики-нолики" + все дополнительные задачи.
  • Написал для рабочего проекта компонент для работы с объявлениями на сайте (благо, React декларирует что может быть использован частично)

Планирую сейчас писать приложение для учёта, и модифицировать мой Pet-проект. После 2-3 проектов в стол попытаюсь попасть на боевой проект по React.

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

Я у себя таким структурированием не увлекаюсь.

Просто гуглю что мне нужно и иногда наблюдаю за чатами. И читаю и смотрю всё, что попадается в статьях, докладах и книгах. И применяю это на практике в своих проектах.

Чтобы понимать какую информацию брать, а какую нет, достаточно прочитать по нужной теме не один, а несколько источников. И после такого прочтения десятка статей уже видны совпадения и различия мнений нескольких авторов.

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

Ответить
S.Polessky

По поводу человекпонятного наименования методов, и самодокументации кода таким путем:

Есть мануал по этой теме? С примерами, плохими практиками и топом ошибок?

Попробовал Гуглить, но в основном правила в рамках конкретных фреймворков/CMS нахожу.

Ответить
S.Polessky

Всё же нашел нужный запрос: "Соглашения об именах +программирование". Там статья в Вики, и несколько статей по теме.

Но если есть какой-то "звездный материал" - упомяните, пожалуйста

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

Ну это просто здравый смысл. А вообще такие примеры приводятся в материалах по темам чистого кода и рефакторинга.

Ответить
Герман

Полный вынос мозга с непривычки.

Что-то подобное по VUE не планируется?

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

Пока нет. Но там похожие библиотеки.

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

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

Google
GitHub
Yandex
MailRu