Маршрутизация и 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.
А за то, что досмотрели эту серию до конца, выражаю вам свою благодарность в блоге.
Скрытый контент
Чтобы не пропускать новые эпизоды подпишитесь на наш канал @deworkerpro в Telegram

Уважаемый, а есть переводимый текст? Я не понимаю по-русски.
из-за таких уроков стоит изучать русский язык :)
У меня есть такая идея, но русский и китайский - разные языки. Это слишком сложно. Есть уловка?
Мы попробуем перевести текст. Но на это нужно много времени.
Спасибо за ответ. Было бы здорово, если бы у вас были английские субтитры, и, конечно, это принесет большую отдачу вашему труду. 💪💪💪
45 Аутентификация OAuth2 с JWT 46 Query-модель и страница профиля 47 Message Driven архитектура
Dear, how long do I have to wait for these three courses?
Спасибо.
Спасибо!
Или войти через: