React стек 2022. TypeScript, Redux Toolkit, RTKQuery, Tailwind

А что на счёт reselect в тулките ?

state.favorites = state.favorites.filter(f => f !== action.payload) vs ругается на action, в чем мб дело?

Если можно - личный вопрос: live with less это отказ от яхты, кабриолета и виллы в Ницце или же от мяса, вина и женщин?

Ценный видос. Мало лайкосов на ~60 кило просмотров...
Все просто мимо проходили? либо опытные мидлы просматривают нерелевантный контент, либо толпа Жлобов в айти входят, которым в лом ткунуть в батон пальчиком.

Просто пишешь код, говоришь что он делает, а как он работает и зачем не объясняешь.

странная тенденция намечается... До того, как ts стал мейнстримом во фронтенде, все прекрасно понимали что означают события  onClick и onChange и прекрасно работали с ними без описания их типов. Как только ts ворвался в комьюнити react разработчиков, сразу возникла острая необходимость описывать типы событий аля: «React.MouseEvent(HTMLButtonElement)....» Со стороны такой код выглядит странно. Какая цель у этого подхода? Создать видимость «экспертности», или это реально решает какие-то проблемы?

но в целом спасибо за урок. Кое-что полезное для себя нашёл.

Thank you very much for your work :)

Офигительный материал. Доходчиво и все по делу!

Крутое видео, но у меня в IDE никак не работает tailwind

Хотелось бы увидеть работу с подобным стеклом + Redux Observable

спасибо большое, уважаемый человек)

А вместе всех этих квери и тд, можно было бы использовать axios?

const {isLoading, isError, data} = useSearchUsersQuery(debounced).
useSearchUsersQuery не будет делать лишние запросы на сервер при одинаковом значении debounced?

Владилен, современный Реакт позволяет явно его не импортировать

спасибо тебе за твой труд

Не планируешь ли снять видео о Next.js + RTK ?

Отличный опыт, в 2022 году

Это trainee уровень?

Good job Vlad, thanks!

Очень полезный контент! Огромное спасибо) Когда допиливаешь кнопку Remove из самой FavouritePage, удобней получается))

Огромное спасибо Владилену за мастер-класс! Как раз не хватало связки Реакт-TS.
Только у меня нежданная проблемка возникла. Забираю стейт из локалСторадж:
favourites: JSON.parse(localStorage.getItem(LS_FAV_KEY)) ?? [],

и TS мне пишет (подчёркивая localStorage.getItem(LS_FAV_KEY)):
Аргумент типа "string | null" нельзя назначить параметру типа "string".
Тип "null" не может быть назначен для типа "string".

Дальше просто невозможно двигаться, ибо вылетает эта ошибка. Если кто-нибудь знает, что это и как правильно надо здесь прописывать правильный тип — поделитесь, пожалуйста, буду очень благодарен!

как всегда классное видео, интересный материал, хорошая подача. спасибо, Владилен!

очередной годный контент, спасибо за труд

Спасибо, было очень интересно, но ничего не понял

Молодец, побольше бы таких видосоа

А почему редакс? Мобх же на волне ныне

Очень интересно, но ничего пока не понятно, почему и как)) Возможно надо пересмотреть несколько раз. Спасибо

Поздравляю с видео, очень хороший материал. Хотя я не говорю и не понимаю по-русски, я довольно хорошо понял весь код.

У меня было только одно сомнение. Я не знаю, что делает функция setupListeners, если бы вы могли объяснить это, я был бы очень признателен.

Привет из Сантьяго-де-Чили в Южной Америке... на другом конце света.
---
Felicidades por tu video, muy buen material. Aunque no hablo ni entiendo nada de Ruso, entendí bastante bien todo el código.

Me quedó sólo una duda. No sé lo que hace la función setupListeners, si me pudieras explicar te lo agradecería mucho.

Saludos desde Santiago de Chile en Sudamérica...al otro lado del mundo.

Крутейший материал!

Владилен, большое спасибо за урок!

Почему сразу после создания приложения или установки tailwind, сразу же 6 очень серьёных уязвимостей выдаёт npm? Когда по видосу с ангуляром всё делал, такого не было.

что то VUE совсем мало...

ещё можно было добавить Next вместо cra

Не понравился тейл винд, делает грязь в компоненте .

Классное видео, как всегда! Хотелось бы увидеть разработку SSR на реакте без использования фреймворков типа NextJs, надеюсь когда-нибудь такое у тебя появится :)

Как раз меня подписали на проект на примерно таком стеке

в вебшторме есть удобные сниппеты для реакта. например uses - развернет темплейт для useStore, а usee - useEffect

Продвинутый стек - также известен как дефолтный)

Спасибо за урок, очень было полезно! Изучаю реакт, но с ts и redux ещё не работала, так что это прям то, что нужно)

В CRA есть готовый темплейт для TS + RTK. Но в нем используется другая архитектура - деление на фичи. Тоже довольно удобный подход, всем советую потыкать)

Команда для генерации:
npx create-react-app ИМЯ_ВАШЕГО_ПРОЕКТА --template redux-typescript

И спасибо за видео, на днях буду пробовать tailwind

В вебшторме есть встроенный сниппет - rsc, он создаёт и функцию и называет её сразу по названию файла

React стек 2022 это NextJS в связке Apollo GraphQL
Редакс и всего его сопутствующие либы, как и REST в целом - избытки прошлого
TypeScript это не современный стек, а мастхев, кто-то еще пишет на чистом JS?

Спасибо за урок. Со всем уважением, но Владилен вроде все хорошо на первый взгляд, но ничего не понятно, галопом по Европе. Что, куда и зачем не понятно. После просмотра осталось 100500 вопросов, на которые пришлось искать ответ самостоятельно. Но с другой стороны спасибо тебе что эти вопросы у меня возникли и я искал как их решить (ведь главное узнать вопрос). Жду следующих видео)

Ужасное эхо в начале видео, я аж испугался, все видео будет таким, но потом звук исправился. Тебе нужно что-то делать с эхо

Спасибо. Было бы круто записать что-то подобное для Vue

Спасибо за труд! TypeScript, Redux Toolkit, RTKQuery, Tailwind

Владилен, сделай видео как прикрутить ssr на этот стек, не на next, а вручную)

зачем я это смотрю.. я даже не фронтэндер

Владилен очень крутой ролик..... больше таких роликов

требуем подобного видео, об актуальном стеке в связке с vue/nuxt !)

Спасибо за лаконичную подачу, нашел несколько моментов по RTK для себя, хотя используем его уже год в проде) Классный пример со стилями.

Thanks a lot. This is very helpful. One question: why are you not using redux-persist, to store data on local storage? Is very easy to use. Instead manage LocaStorage manually, redux persist will do it for you

Продвинутый - это чистый ЖС, хуки и контексты. Все, что в заголовке - это то, чем занимался тимлмд этим летом.

13:03 кастомная апишка

Спасибо за такие видосы, я под них засыпаю просто отлично.

Почему до сих пор redux? А как же graphql? Или мы вынуждены постоянно использовать заюзанный вариант в угоду прошлому? Нужно уже попробовать что-то новое. Я уже полтора года использую graphql без redux и пока в полном восторге. Просто надоело уже слушать одно и тоже без изменений. Кажется что Владлен застрял в прошлом. Раньше мне нравился этот контент, но все меняется и нужно двигаться дальше.

Очень своевременный видеоурок, достаточно подробно рассказал, как что нужно делать, однозначно лайк)

Прошла зима. Настало лето. Спасибо путину за это

Это кошмар, столько методов и синтаксиса нужно запомнить. Не верю что без таблеток это все нельзя запомнить

Владилен, у вас хорошо получается рассказывать о разных технологиях. Побольше бы таких роликов.

