React-приложение на TypeScript

[@toscaantosca4541]

Спасибо! Нравится, что рассказываешь спокойно, будничным голосом) Так приятней слушать.

[@vadimniziev5489]

Отличное видео! Михаил, спасибо! Изучаю ТС, вопросов много возникает, однозначно это видео закрыло некоторые, особенно по по оформлению types и interface.. хочется побольше таких видео, где делаем приложуху на reacr/redux/ts )

[@tirthadeva_yoga]

Михаил, спасибо большое за видео 🙏🏻 благодаря твоим урокам обучаться программированию приятно, интересно и полезно! Очень доходчиво, спокойно, и самое главное информативно.

[@META_MAZ]

Спасибо вы первый человек кто доходчиво объяснил

[@ОлегПетров-п4у]

Михаил, спасибо за такую важную и нужную тему! По внедрению TypeScript в React понятного объяснения практически не найти, а уж разбора сложных тем типа типизации Redux, reducer, connect, event, API, Thunk и остальных составляющих реального приложения, так и вообще не встречал. Однозначно, лайк и подписка. P.S. Буду ждать продолжения. ))) P.P.S. Отдельное спасибо за светлую тему в IDE, смотреть видео намного комфортнее чем на черной.

[@ilukhan791]

Спасибо за хороший урок Для продвижения React-приложение на TypeScript

[@VakiTaki]

спс, наконец-то узнал откуда берутся типы для разных компонентов и их событий

[@Sylar7773]

Урок НЕРЕАЛЬНО помог разобраться в TS, ОГРОМНОЕ Вам СПАСИБО!!!

[@ni4egonepridumal]

Спасибо Михаил, за ваш урок, все четко и локанично ! Было бы интересно увидеть еще в вашем исполнении больше видео по тайпскрипт.

[@maksymradchenko4889]

Михаил вы как всегда , великолепны ! Спасибо !! Давайте еще видосы про react+ts))

[@garikmelqonyan9130]

Great thanks, Michael. Simple, but good and useful tutorial.

[@ПавелСтародубцев-ц6ш]

Миша спасибо, очень полезный урок и главное понятный👍👍👍

[@AndranikArshakyan]

Видео отличное, дает ответ на многие вопросы и по типизации , и про наследование , рекомендую просматривать не 1 раз, с каждым разом понимаешь все больше и больше

[@dmitrykarpovich186]

Михаил, снимаю перед вами шляпу! Очень понравилось ваше изложение материала. Спасибо большое!

[@babkann]

Михаил, спасибо большое за отличный урок! Очень помогли мне как новичку выполнить задание на практике :)

[@АлМ-ы8ъ]

Проводник справа, тема светлая, очень "нестандартно", дорогой друг )))

[@tianshano]

Замечательный урок, большое спасибо! Честно говоря уже некоторое время мучилась с тем, как создать проект так, чтобы работать с .tsx файлами, а не .js. Создавать проекты еще не приходилось, только вносить правки :)

[@kolabizz]

Миша, спасибо! Отличное видео!

[@BlindPewRus]

Супер, коммент поддержки и благодарности

[@pitbrest]

Благодарю за работу

[@ahad5581]

Огромное спасибо. Было очень полезно.

[@Saveli_Sh]

Спасибо за видео! Очень помогло создать туду-лист. Единственное, что нет информации о записи данных в локал-сторадж, так как вся информация удаляется при перезагрузке. Я это решила в итоге. Может, для кого-то это очевидно, но я новичок в этом деле. Все равно, спасибо, конечно, Вам, и успехов!

[@АлександрШатохин-н7г]

Спасибо за видео. Если есть возможность , просьба сделать аналогичную связку React+TS, но посложнее и с использованием Редакса.

[@Awe88Some]

было бы круто, поищу, может, за два года он всё же сделал подобное

[@olehy5000]

Спасибо! ТайпСкрипт стал немного понятнее)

[@BiberStroy]

хорошо объясняете. спасибо!

[@andrzejsotnikow7494]

Спасибо, приятно было слушать

[@shiryaev585]

Спасибо большое! Больше видео по TS!!!

[@yakut54]

Миша, спасибо за науку! Первое приложение на TypeScript`е написано....

[@nnnabbot]

Михаил, спасибо большое. Хоть чуть чуть стало понятно в общих чертах работа с TS. Проектик бы с TS с использованием REDUX

[@web2905]

Спасибо за видео.

[@evgeniyn1542]

Отличное видео Михаил, спасибо! Даешь новый курс на удеми, React + TypeScript + Redux ( или его аналоги) :-)

[@mishanep]

Вот Redux уже более жёсткий в плане типизации :)

[@kamol8861]

очень годно, спасибо большое

[@admusmanov3009]

Очень круто 👍👍👍

[@denisvradiy8503]

Отличное видео, спасибо ! Сделайте пожалуйста видео с более сложным приложением, с типизацией асинхронных запросов и подключением библиотек

[@mishanep]

Я иногда думаю о подобного рода историях, но это на несколько часов. Затраты на подготовку видео большие, а отдача неочевидная. Пока аналитика показывает, что длинные видео плохо смотрят на моем канале. Может быть в рамках отдельного курса.

[@mariashabalina6299]

@@mishanep согласна насчет нескольких часов, смотреть тяжело. А если разбить на несколько роликов?

[@react_js]

оифгенное видео спасибо

[@deantek]

а я React.FC никогда не писал, всегда типизировал пропсы так: type ComponentProps = { name: string } const MyComponent = ({name}: ComponentProps) => { return {name} } или так нельзя делать и лучше прям как в видео?

[@mishanep]

Можно и так. Кто-то даже считает, что так правильнее. Через FC у нас неявно добавляется несколько свойств, например children.

[@Sobanim]

Почему у вас мало просмотров и подписчиков?( НУ ведь это ближайшее будущее fronta, большие приложения надо будет писать только на typescript

[@АлександрЛугченко-н3в]

Angular приложение все на тс

[@Sobanim]

@@АлександрЛугченко-н3в Я знаю. Но в вакансиях серьёзных фирм уже встречается react + typescript

[@АлександрЛугченко-н3в]

@@Sobanim 100% скоро ещё больше будет

[@johnconnor9787]

const inputRef = useRef(null); So in this React snippet we are using "generic" type, as I understand. Is my the following statement correct: We use "T" generic type (can be any letter) - when we do not know the exact type, which will be used inside of a function. "T" we use only when we DECLARE a function. But when we want to EXECUTE a function - we specify the concrete generic type, which will be used in this particular case. To sum up - in the example above - useRef - tells that this particular time the generics, which were specified in useRef declaration will be "HTMLInputElement " or "null" Am I correct?

[@mishanep]

Hello John! Yes, everything is correct.

[@johnconnor9787]

@@mishanep You are the best! :)

[@the.gist.]

Спасибо)

[@true227]

Михаил, можете подсказать React.FC еще актуален? Говорят, что его не стоит использовать больше

[@mishanep]

Кто говорит? =) У нас на проекте ребята используют. Мне больше нравится просто пропсам тип набрасывать.

[@true227]

@@mishanep в самом большом русскоязычном тг канале React мне сегодня несколько человек написали не использовать React.FC, за его использование никто не высказался. Вот так и учусь, в одном месте пишут одно, в другом противоположное , но послушаю в итоге вас :) Без ментора крайне тяжело разобраться:(

[@seiidkhandzhursumbekov1013]

А как скачать исходники чтобы запустить у себя ?

[@innokentiimarkov279]

Господа, дамы, с вами Сэр троглодит и сегодня мы пишем react-приложение на typescript (очень нравится видео)

[@DenInside]

Михаил, здравствуйте. Очень жду полноценный курс реакт + тс, планируется такой? Ил может быть скоро выйдет?

[@mishanep]

Приветствую. Я работаю над курсом по typescript. Там будет раздел про Реакт. Планирую выпустить осенью.

[@DenInside]

@@mishanep а осенью в начале? Или не знаете пока?

[@mishanep]

@@DenInside Я планирую на сентябрь. А там - как будет получаться.

[@DenInside]

@@mishanep очень жду и сразу куплю, вы супер

[@JonDoe-l9c]

Михаил привет. Не могу разобраться в одном моменте. Проект на React+Typescript. Есть одна карточка продукта для разных типов продуктов. Есть интерфейсы для каждого продукта свой. Как передавать нужный интерфейс в карточку продукта ?

[@mishanep]

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

[@JonDoe-l9c]

@@mishanep Ok. Спасибо

[@asfsafsafasfsafs5320]

Офигенный видос) Жаль что на русском языке мало материалов по TS. Лайк подписка)

[@totalcount]

не смог в такой проект внедрить emotion для стилей? как это сделать?

[@mishanep]

У emotion должен быть свой набор типов, который можно импортировать и использовать. Надо ковырять доку. Я работаю со styled-components. По сути то же самое, но нюансов emotion не знаю.

[@totalcount]

@@mishanep я использовал styled-components, всегда казалось, что может быть удобнее? Потом в наш проект внедрили emotion - оказалось очень штука то интересная, особенно когда привык и узнал все фишки. Вот только в своём проекте настроить пока не могу, сижу читаю доку как раз - не выходит. Что-то упускаю. Если будет стоять вопрос о теме для нового видео, то прошу данную настройку окружения взять на рассмотрение)

[@renbrek]

Спасибо за видео, единственный вопрос, видимо относительно недавно был какой то патч у ts, который теперь не дает просто написать e.target.value. Нашел следующее решение: (e.target as HTMLTextAreaElement).value. Однако, вопрос, как сейчас наиболее правильно реализовывать подобного рода задачи, заранее извиняюсь если вопрос слишком глупый, новичок в react и ts соответственно

[@mishanep]

Приветствую, Иван. Честно говоря, не совсем понимаю сам вопрос. Задачи бывают слишком разные и инструменты подбираются по-разному. Где вообще не требуется ts, где-то нужен дополнительный инструмент для управления стейтом. В лоб не ответишь.

[@renbrek]

@@mishanep Я имел ввиду типичный кейс для ввода данных. Просто я видел как значение из поля забирают с помощью e.target.value в 100% случаев. А ts теперь ругается на такую запись, я нашел решение, о котором выше написал, но решил поинтересоваться именно у вас может есть какое то более правильное решение. Спасибо за ответ

[@mishanep]

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

[@BOCbMOU]

@@renbrek тс ругается потому что вы неверно типизировали функцию. Не у всех HTML элементов имеется value в таргете. У HTMLInputElement он имеется, поэтому если хендлер пишется для инпута, то и тип должен быть соответствующий.

[@renbrek]

@@BOCbMOUДа, спасибо за ответ, я уже разобрался, типизировал event ChangeEvent 😊

[@vadimniziev5489]

Михаил, есть такой вопрос...)) здесь в проекте идет экспорт компонента через {...} и соответственно импорт также. Чем он отличается от export default ?

[@mishanep]

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

[@vadimniziev5489]

@@mishanep спасибо большое!! Я понял. Я думал здесь еще связано как то с lazy подгрузкой, оказывается не совсем

[@asfsafsafasfsafs5320]

Просто стиль кода, ну и некоторое предотвращение ошибок. При export default вероятность опечататься в импорте выше написав import Component-1 from "./Component-2" Если в Компоненте-2 указан export default то в строке импорта не будет никакой опечатки просто Component-2 погрузится под именем Component-1 и дальше в коде уже будут проблемы) При обычном экспорте в импорте как сказал Михаил если не указать import Component-2 as OLOLO from "./Component-2" сразу выскочит ошибка)

[@ПавелРубан-п2ч]

Видео пока не смотрел,есть тут редакс ?

[@mishanep]

Нет, это видео конкретно про Реакт, без дополнительных библиотек.

[@surensimonyan7106]

Привет а у вас в будущем будет урок или уроки по TypeScript ?

[@mishanep]

Здравствуйте. Смотря о чем речь. У меня есть плейлист по основам ts. Осенью выйдет видео курс.

[@surensimonyan7106]

@@mishanep можете скинуть ссылку

[@mishanep]

@@surensimonyan7106 kzbin.info/www/bejne/fWjJf5SQrK6in68

[@surensimonyan7106]

@@mishanep Спасибо и за урок TypeScript тоже)

[@velikorossnationalist4259]

👍

[@skyTechVektor]

у меня ысе ровно на js файлы создаются

[@runar9118]

Видио полезное , но цвет белой темы не очень

[@mishanep]

О вкусах не спорят)

[@petermashine1483]

мастер класс хорошии, еще бы редакс прикрутить!!!

[@mishanep]

Redux+TypeScript также есть на канале.

[@petermashine1483]

@@mishanep в этом видео применение useRef только для примера ведь? я в инпут добавил autoFocus и на глаз всё так же работает

[@mishanep]

@@petermashine1483 для примера. Фокусом не только при загрузке приходится управлять. Классический пример - заполнение банковской карты с переносом фокусом по заполнению каждого поля

[@glaciron]

Да уж ,эта путаница с проверкой ,сложно укладывается в голове,вроде ничего особенного ,но везде бегаешь по коду и добавляешь типы.Проще просто покинуть PropsTypes.

[@vladimirshumliaiev9279]

+

[@Antonym-b5o]

тошнит от ts, но уже во всех проектах оно

[@ДмитрийДмитриевич-ы2о]

Белая тема ? Серьёзно!!

[@yakut54]

в стандарте ES5: function handleChange(e: React.ChangeEvent){ setValue(e.target.value) }

[@alexanderkameo4809]

Спасибо!

[@zohidmustafoyev2448]

спасибо!!!👍👍👍