Тёмный

Разбор Tanstack Router - убийца React Router 

PurpleSchool | Anton Larichev
Подписаться 41 тыс.
Просмотров 8 тыс.
50% 1

Посмотрим на возможности Tanstack Router, который сможет заменить React Router и разберём все его преимущества недостатки, а так же посмотрим как с ним работать.
🔗 Ссылки:
TanStack Router: tanstack.com/router/v1
Курс по React и Redux: purpleschool.ru/course/react-...
Промокод COURSESTOP на скидку 5%
🎓 Мои курсы: purpleschool.ru
💬 Telegram канал с полезными советами:
t.me/purple_code_channel
Разделы видео:
0:00 - Введение
0:12 - Установка
2:08 - Настройка роутинга
7:59 - Создание роутов
11:27 - Роуты с параметрами
16:39 - useParams и useSearch
20:14 - loader и обработка ошибок
23:57 - devTools
25:03 - Выводы
27:38 - Заключение

Опубликовано:

 

31 май 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 56   
@PurpleSchool
@PurpleSchool 3 месяца назад
🔗 Ссылки: TanStack Router: tanstack.com/router/v1 Курс по React и Redux: purpleschool.ru/course/react-... Промокод COURSESTOP на скидку 5% 🎓 Мои курсы: purpleschool.ru 💬 Telegram канал с полезными советами: t.me/purple_code_channel
@nikita_belous
@nikita_belous 3 месяца назад
Наверное, вместо Number(search?.page) ?? 1 должно быть Number(search?.page) || 1. Так как если page не передали, то мы получим undefined, а Number(undefined) -> NaN, NaN ?? 1 -> NaN
@data-center-project
@data-center-project 22 дня назад
А как его правильно с Tanstack Query подружить ?
@user-ik1in6zt4y
@user-ik1in6zt4y 3 месяца назад
Спасибо за обзор. Подскажите, какой плагин отвечает за предложение вариантов кода (серым цветом), которое появляется при начале создания функции итд. Видел похожее поведение и в vscod.
@PurpleSchool
@PurpleSchool 3 месяца назад
Это стандартный complete плагин NVChad
@user-ik1in6zt4y
@user-ik1in6zt4y 3 месяца назад
@@PurpleSchool спасибо
@d.sadykov1354
@d.sadykov1354 Месяц назад
У меня почему-то не генерируется файл .gen при npm run dev. Хотя плагин добавлен, может быть это потому что vite + electron + react отличается от vite + react просто. Плагин добавлен в конфиг рядом с плагином react()
@awenn2015
@awenn2015 Месяц назад
Не пон, а как обрабатывать загрузку? Я думал по логике танстака в компоненте в data мы должен получить данные и что то вроде isLoading рядом, а по факту ничего такого там нет, как по итогу спинер то показывать?
@gubatenkov
@gubatenkov 3 месяца назад
Чувак, ты чисто на волне передовых фронтенд технологий залетел с видосом про Tanstack 👏
@PurpleSchool
@PurpleSchool 3 месяца назад
Всегда на грани технологий)
@viktorkasap
@viktorkasap 3 месяца назад
Спасибо, отличный обзор! 🤘 На будущее интересно увидеть было бы реализацию авторизации, хотя бы минимум и я пока не очень понял, используя эту либу надо ли нам ставить query, для запросов, или она так же хранит кэшем данные в себе и дополнительная либа уже будет лишней, нам хватит только router?
@PurpleSchool
@PurpleSchool 3 месяца назад
Спасибо! Все равно нужен дополнительный state manager или хотя бы tanstack query
@viktorkasap
@viktorkasap 3 месяца назад
@@PurpleSchool понял, спасибо 🙏, значит одно не исключает другое.
@viktorkasap
@viktorkasap 3 месяца назад
​@@PurpleSchoolя вообще такой микс использую: tanstack query у меня хранит то что от сервера получено, effector хранит то что в рамках приложения используется (например у меня с одной стороны форма для ввода данных, с другой стороны превью, это два разных и не связных компонента, и чтобы не костылить effector очень помогает как независимое хранилище)
@bolovy6093
@bolovy6093 3 месяца назад
Привет, думаю если бы вы писали в обычном редакторе (vscode/webstorm) код воспринимался бы намного легче, а так спасибо за годный контент 🎉
@PurpleSchool
@PurpleSchool 3 месяца назад
Спасибо)
@CJIu3eHb
@CJIu3eHb 3 месяца назад
Блокирующий лоадер - это не круто, конечно. Тема с типизированными роутами не нова, в RN такое есть (без учета фишки сопоставления файловой структуры, ну и в целом не под web заточено, понятное дело). Хочу офтопнуть по Next 13: как сохранять состояние между запросами на серверные эндпойнты (которые /app/api/...)? Там файлы походу не постоянно крутятся, а чуть ли не как в php на каждый запрос вызываются. По крайней мере, console.log в импортируемом в хендлер запроса файле отрабатывает на каждый запрос. Ну и начальная инициализация там через одно темное место, какой-то точки входа нет, если экпериментальная фича положить функцию register в файл instrumentation.ts, типа там можно подобие бутстрапа организовать. Так вот, между запросами хочу хранить данные в памяти, а-ля сервис, который хранит/выдает массив с данными. И ничего не выходит. Т.е. данные можно только хранить на диске и оттуда каждый раз читать (а так как данные нужно иногда менять, то и писать). А хотелось бы в памяти, подумываю попробовать засорить своей переменной global ноды (уж она то должна постоянно крутиться, запросы ожидать), но это как-то кривенько (хотя если заработает, то и хрен с ним). И вообще, интересно, как Next эту свою черную магию делает - нагуглить, почему состояние не сохраняется между запросами не получилось, и пока не настолько отчаялся, чтобы ковыряться в исходниках.
@proletarian
@proletarian 3 месяца назад
Вообще не по теме но всё же, у меня в ARC на многих популярных сайтах не работает голосовой ввод, жму микрофончик, даю разрешение и ничего, в гугл переводчике к примеру сразу же выпрыгивает уведомлении о том что отсутствует интернет, вот хотел спросить это только у меня такое или это проблема браузера? P.S. работает только в RU-vid
@PurpleSchool
@PurpleSchool 3 месяца назад
Не пользуюсь голосовым вводом, потому не подскажу(
@Edgar-pu1lc
@Edgar-pu1lc 3 месяца назад
Спасибо за видео, жаль про layout ничего не показал
@PurpleSchool
@PurpleSchool 3 месяца назад
Спасибо!
@user-tc7lh9tm9m
@user-tc7lh9tm9m 3 месяца назад
Поддерживаю
@golden_smiles
@golden_smiles 3 месяца назад
Да, по лейаутам по файл роутингу они чтото намудрили, разбираюсь тоже ))
@proletarian
@proletarian Месяц назад
Дочерних роутов здесь нету? Как то не обнаружил как они работают, или может плохо искал
@ananasios
@ananasios 3 месяца назад
Молодой человек подскажи что за тема у тебя в nvim установлена ? Оч уж зашла
@PurpleSchool
@PurpleSchool 3 месяца назад
Это TokioDark
@user-nb8mi4im8g
@user-nb8mi4im8g 3 месяца назад
хотел использовать в новом проекте, стал разбираться и столкнулся с тем, что документация описана криво, например не работают ссылки, или несовсем понятно, например про контекст, показалось что кода как-будто бы писать больше, а в конце, из-за чего вообще забросил, типы в библиотеке не дописаны, тупо есть название интерфейса, а полей в нём нет, закоменчены, в связи с чем будут проблемы с типизацией в проекте. Встретил на зарубежном форуме комент, где человек откровенно удивлён, что библиотеку выпустили, тк он следил за разработкой и она была далека до завершения. Короче буду ждать следующие версии, а там посмотрим
@vint_razboltaylo
@vint_razboltaylo 3 месяца назад
Либа и правда сырая, но потенциал у нее есть, так что пока ждем апдейты
@viktorkasap
@viktorkasap 2 месяца назад
Такая же история, документация пока сырая, в примерах такое ощущение что на скорую руку делали, чисто для демки. Походу да, надо ждать, они ща получать миллион негативного фидбэка и доведут до ума... надеюсь
@user-tc7lh9tm9m
@user-tc7lh9tm9m 3 месяца назад
Господи, лучший просто, по доке я не совсем смог нормально разобраться, а сейчас начинаю новый проект писать, обязательно теперь буду использовать этот роутер, божественно все рассказал
@PurpleSchool
@PurpleSchool 3 месяца назад
Спасибо! Рад, что было полезно
@user-tc7lh9tm9m
@user-tc7lh9tm9m 3 месяца назад
​@@PurpleSchoolединственное, надо было ещё показать как layouts использовать и показывать loading компонент
@evoleurt
@evoleurt 15 дней назад
Спасибо, избавился от реакт роутера в пользу адекватного роутинга от tanstack
@PurpleSchool
@PurpleSchool 15 дней назад
Супер)
@bellmoon2754
@bellmoon2754 3 месяца назад
Спасибо за обзор! Но честно говоря видео получилось не рыба и не мясо. Для обзора слишком длинное для полноценного урока как-то не хватило объяснений зачем это нужно и чем это решение лучше существующих
@llwebstylell242
@llwebstylell242 3 месяца назад
Я единственный кто не увидел убийцу реакт роутера ?) видос просто не о чём)
@StarkElessar
@StarkElessar 3 месяца назад
полазил по доке этого роутера, и не понял зачем оно мне нужно)) Когда react-router просто идеально покрывает мои нужды)
@llwebstylell242
@llwebstylell242 3 месяца назад
@@StarkElessar я в доках не лазил, видео глянул - мне хватило понять, что реакт роутер, может всё тоже самое что и тан-стак роутер, так что какой смысл изучать тан-стак роутер - хз
@user-sj7tf2yv3m
@user-sj7tf2yv3m 3 месяца назад
Сколько нам ждать обзор на Nuxt
@user-eq5rm5nh4h
@user-eq5rm5nh4h 3 месяца назад
+
@AbAb-cj7qz
@AbAb-cj7qz 3 месяца назад
+
@PurpleSchool
@PurpleSchool 3 месяца назад
Хорошо)
@ecoaurum
@ecoaurum 3 месяца назад
пока сам не выучишь
@user-td3bz8st6v
@user-td3bz8st6v 3 месяца назад
+
@iGotton
@iGotton 3 месяца назад
+
@PurpleSchool
@PurpleSchool 3 месяца назад
👍
@daveyjonesx
@daveyjonesx 3 месяца назад
Запили видос vue vs react в 2024)
@PurpleSchool
@PurpleSchool 3 месяца назад
Я не такой активный пользователь Vue
@chirkov
@chirkov 3 месяца назад
Епт нравится синтаксис vue - используй vue, нравится синтаксис react - используй react. Но имей в виду что плагины новые и современные выходят чаще на реакт. Вакансий на реакте больше примерно в 4 раза и 3 года назад было примерно так же
@daveyjonesx
@daveyjonesx 3 месяца назад
@@chirkov поэтому и нужен видос, потому что это очень плохое сравнение.
@fedordostoevskiy4209
@fedordostoevskiy4209 3 месяца назад
На этом канале одни убийцы каждую неделю)
@PurpleSchool
@PurpleSchool 3 месяца назад
Триллеры показываем)
@xice111
@xice111 3 месяца назад
Опять наш нитакуся пытается выбрать не трендовый стек
@PurpleSchool
@PurpleSchool 3 месяца назад
Я не пытаюсь выбрать, я обозреваю новинки, чтобы вы принимали взвешенное решение при выборе стека
@user-bp7jb5of5d
@user-bp7jb5of5d 3 месяца назад
И преимуществ танстэк роутера перед реакт роутером не раскрыто и видео занудно снято…
Далее
React 19 - React Compiler, Actions, use hook, activity
46:45
У каждого есть такой друг😂
00:31
Your Partner In The Energy Transition
0:45
Параметры в ссылках в React Router 6
11:40