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

Посмотрим на возможности 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 - Заключение

[@PurpleSchool]

🔗 Ссылки: TanStack Router: tanstack.com/router/v1 Курс по React и Redux: purpleschool.ru/course/react-... Промокод COURSESTOP на скидку 5% 🎓 Мои курсы: purpleschool.ru 💬 Telegram канал с полезными советами: t.me/purple_code_channel

[@nikita_belous]

Наверное, вместо Number(search?.page) ?? 1 должно быть Number(search?.page) || 1. Так как если page не передали, то мы получим undefined, а Number(undefined) -> NaN, NaN ?? 1 -> NaN

[@gubatenkov]

Чувак, ты чисто на волне передовых фронтенд технологий залетел с видосом про Tanstack 👏

[@PurpleSchool]

Всегда на грани технологий)

[@bolovy6093]

Привет, думаю если бы вы писали в обычном редакторе (vscode/webstorm) код воспринимался бы намного легче, а так спасибо за годный контент 🎉

[@PurpleSchool]

Спасибо)

[@user-ik1in6zt4y]

Спасибо за обзор. Подскажите, какой плагин отвечает за предложение вариантов кода (серым цветом), которое появляется при начале создания функции итд. Видел похожее поведение и в vscod.

[@PurpleSchool]

Это стандартный complete плагин NVChad

[@user-ik1in6zt4y]

@@PurpleSchool спасибо

[@data-center-project]

А как его правильно с Tanstack Query подружить ?

[@Edgar-pu1lc]

Спасибо за видео, жаль про layout ничего не показал

[@PurpleSchool]

Спасибо!

[@user-tc7lh9tm9m]

Поддерживаю

[@golden_smiles]

Да, по лейаутам по файл роутингу они чтото намудрили, разбираюсь тоже ))

[@viktorkasap]

Спасибо, отличный обзор! 🤘 На будущее интересно увидеть было бы реализацию авторизации, хотя бы минимум и я пока не очень понял, используя эту либу надо ли нам ставить query, для запросов, или она так же хранит кэшем данные в себе и дополнительная либа уже будет лишней, нам хватит только router?

[@PurpleSchool]

Спасибо! Все равно нужен дополнительный state manager или хотя бы tanstack query

[@viktorkasap]

@@PurpleSchool понял, спасибо 🙏, значит одно не исключает другое.

[@viktorkasap]

​@@PurpleSchoolя вообще такой микс использую: tanstack query у меня хранит то что от сервера получено, effector хранит то что в рамках приложения используется (например у меня с одной стороны форма для ввода данных, с другой стороны превью, это два разных и не связных компонента, и чтобы не костылить effector очень помогает как независимое хранилище)

[@user-tc7lh9tm9m]

Господи, лучший просто, по доке я не совсем смог нормально разобраться, а сейчас начинаю новый проект писать, обязательно теперь буду использовать этот роутер, божественно все рассказал

[@PurpleSchool]

Спасибо! Рад, что было полезно

[@user-tc7lh9tm9m]

​@@PurpleSchoolединственное, надо было ещё показать как layouts использовать и показывать loading компонент

[@awenn2015]

Не пон, а как обрабатывать загрузку? Я думал по логике танстака в компоненте в data мы должен получить данные и что то вроде isLoading рядом, а по факту ничего такого там нет, как по итогу спинер то показывать?

[@d.sadykov1354]

У меня почему-то не генерируется файл .gen при npm run dev. Хотя плагин добавлен, может быть это потому что vite + electron + react отличается от vite + react просто. Плагин добавлен в конфиг рядом с плагином react()

[@ananasios]

Молодой человек подскажи что за тема у тебя в nvim установлена ? Оч уж зашла

[@PurpleSchool]

Это TokioDark

[@CJIu3eHb]

Блокирующий лоадер - это не круто, конечно. Тема с типизированными роутами не нова, в RN такое есть (без учета фишки сопоставления файловой структуры, ну и в целом не под web заточено, понятное дело). Хочу офтопнуть по Next 13: как сохранять состояние между запросами на серверные эндпойнты (которые /app/api/...)? Там файлы походу не постоянно крутятся, а чуть ли не как в php на каждый запрос вызываются. По крайней мере, console.log в импортируемом в хендлер запроса файле отрабатывает на каждый запрос. Ну и начальная инициализация там через одно темное место, какой-то точки входа нет, если экпериментальная фича положить функцию register в файл instrumentation.ts, типа там можно подобие бутстрапа организовать. Так вот, между запросами хочу хранить данные в памяти, а-ля сервис, который хранит/выдает массив с данными. И ничего не выходит. Т.е. данные можно только хранить на диске и оттуда каждый раз читать (а так как данные нужно иногда менять, то и писать). А хотелось бы в памяти, подумываю попробовать засорить своей переменной global ноды (уж она то должна постоянно крутиться, запросы ожидать), но это как-то кривенько (хотя если заработает, то и хрен с ним). И вообще, интересно, как Next эту свою черную магию делает - нагуглить, почему состояние не сохраняется между запросами не получилось, и пока не настолько отчаялся, чтобы ковыряться в исходниках.

[@user-nb8mi4im8g]

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

[@vint_razboltaylo]

Либа и правда сырая, но потенциал у нее есть, так что пока ждем апдейты

[@viktorkasap]

Такая же история, документация пока сырая, в примерах такое ощущение что на скорую руку делали, чисто для демки. Походу да, надо ждать, они ща получать миллион негативного фидбэка и доведут до ума... надеюсь

[@proletarian]

Дочерних роутов здесь нету? Как то не обнаружил как они работают, или может плохо искал

[@proletarian]

Вообще не по теме но всё же, у меня в ARC на многих популярных сайтах не работает голосовой ввод, жму микрофончик, даю разрешение и ничего, в гугл переводчике к примеру сразу же выпрыгивает уведомлении о том что отсутствует интернет, вот хотел спросить это только у меня такое или это проблема браузера? P.S. работает только в KZbin

[@PurpleSchool]

Не пользуюсь голосовым вводом, потому не подскажу(

[@evoleurt]

Спасибо, избавился от реакт роутера в пользу адекватного роутинга от tanstack

[@PurpleSchool]

Супер)

[@user-sj7tf2yv3m]

Сколько нам ждать обзор на Nuxt

[@user-eq5rm5nh4h]

+

[@AbAb-cj7qz]

+

[@PurpleSchool]

Хорошо)

[@ecoaurum]

пока сам не выучишь

[@user-td3bz8st6v]

+

[@bellmoon2754]

Спасибо за обзор! Но честно говоря видео получилось не рыба и не мясо. Для обзора слишком длинное для полноценного урока как-то не хватило объяснений зачем это нужно и чем это решение лучше существующих

[@daveyjonesx]

Запили видос vue vs react в 2024)

[@PurpleSchool]

Я не такой активный пользователь Vue

[@chirkov]

Епт нравится синтаксис vue - используй vue, нравится синтаксис react - используй react. Но имей в виду что плагины новые и современные выходят чаще на реакт. Вакансий на реакте больше примерно в 4 раза и 3 года назад было примерно так же

[@daveyjonesx]

@@chirkov поэтому и нужен видос, потому что это очень плохое сравнение.

[@llwebstylell242]

Я единственный кто не увидел убийцу реакт роутера ?) видос просто не о чём)

[@StarkElessar]

полазил по доке этого роутера, и не понял зачем оно мне нужно)) Когда react-router просто идеально покрывает мои нужды)

[@llwebstylell242]

@@StarkElessar я в доках не лазил, видео глянул - мне хватило понять, что реакт роутер, может всё тоже самое что и тан-стак роутер, так что какой смысл изучать тан-стак роутер - хз

[@fedordostoevskiy4209]

На этом канале одни убийцы каждую неделю)

[@PurpleSchool]

Триллеры показываем)

[@iGotton]

+

[@PurpleSchool]

👍

[@xice111]

Опять наш нитакуся пытается выбрать не трендовый стек

[@PurpleSchool]

Я не пытаюсь выбрать, я обозреваю новинки, чтобы вы принимали взвешенное решение при выборе стека

[@user-bp7jb5of5d]

И преимуществ танстэк роутера перед реакт роутером не раскрыто и видео занудно снято…