А как axios и RTK query соотносятся? Они одну задачу выполняют или разные в целом? Что из них лучше?

Гей

Владилен, спасибо! Я в своё время покупал твой курс по ангуляру, нашёл работу благодаря твоему подходу к обучению.. Реакт тоже нужен, буду изучать

Спасибо большое за этот ролик!

Ну возможно в Перми React + Redux это продвинутый стрек.....ахааххахахаха

предусмотрел случай is loading в дропдауне и потом сам же скрыл когда данных нет)

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

В данном уроке сама программа WebStorm напоминает JDK. VisualStudio обладает такими же свойствами как WS?

Спасибо за крутой контент! :)

Спасибо. Начинал кодит, когда твой канал только начинался. Даже давал комментарии первым на роликах по TS. Спасибо! Ты топ!

Благодарю

Только абсолютно дилетантские фронтендеры используют и им нравится Тайлвинд, это пц, просто пц.

Треба більше контенту данного формату, вподобайка, лайк !)

Потрібно більше таких відео

Спасибо большое за интересный урок.

А ты хорош! Спасибо за контент, тем более в свободном доступе. Всё четко, грамотно, у тебя талант объяснять. Учился на твоих роликах в том числе. Благодарен тебе !!!

Спасибо спасибо большое большое !!!

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

за тобой прям кусочек Джеймса Уэбба. ✨

crasata

Какой это лес после Vue

Вай брат, всё получилось, после твоих курсов пошёл на работу, потом выгнали, когда узнали, что у тебя учился

Почему про styled components ничего не снимайте , ведь он самый лучший щас в мире , ничего толкого не могу найти чтобы учить как правильно использовать их и тд )

Владилен , круто , хотелось бы Ангуляр увидеть))

и чем этот тайл винд отличается от инлайн стилей? по мне так устраивать помойку в классах такая себе идея...

Раз два три четыре :D

Вырос за два года, как фронтендер на твоих видосах, и уже своих учеников отправляю смотреть.
Спасибо тебе за то, что ты делаешь!

Спасибо тебе за контент, ты и учишь, и мотивируешь своим образом и мыслями :)

у фронтов так быстро технологии меняются, RTKQuery и Tailwind впервые слышу, хотя не работаю с фронтом всего год)

Супер!!!

Лайк просто за заголовок видео)) Посмотрю на досуге! Спасибо за подобный контент!

Это уже не продвинутый стек. Если посмотреть вакансии джуна на фронт, то redux, typescript, toolkit уже давно там, tailwindcss спрашивают тоже, но не всегда)

Спасибо огромное за такие ролики! Они очень помогают, даже если я щас 40-50% проекта не понимаю, но со временем пойму
А Tailwind - это прям минус заботы за css классы и файлы даже если иногда получаются большие классы. Но преполагаю что в больших проектах он не рекомендован, т.к там всё по полочкам должно быть разделено, но если это не так, то это ещё лучше

спс, делай свое дело! Заинтересованые разберутся и в обновлениях синтаксиса и в смене парадигмы некоторых фреймворков со временем!

Может быть снимешь что-то похожее но по Vue?

После Next js так не кайф эти роутинги писать ручную

1:14:29 useState для хранения isFav - лишнее. Если у нас немного данных в store, то можно прямо в компоненте вычислять это значение. Если данных много, то можно использовать Set<string> вместо string[] в сторе и получать isFav всегда быстро - сложность поиска в Set - O(1)

1:02:20 Я давно не работал с Редаксом (и ни разу не работал с ReduxToolkit), но разве делать сайдэффекты в редюсере (чтение и запись в localStorage) это не нарушение границ ответственности компонентов? Разве редюсер не должен быть чистой функцией без побочных эффектов?

1.Минин, 2.ты, 3.крутой, 4.чувак. )

Владлен спасибо! И отдельное спасибо за сразу выложенные исходники))