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

58 245 просмотров • 14 июля 2022 г.

Владилен Минин

249 тыс. подписчиков

Исходники тут: https://t.me/js_by_vladilen/485

Я в соц сетях:
Telegram: https://t.me/js_by_vladilen
VK: https://vk.com/vladilen.minin
Instagram: https://instagram.com/vladilen.minin

Мастеркласс по React: https://youtu.be/haiiBZW45JE

Мои паблики по JavaScript:
Telegram: https://t.me/result_school_it
VK: https://vk.com/result.school
Instagram: https://www.instagram.com/result.school.it

JavaScript cообщества:
Discord: https://discord.gg/jscommunity
Telegram: https://t.me/js_by_vladilen_chat

Получить профессию Frontend разработчика -
https://bit.ly/3bzTr5X

Подробнее узнать об обучении в Result School -
https://bit.ly/3QTbUKQ

Бесплатный курс HTML & CSS - https://bit.ly/3NnFUvs
Сделать 5 проектов на JavaScript - https://bit.ly/3OGfJ47

Roadmap по каналу:
https://vladilen.notion.site/Roadmap-YouTube-0b917095c1ec424e9574c2ede36efab9

Продвинутый React. В видео технологии: TypeScript, Redux Toolkit, RTKQuery, Tailwind

Alec Hardison

05.09.22 в 19:48

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

Srg M

31.08.22 в 17:30

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

Ivan Stepanoff

31.08.22 в 16:07

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

Ivan Stepanoff

31.08.22 в 15:42

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

Руслан Муканаев

25.08.22 в 11:56

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

Anton Goul'art

22.08.22 в 06:33

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

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

Google User

20.08.22 в 20:07

Thank you very much for your work :)

maxim bagrayntsev

18.08.22 в 11:18

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

Stegan Moskalen

17.08.22 в 22:32

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

Portinable

17.08.22 в 12:36

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

Файз Хисориев

16.08.22 в 08:25

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

Ametion

14.08.22 в 22:07

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

BLAC

14.08.22 в 16:36

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

Ал М

14.08.22 в 08:25

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

Tigran Grigoryan

11.08.22 в 09:48

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

Ал М

08.08.22 в 12:30

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

Дмитрий Дудолад

08.08.22 в 08:50

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

Denis

05.08.22 в 20:50

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

Garik Melqonyan

05.08.22 в 13:51

Good job Vlad, thanks!

Kapiton

05.08.22 в 11:30

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

Валерий Харламов

05.08.22 в 11:12

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

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

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

Александр Гурков

03.08.22 в 08:18

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

Игорь Белозор

02.08.22 в 14:16

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

Андрей Колтунов

31.07.22 в 17:03

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

Games

30.07.22 в 08:24

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

avel

29.07.22 в 18:26

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

Christian Space

28.07.22 в 04:35

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

Pablo Andres Rodriguez Riveros

26.07.22 в 21:52

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

У меня было только одно сомнение. Я не знаю, что делает функция 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.

Denis Ryazantsev

25.07.22 в 15:21

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

Maxim Minchenko

24.07.22 в 18:25

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

Last Breath

24.07.22 в 02:49

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

Stanislav

23.07.22 в 18:25

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

YL CSL

22.07.22 в 21:16

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

Alexander Diakonov

22.07.22 в 12:01

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

BV

20.07.22 в 20:30

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

Aliaxei Semianiuk

20.07.22 в 19:41

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

fallart

20.07.22 в 12:53

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

Alena Loban

20.07.22 в 08:10

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

Ольга Матвеева

20.07.22 в 07:45

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

Андрей

19.07.22 в 22:36

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

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

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

Alexis Rohina

19.07.22 в 18:51

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

Dmytro Yevlakhov

19.07.22 в 11:51

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

Елена Кайданова

19.07.22 в 08:20

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

Денис К

18.07.22 в 14:24

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

