Маршрутизация и 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.
А за то, что досмотрели эту серию до конца, выражаю вам свою благодарность в блоге.
Чтобы не пропускать новые эпизоды подпишитесь на наш канал @deworkerpro в Telegram
Уважаемый, а есть переводимый текст? Я не понимаю по-русски.
из-за таких уроков стоит изучать русский язык :)
У меня есть такая идея, но русский и китайский - разные языки. Это слишком сложно. Есть уловка?
Мы попробуем перевести текст. Но на это нужно много времени.
Спасибо за ответ. Было бы здорово, если бы у вас были английские субтитры, и, конечно, это принесет большую отдачу вашему труду. 💪💪💪
45 Аутентификация OAuth2 с JWT 46 Query-модель и страница профиля 47 Message Driven архитектура
Dear, how long do I have to wait for these three courses?
Спасибо.
Спасибо!
Привет. А я не совсем понял, зачем могут пригодится вложенные пути, это же получается на странице сразу контент из двух маршрутов отрисовываться, в каких ситуациях это может быть полезным?
Чтобы группировать маршруты и чтобы выводить вложенные подстраницы как в примере.
Спасибо.
Привет, а как вы вообще готовите эти выпуски? В том плане, что взять, например, тот же react-router. Вы, получается, берете его документацию, смотрите исходный код, дальше пишете основываясь на нем упрощенную версию и показываете нам, параллельно рассказывая какие проблемы решает этот инструмент и как именно он это делает?
Просто, если подумать, то на первый взгляд это очень сложно. Еще и все это вы делаете по такой крутой пошаговой методике, показывая не просто работу с готовым инструментом, что по сути возможно уже после прочтения документации, а то, как к нему пришли, то есть, какие проблемы при разработке подвигнули разработчиков к его созданию и почему они сделали именно так, а не по-другому. Это же получается что нужно не просто досконально изучить инструмент, а и написать его, при этом отбросив все "лишнее", оставив лишь реализацию основной задумки.
Это все выглядит капец каким сложным, хотя к подобному методу изучения я и стремлюсь, потому что полностью согласен с тем что писал Ричард Фейнман:
What I cannot create, I do not understand.
И это я к тому, что как вы вообще изучаете что-то новое? Может у вас есть какие-то пришедшее с опытом методики изучения, которые значительно ускоряют процесс? В плане, вот вы решили изучить какой-то новый инструмент, с чего вы начинаете, что вы делаете в процессе?
Было бы интересно услышать об этом, ведь по сути ключевым при совершенствовании себя в какой-то области, да и вообще в целом, является постоянное изучение чего-то нового.
Да, смотрю примеры в документации и досконально разбираю код. Но если просто смотреть код, то не всем может быть понятно, что там происходит в общем и почему сделано именно так.
Но если понять общие архитектурные принципы и паттерны программирования, рефакторинга и тестирования из книг, докладов и своих экспериментов, то со временем начинаешь видеть это же в чужом коде, написанном другим программистом по тем же принципам и паттернам.
Да, это сложно и долго. И порой за время разбора приходится многое дополнять и порой по несколько раз переделывать чтобы стало понятнее.
Увы, но ускоряющих методик нет. Только ежедневное программирование и исследование.
спасибо!
Может, напишите статью в блог о Вашем обучении? Читал по вашему совету "Тайм-драйв: Как успевать жить и работать" / "Экстремальный тайм-менеджмент" - помогло.
Ваша методика очень похожа на "3 столпа обучения":
Можете, пожалуйста, немного рассказать о Вашем процессе обучение в парадигме этих трёх?
Например:
Считаю, что практика обязательно должна содержать: ...
Чего НЕ стоит делать: ...
Приведу свой пример в рамках этого курса:
1) Получение информации. Учу с утра, каждый будний день. На это время отключаю все месседжеры через Freedom. Через Free Countdown ставлю таймер на обучение - чтобы не выходить за рамки(сегодня 4 часа получил, а потом 4 дня не учишь из-за завалов). После - работаю. Источники информации:
2) Осмысление.
3) Практика.
В курсе действительно сильно не хватает ДЗ. Жгучее чувство на уроке ~№8 заставило искать практику.
Планирую сейчас писать приложение для учёта, и модифицировать мой Pet-проект. После 2-3 проектов в стол попытаюсь попасть на боевой проект по React.
Я у себя таким структурированием не увлекаюсь.
Просто гуглю что мне нужно и иногда наблюдаю за чатами. И читаю и смотрю всё, что попадается в статьях, докладах и книгах. И применяю это на практике в своих проектах.
Чтобы понимать какую информацию брать, а какую нет, достаточно прочитать по нужной теме не один, а несколько источников. И после такого прочтения десятка статей уже видны совпадения и различия мнений нескольких авторов.
А по фундаментальным и научным вещам советую находить первоисточник, а не ограничиваться только пересказами в блогах. И слушать экспертов, а не ориентироваться на сплетни.
По поводу человекпонятного наименования методов, и самодокументации кода таким путем:
Есть мануал по этой теме? С примерами, плохими практиками и топом ошибок?
Попробовал Гуглить, но в основном правила в рамках конкретных фреймворков/CMS нахожу.
Всё же нашел нужный запрос: "Соглашения об именах +программирование". Там статья в Вики, и несколько статей по теме.
Но если есть какой-то "звездный материал" - упомяните, пожалуйста
Ну это просто здравый смысл. А вообще такие примеры приводятся в материалах по темам чистого кода и рефакторинга.
Полный вынос мозга с непривычки.
Что-то подобное по VUE не планируется?
Пока нет. Но там похожие библиотеки.
Или войти через: