Теперь наше приложение практически готово, но состоит всего из одной страницы. Пришло время разобраться с маршрутизацией. Поэтому сегодня сэмулируем многостраничность в одностраничном приложении на 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 не планируется?
Пока нет. Но там похожие библиотеки.
Дмитрий, Благодарю за интересную и полезную серию. Было весьма интересно и насыщено.
Просмотрел, осмыслил и применил на практике каждое видео данной серии. Повторил весь пройденный путь написания всего приложения с нуля.
Написав и осмыслив весь код самостоятельно, приобрёл чёткую и ясную картину, на основе которой теперь ясно как взаимодействовать со всей экосистемой React и всеми сопутствующими библиотеками для него. - разобрался и понял назначение и применение архитектурных принципов MVC и Flux - да и вообще общие принципы построения фронтенд приложений (так как раньше не был с ними знаком).
И главное понял как и куда развиваться дальше, для решения своих практических задач.
Освоение этой серии дало хороший практический опыт и достаточно прочную теоретическую базу. Многие аббревиатуры теперь не просто слова, а вещи за которыми теперь стоит собственный осмысленный, практический опыт.
Вещи и названия, которые раньше навевали что-то непонятное и отпугивали своей неизвестностью, теперь воспринимаются как простые и понятные. Как часть некого целого. Как единый инструмент, с помощью которого можно быстро и эффективно решать свои практические задачи.
Возможно многим покажется такое глубокое изучение библиотеки React, через самостоятельное её написание, избыточным и слишком затратным по времени занятием. Для себя же понял, что пройдя этот путь, самостоятельного написания всей этой экосистемы, приобрёл хороший практический опыт. На основе которого теперь чётко понятны все тонкости её работы. И то, как использовать этот инструмент осознанно. А значит максимально эффективно.
Еще раз Благодарю за силы вложенные в эту серию и за то стремление делиться своим опытом и знаниями с другими. Интерес это невероятная сила помогающая преодолевать любые преграды. Так пусть интерес к познанию нового, и к тому как это новое просто и доступно объяснять другим, сопутствует вашему творчеству. Здоровья и успехов вам и вашим близким!
За три дня просмотрел всю серию. Большое спасибо! Всех благ!
Если попробую сразу использовать Next.js (так как нужна генерация контента на сервере для SEO), насколько он отличается от React? И сложен ли будет путь входа в этот фреймворк?
Отличается только тем, что компоненты страниц нужно вписывать сразу в готовую папку
src/pages
. И данные из API для серверной генерации каждой страницы нужно сразу подгружать в методеgetServerSideProps
. В остальном по синтаксису это тот же React.Или войти через: