React стек 2022. TypeScript, Redux Toolkit, RTKQuery, Tailwind
ฝัง
- เผยแพร่เมื่อ 3 ต.ค. 2024
- Исходники тут: t.me/js_by_vla...
Я в соц сетях:
Telegram: t.me/js_by_vla...
VK: vladile...
Instagram: / vladilen.minin
Мастеркласс по React: • Разработка SPA на Reac...
Мои паблики по JavaScript:
Telegram: t.me/result_sc...
VK: result....
Instagram: / result.school.it
JavaScript cообщества:
Discord: / discord
Telegram: t.me/js_by_vla...
Получить профессию Frontend разработчика -
bit.ly/3bzTr5X
Подробнее узнать об обучении в Result School -
bit.ly/3QTbUKQ
Бесплатный курс HTML & CSS - bit.ly/3NnFUvs
Сделать 5 проектов на JavaScript - bit.ly/3OGfJ47
Roadmap по каналу:
vladilen.notio...
Продвинутый React. В видео технологии: TypeScript, Redux Toolkit, RTKQuery, Tailwind
![React JS c Нуля - Курс для начинающих БЕЗ ВОДЫ [2024]](http://i.ytimg.com/vi/kz23xxukY5s/mqdefault.jpg)
Как в старые добрые, такой контент остается на канале)
Исходники лежат тут - подписывайтесь:
t.me/js_by_vladilen/485
Мастеркласс по React для начинающих: th-cam.com/video/haiiBZW45JE/w-d-xo.html
Ѳфѳѳ
А вместе всех этих квери и тд, можно было бы использовать axios?
Хочу выразить Вам огромную благодарность за данное видео. Это именно то, что я так долго искал. Смог наконец-то увидеть нормальный практический пример разработки на TS и React с применением redux, а также познакомился с api. Большое спасибо!
Можно побольше таких видосов, которые покрывают большинство кейсов?) Подобные рубрики самые лучшие) #react #ts #redux #tailwind
Треба більше контенту данного формату, вподобайка, лайк !)
Дякую дуже класна подача, нещодавно знайшов цей канал зараз не можу зупинитись )
Владилен, у вас хорошо получается рассказывать о разных технологиях. Побольше бы таких роликов.
Большое спасибо за чёткое и ясное объяснение материала.
Спасибо Большое за уроки! Пожалуйста выпускайте почаще такие уроки они очень сильно помогают в обучении.
Вот это норм. Когда есть информация по сути. Когда нет недостойной "возни", а только обучение. Класс, много научился от тебя. ( не только от тебя конечно, но твоя часть существенна)
Очень своевременный видеоурок, достаточно подробно рассказал, как что нужно делать, однозначно лайк)
Спасибо. Начинал кодит, когда твой канал только начинался. Даже давал комментарии первым на роликах по TS. Спасибо! Ты топ!
Эти функции просто прекрасны! Код написан прям офигительно четко, я бы даже сказал шедеврально. Очень понравился и зашел урок. За это всегда люблю смотреть твои уроки Владилен.!!!!
Потрібно більше таких відео😁
Просто шикарный пример разработки. Спасибо за труд!
Прошла ваш курс по html, css , сейчас js, спасибо, вы талантливый учитель!
Если жс учите, то до фреймворков ещё далеко.
@@McNeelone я знаю
@@McNeelone не так уж и далеко
@@McNeeloneУ Vue очень низкий порог входа
очень полезное видео. Очень хорошо все объяснено, все по полочкам, спасибо!
Владлен спасибо! И отдельное спасибо за сразу выложенные исходники))
Оооу как раз искал 👍🏻
Спасибо за труд:)
Владилен, спасибо! Я в своё время покупал твой курс по ангуляру, нашёл работу благодаря твоему подходу к обучению.. Реакт тоже нужен, буду изучать
Привет, можешь подсказать почему у меня Provider не видит: Cannot find module 'react-redux' or its corresponding type declarations. Что за хрень, я уже задолбался с этой проблемой
@@theway_up наверное уже неактуально, но все же . npm install react-redux
@@redhook777 я проверял json файл, там всё было ок
Больше спасибо за дельный контент. Я многому научился благодаря вашим видео. Еще раз благодарю
Спасибо за контент! 👍
Эта инфа для меня очень актуальна😇
Спасибо за труд! TypeScript, Redux Toolkit, RTKQuery, Tailwind
Владилен, спасибо тебе за твой труд! Здоровья и успехов в жизни!!!
Лайк просто за заголовок видео)) Посмотрю на досуге! Спасибо за подобный контент!
Классное видео, как всегда! Хотелось бы увидеть разработку SSR на реакте без использования фреймворков типа NextJs, надеюсь когда-нибудь такое у тебя появится :)
А чем тебе next не нравится?
Я только включил видос, но пишу сразу спасибо🙂
Если у кого ошибка - Middleware for RTK-Query API at reducerPath "api" has not been added to the store,
store должен смотреться так
------------------------------------------------------------------------------------
import { configureStore } from '@reduxjs/toolkit';
import { githubApi } from './github/github.api';
export const store = configureStore({
reducer: {
[githubApi.reducerPath]: githubApi.reducer,
},
middleware: (getDefaultMiddleware) => -----------------> Та самая функция которую нужно добавить
getDefaultMiddleware().concat(githubApi.middleware),
});
-----------------------------------------------------------------------------------------
Спасибо большое!
лучший
Спасибо, добрый человек!)))
Спасибо за лаконичную подачу, нашел несколько моментов по RTK для себя, хотя используем его уже год в проде) Классный пример со стилями.
А ты хорош! Спасибо за контент, тем более в свободном доступе. Всё четко, грамотно, у тебя талант объяснять. Учился на твоих роликах в том числе. Благодарен тебе !!!
Отличное видео. Спасибо, Владилен
Офигительный материал. Доходчиво и все по делу!
Очень ждал! Спасибо, Владилен
Спасибо за такие видосы, я под них засыпаю просто отлично.
Крутейшее объяснение! Спасибо за видео
Сейчас прохожу курс Владилена по этим технологиям, обязательно к просмотру)
Спасибо, как всегда очень полезно!
Ну просто шикарно, большое спасибо
Спасибо большое Владилен как всегда ты лучщий из лучщих
Владилен, очень благодарен тебе, перешёл со стека php wordpress на ts react node, твой курс по mern шикарен
Вот то же перехожу. А то с этими CMS только проблем себе нахожу:)
@@rich_6585 проблема в том, что не каждого заказчика можно убедить на react, они про него и не знают, а вот WP очень даже знают))
@@rich_6585 важно понимать, что работа с wp и с react, это совсем разные бюджеты. Я после пыхи пошел чуть ли не сеньором на реакт. Но решил побыть на позиции мидла в продуктовой компании
@@alexklimovich2439 да, я это понимаю. Были заказы на wp, +- стоимость 20к. Но, чтобы забрать эти деньги, с заказчиком надо воевать, тратя на это месяц/два. Возможно это мне такие попадались, но опыт с первых дней максимально негативный.
Сейчас делаю небольшой проект на react, стоимость на 300$, работы максимум на 1-2 недели. Да и то продешевил, так как первый заказ на этой технологии.
И это просто вёрстка, без бэкенда.
@@rich_6585 Кстати да, прям в точку, wp слишком огромный и слишком универсальный, и потому приходится костылить что-то ну просто в каждом проекте. Да, растягивание недельных проектов на месяц, это прям про wp. Потому я обычно веду минимум 4 проекта одновременно
Спасибо большое за интересный урок.
1:14:29 useState для хранения isFav - лишнее. Если у нас немного данных в store, то можно прямо в компоненте вычислять это значение. Если данных много, то можно использовать Set вместо string[] в сторе и получать isFav всегда быстро - сложность поиска в Set - O(1)
Тут нужно учесть, что чтобы Set использовать в сторе надо много чего еще сделать, а потом увеличивается сложность прохода по значениям, т.к. Set надо сначала в массив переводить, чтобы мапиться по нему
@@DarkzarichV2 Set поддерживает протокол итератор, поэтому его не нужно преобразовывать в массив чтобы пройтись по нему.
@@19n1ght Да, я знаю, что это итератор, но чтобы именно map сделать в jsx - не выйдет, только форофом или форичем в отдельной функции и там всё равно придётся собирать массив, проще Array.from сделать, всё равно одно и то же будет
@@DarkzarichV2 да, Вы правы, с map в jsx не выйдет
как всегда классное видео, интересный материал, хорошая подача. спасибо, Владилен!
Спасибо за урок, очень было полезно! Изучаю реакт, но с ts и redux ещё не работала, так что это прям то, что нужно)
Таких видосов нужно больше, у меня есть опыт, но все равно я всегда слежу за вами
Спасибо тебе за контент, ты и учишь, и мотивируешь своим образом и мыслями :)
Ты лучший, Владилен! Спасибо за толковый контент!
Очень интересно,побольше бы таких видео
контент который долго искал, тооп
очередной годный контент, спасибо за труд
Владилен спасибо тебе огромное! Будь счастлив!
Спасибо большое за ваш труд!
спасибо большое, уважаемый человек)
спасибо!! полезный видос, однозначно лайк
40:40 Хранить вычисляемое значение в состоянии считается плохой практикой. Так же как использовать useEffect для этого. Есть новая документация Реакта (легко гуглится по запросу React Docs Beta). Там есть разделы "Synchronizing with Effects" и "You Might Not Need an Effect". Рекомендую почитать если еще не видели :)
В самом конце тоже "isFav" можно было сделать без стейта
Интересно было бы прочитать ответ Владилена
@@Олежик-л3т почитайте новую документацию. Её лично Ден Абрамов пишет
th-cam.com/video/tz0fDABt67g/w-d-xo.html
Какой вариант будет лучше вместо useEffect? Кажется, что можно делать эту проверку и смену состояния в onChange инпута
Очень доходчиво объясняешь, побольше бы технических видосов.
Владилен очень крутой ролик..... больше таких роликов 🙏🙏🙏
Здравствуйте! Спасибо за полезного видео информация.
Спасибо за крутой контент! :)
Спасибо большое за этот ролик!
Порой уроки смотрятся легче и на одном дыхании, нежели какие-нибудь фильмы
Владилен спасибо тебе за ролик.
Отличный урок, хотелось бы побольше такого контента !
Отличное видео, спасибо!
Очень полезный контент! Огромное спасибо) Когда допиливаешь кнопку Remove из самой FavouritePage, удобней получается))
Продолжай идти к своей цели
Владилен, большое спасибо за урок! 🔥 Подсвeчу один момент: Есть отдельный html-элемент для выпадающего списка:
Молодец, побольше бы таких видосоа
То чё надо)
зачем я это смотрю.. я даже не фронтэндер
Я откуда знаю? Я фронтендер
🤣
А я откуда знаю я вообще фулл стек 😂😂
В CRA есть готовый темплейт для TS + RTK. Но в нем используется другая архитектура - деление на фичи. Тоже довольно удобный подход, всем советую потыкать)
Команда для генерации:
npx create-react-app ИМЯ_ВАШЕГО_ПРОЕКТА --template redux-typescript
И спасибо за видео, на днях буду пробовать tailwind 😊
Good job Vlad, thanks!
Не, ну просто лучший/ Сразу знаю)
Thank you very much for your work :)
спасибо тебе за твой труд
Оп оп оп, годнота подъехала)))
Крутейший материал!
Контент нам очень полезен!
Спасибо спасибо большое большое !!!
спс, делай свое дело! Заинтересованые разберутся и в обновлениях синтаксиса и в смене парадигмы некоторых фреймворков со временем!
1:02:20 Я давно не работал с Редаксом (и ни разу не работал с ReduxToolkit), но разве делать сайдэффекты в редюсере (чтение и запись в localStorage) это не нарушение границ ответственности компонентов? Разве редюсер не должен быть чистой функцией без побочных эффектов?
Ну не знаю как в toolkit но в обычном редаксе принято что редьюсер это чистая функция
редкость попасть на проект где вообще задаются такими вопросами) набросали рандомного говна по компонентам и в прод
@@sergeykahnwald6640 подобные моменты в хороших компания «отлавливают» на код ревью и просят переделать :)
@@19n1ght В RTK есть вшитая либа Redux Persist которая делает синхронизацию состояния (всего или определенного редьюсера) с localstorage автоматом
и чем этот тайл винд отличается от инлайн стилей? по мне так устраивать помойку в классах такая себе идея...
Возможно кроссбраузерностью?
Неправильно мыслишь, tailwind лучше инлайн-стилей тем, что инлайн-стили не имеют переиспользование кода, и занимают меньше пространства при сборке проекта, так же они добавляют некоторой кроссплатформенности (например некоторые используются для мозилки через -webkit или -moz и т.д.) это учтено в tailwind, и за это отвечает один класс с 5-7 символами, а инлайн стили каждый раз прописывать приходится, и они занимают мало того что в 2 раза больше символов (а значит и места) но ещё и не переиспользуются
@@ДмитрийВяткин-и3рлюбишь в говнокоде копаться?
Поему это это дженерик?! Разве дженерик это не абстрактный тип, который позволяет вызывать функцию с разными типами? Разве не вот такая запись дженериком будет? Ну т.е. any еще можно назвать дженериком, но не string же.
Лайк и комментарий из четырёх слов
супер , очень рад
круто! спасибо! 👍👍
Вай брат, всё получилось, после твоих курсов пошёл на работу, потом выгнали, когда узнали, что у тебя учился
Блин, жиза
а что ж так?
spasibo wikarniy rolik, ocen pomoq
Комментарий из четырёх слов
Какой у вас голос!!! 🥰
Thank`s very much :)
То, что надо))
data?.length! > 0 "! чтобы успокоить typescript" - что значит этот восклицательный знак?
спасибо вам огромное
spasibo vse super
Автору огромное спасибо за урок, полезная информация, единственное звук на видео низкий
Владилен , круто , хотелось бы Ангуляр увидеть))
Супер!!!👍
Было бы супер. Как раз связкой React+Typescript интересуюсь. Tailwind тоже интересен
Вырос за два года, как фронтендер на твоих видосах, и уже своих учеников отправляю смотреть.
Спасибо тебе за то, что ты делаешь!
Коммент из четырёх слов... После просмотра добавлю его ))))