707bober

18.07.22 в 11:02

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

Arlen M

18.07.22 в 09:31

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

Владислав Коваль

18.07.22 в 07:18

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

JeruGenius

17.07.22 в 21:58

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

vitalinko55

17.07.22 в 20:05

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

Alexandr Kharchenko

17.07.22 в 18:05

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

Aleksandr Ivanov

17.07.22 в 14:29

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

Sostenes Gomes

17.07.22 в 12:30

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

sc0or

17.07.22 в 12:22

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

Stan March

17.07.22 в 07:52

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

John Strayk

16.07.22 в 22:58

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

Timur Kharkov

16.07.22 в 18:08

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

Никита Есьман

16.07.22 в 17:16

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

scout top

16.07.22 в 15:23

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

Real Programmer

16.07.22 в 11:37

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

Дмитрий Зусмановский

16.07.22 в 09:43

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

Igor Alekseev

16.07.22 в 07:41

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

Arkadii

16.07.22 в 06:23

Гей

Max Mashpit

15.07.22 в 22:28

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

Володимир Боднарчук

15.07.22 в 20:41

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

Vadym Esch

15.07.22 в 19:24

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

Иван Полотнянщиков

15.07.22 в 17:08

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

Pavel Soldatov

15.07.22 в 15:47

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

Алексей Троцкий

15.07.22 в 14:24

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

Forellko

15.07.22 в 12:07

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

Ilya Kovin

15.07.22 в 11:33

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

Камиль Мухаметзянов

15.07.22 в 11:18

Благодарю

Артур Мудрик

15.07.22 в 10:15

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

Ivan Oliinyk

15.07.22 в 09:25

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

antogonyst

15.07.22 в 09:20

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

МегаНаноЧел

15.07.22 в 08:52

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

Александр

15.07.22 в 08:06

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

Ol 11

15.07.22 в 07:57

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

VIKI

15.07.22 в 07:18

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

Alexsandr Glebov

15.07.22 в 04:30

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

Dima Tronciu

15.07.22 в 03:04

crasata

Sergey Sergeev

14.07.22 в 23:31

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

magntu0

14.07.22 в 22:44

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

Emin Aliyev

14.07.22 в 22:11

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

FLASHBACK

14.07.22 в 22:08

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

Николай Хвостов

14.07.22 в 21:35

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

Du_ Mond

14.07.22 в 21:34

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

Artem Fedotov

14.07.22 в 21:29

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

Алиса Двачевская

14.07.22 в 21:17

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

Trippie

14.07.22 в 20:21

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

Алексей

14.07.22 в 20:05

Супер!!!

Sergey Maksimov

14.07.22 в 19:55

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

Самир Абдуллауев

14.07.22 в 19:17

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

Cebotari Viktor

14.07.22 в 18:57

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

Swetlana Aderikhina

14.07.22 в 18:38

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

Lormida

14.07.22 в 18:33

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

Ilya Martynov

14.07.22 в 18:31

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

Дмитрий Ховрич

14.07.22 в 18:21

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

Дмитрий Ховрич

14.07.22 в 18:11

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

Дмитрий Юсов

14.07.22 в 18:01

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

WebMobileDev

14.07.22 в 17:58

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

Рекомендации:

Владилен Минин

47 248 просмотров •

19 июля 2022 г.

Владилен Минин

30 378 просмотров •

22 октября 2021 г.

Владилен Минин

12 909 просмотров •

5 марта 2020 г.

Владилен Минин

150 711 просмотров •

17 марта 2020 г.

Владилен Минин

145 122 просмотра •

24 марта 2020 г.

Владилен Минин

59 230 просмотров •

30 марта 2020 г.

Владилен Минин

76 764 просмотра •

21 апреля 2020 г.

Владилен Минин

208 708 просмотров •

16 июня 2020 г.

showinfo=0 controls=1 rel=0 iv_load_policy=3