Маршрутизация и 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
Комментарии (25)
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 не планируется?

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

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

Ответить
Svarg

Дмитрий, Благодарю за интересную и полезную серию. Было весьма интересно и насыщено.

Просмотрел, осмыслил и применил на практике каждое видео данной серии. Повторил весь пройденный путь написания всего приложения с нуля.

Написав и осмыслив весь код самостоятельно, приобрёл чёткую и ясную картину, на основе которой теперь ясно как взаимодействовать со всей экосистемой React и всеми сопутствующими библиотеками для него. - разобрался и понял назначение и применение архитектурных принципов MVC и Flux - да и вообще общие принципы построения фронтенд приложений (так как раньше не был с ними знаком).

И главное понял как и куда развиваться дальше, для решения своих практических задач.

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

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

Возможно многим покажется такое глубокое изучение библиотеки React, через самостоятельное её написание, избыточным и слишком затратным по времени занятием. Для себя же понял, что пройдя этот путь, самостоятельного написания всей этой экосистемы, приобрёл хороший практический опыт. На основе которого теперь чётко понятны все тонкости её работы. И то, как использовать этот инструмент осознанно. А значит максимально эффективно.

Еще раз Благодарю за силы вложенные в эту серию и за то стремление делиться своим опытом и знаниями с другими. Интерес это невероятная сила помогающая преодолевать любые преграды. Так пусть интерес к познанию нового, и к тому как это новое просто и доступно объяснять другим, сопутствует вашему творчеству. Здоровья и успехов вам и вашим близким!

Ответить
Евгений

За три дня просмотрел всю серию. Большое спасибо! Всех благ!

Если попробую сразу использовать Next.js (так как нужна генерация контента на сервере для SEO), насколько он отличается от React? И сложен ли будет путь входа в этот фреймворк?

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

Отличается только тем, что компоненты страниц нужно вписывать сразу в готовую папку src/pages. И данные из API для серверной генерации каждой страницы нужно сразу подгружать в методе getServerSideProps. В остальном по синтаксису это тот же React.

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

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

Yandex
MailRu
GitHub
Google