React и TypeScript - Практический Курс [2023]

В этом курсе вы на практике научитесь использовать React и TypeScript. Мы будем использовать Typescript при создании новых компонентов React, передачи данных через пропсы, при использование хуков Реакт (включая useState и useEffect) и многие друие вещи.
Исходники здесь: t.me/stackdevru/67
Таймкоды:
00:00 - #1 Описание проекта
02:58 - #2 Структура проекта и установка
06:19 - #3 Typescript и переменные
09:39 - #4 Typescript и объекты
14:49 - #5 Typescript и функции
20:28 - #6 Псевдонимы types и interfaces
27:05 - #7 Создаем компонент App
28:47 - #8 Форма добавления Пиццы
38:27 - #9 Получаем данные из формы
41:18 - #10 Создаем модель пиццы + состояние для хранения пиццы
43:56 - #11 Метод addPizza (сохраняем новую пиццу в состояние)
51:04 - #12 Отображаем пиццу - компонент DisplayPizzas
54:26 - #13 Создаем карточку пиццы
01:00:40 - #14 Форма редактирования пиццы
01:07:33 - #15 Сохраняем обновленные свойства пиццы
01:14:21 - #16 Удаление пиццы
Мои Курсы:
JS для начинающих: js001.ru
React для начинающих: react001.ru
​Все мои курсы (+ исходные файлы): stackdev.ru
Подписывайся на соц сети:
Telegram: t.me/stackdevru
VK: vasilymur
Instagram: / vm_online
Мой блог о веб-разработке: stackdev.blog

[@lowmikow1099]

Огромное спасибо за видео! Для новичков в TS очень мало столь понятного контента)

[@scvorec77]

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

[@stackdev]

Спасибо!

[@evgenya_pan]

Спасибо за видео, было полезно

[@AtakanMoldomamytov]

Большое спасибо! Очень вовремя, вы лучший

[@stackdev]

Спасибо)

[@user-nb1is5wc4k]

Большое спасибо, очень полезный урок!

[@stackdev]

Спасибо за поддержку!

[@alekseysedykh5372]

Подача великолепная, мне очень понравилось! Благодарю и удачи в дальнейшем!

[@stackdev]

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

[@tazorprod.934]

Шикарный курс. Спасибо вам ОГРОМНОЕ за старания.

[@stackdev]

Спасибо!

[@Andrey_Osintsev]

Отлично, ещё раз повторил материал по стейтам и увидел пару интересных вещей по ТайпСкрипту. Спасибо!

[@stackdev]

Спасибо за поддержку!

[@user-yf2er5vr8q]

спасибо за суперуроки по js - могли бы вы записать что-то ознакомительное по беку типа nest.js

[@alexanderkomanov4151]

Очень хорошее объяснение.

[@stackdev]

Спасибо

[@user-qn3hb4nk6g]

Это потрясающе, благодарен

[@stackdev]

спасибо! продолжение видео на stackdev.ru

[@dimasnytin]

Василий, огромное вам спасибо. Я, как раз сейчас начал изучать React, а этот проект прям то, что нужно 💪

[@stackdev]

Спасибо за поддержку!

[@scvorec77]

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

[@user-in5qb3ml4l]

Очень полезное видео, спасиБо !

[@stackdev]

Спасибо!

[@alekseysedykh5372]

Также хочу поделиться более быстрым способом определения типа евента, если вы не знаете какой тип события хочет TS, то можно поставить намеренно тип number(например e:number), TS подчеркнёт слушатель, навести мышкой и узнать, какое событие ждёт TS, скопировать его и вставить)

[@denrainmen5631]

Привет из инкубатора ! )

[@reactnext13]

как же круто объясняет автор, я такого понятного объяснения негде не встречал.

[@stackdev]

Спасибо!

[@aldarzhai]

Спасибо за видео. Подскажите, что за тема у вас в редакторе?

[@elconrel9665]

Спасибо за видео, было бы здорово увидеть подобный проект с использованием редакс тулкит (его тоже везде требуют)

[@alexidino]

Лучше написать чего они не требуют)

[@nikn6244]

тулкит не сложный

[@esp2644]

​@@nikn6244 не хрен если есть схема, а если ее нет, и нет понимания как ее сделать?

[@user-xe8lg6mg5h]

Хороших урок. Будет завершение приложения? сохранение в localStorage и загрузка из него, пагинация? очень бы хотелось закончить)

[@stackdev]

Продолжение на stackdev.ru

[@eshapechko]

Классное видео, всё доступным языком. А что за тема vscode используется?

[@stackdev]

Спасибо! тема называется Dracula

[@bobmagrega]

Объясните, пожалуйста, что это за запись на 51:07 на 25 строке? Почему name взято в квадратные скобки?

[@infinitym1bb]

Добрый день Василий! После клонирование репо и инсталяции пакетов во всех файлах где импортируется React/ReactDOM выводит ошибку "../index.d.ts is not a module", в инете не нашёл правильное решение.

[@stackdev]

а поподробнее текст ошибки можете написать?

[@magaall7249]

я не понял, как у вас все js файлы, перешли на расширение tsx ? и что надо было установить, чтобы начать работу на taypScript? npm i typescript ?

[@tazorprod.934]

Cкачайте архив с исходниками ( ссылка в описании есть), распакуйте его в папку вашего будущего проекта и после этого пропишите в терминале npm i

[@user-sv7nl7bz5h]

а зачем мы прокидываем функции вглубь всех компонентов пропсами? ведь при клике на них, будут всех компоненты перерендерены или это будут в дальнейших видео донесено и перенесено в redux?

[@stackdev]

Сначала максимально упрощаем. Видео для начинающих.

[@eney1975]

не работает в хроме (index):6583 crbug/1173575, non-JS module files deprecated.

[@ooldstar]

🍕 Перед просмотром лучше поесть

[@qwertll8622]

Хороший материал, но тип компонента FC не стоит использовать

[@SergioDev001]

будет ли продолжение видео?

[@stackdev]

Продолжение на stackdev.ru

[@SergioDev001]

@@stackdev спасибо

[@SergioDev001]

@@stackdev подскажите пожалуйста, реализации пагинации в учебном материале нет?

[@stackdev]

@@SergioDev001 пока нет

[@ivanivanov6118]

Стоит ли начинать изучать React с минимальными знаниями JS ?

[@stackdev]

не стоит

[@ivanivanov6118]

спасибо@@stackdev

[@AntonioBenderas]

А этот мини проект подойдёт тем, кто ещё вообще не щупал ни Реакт, ни Тайпскрипт? То есть без минимальной теоретической базы

[@stackdev]

Думаю лучше какие-то базовые вещи сначала почитать (чтобы понимать о чем речь..). Но в общем - здесь все на базаовом уровне

[@scvorec77]

Я так понимаю реакт надо учить если есть базовые понимания html css и js, так как у реакта своя логика

[@AntonioBenderas]

@@scvorec77 это понятно, js надо знать

[@scvorec77]

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

[@stackdev]

@@scvorec77 все верно. HTML + CSS + JS.

[@supatrupa12345]

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

[@dmaberlin]

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

[@stackdev]

Лучше всего - сделать проект по видео - потом на основании этого проекта сделать что-то свое (полностью переработать его)..

[@dmaberlin]

@@stackdev супер , спасибо!

[@user-sv7nl7bz5h]

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

[@stackdev]

Так мы же их создаем сами..

[@user-sv7nl7bz5h]

@@stackdev я скопировал базу с твоего репо, просто вижу, что мы нигде не импортируем demoPizza и в publik есть фотки сами. но не понимаю, как без импортов к нам попадают фотографии

[@boolka2323]

@@user-sv7nl7bz5h тот же вопрос... сейчас сижу делаю по видео - фотографии не отображаются... уже и адрес меняла, ничего не работает....

[@user-pn8nu6mp4g]

create-react-app в 2023 году... Мда..

[@user-vr2ks1xe6d]

А что не так обьясните пожалуйста.

[@tazorprod.934]

@@user-vr2ks1xe6d при создании нового проекта на реакте таким образом по дефолту около шести ошибок вылазит в терминале. Желательно использовать другой способ, например, react+vite. Погуглите эту тему, много интересной инфы есть на этот счет

[@user-gl8qs7qj4k]

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

[@gift.albooms]

Спасибо, круто и наглядно! В идеале бы упомянуть, что в дальнейшем стоит избавляться от "props drilling" - это когда пропсы прокидываются через кучу компонент насквозь и не задействуются в промежуточных компонентах. Это потом засоряет пропсы и усложняет работу. Решается проблема контекстом или state-менеджером в более сложных проектах.

[@stackdev]

ну state management это уже отдельная история)

[@elenakhilalova]

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

[@factsShorts13]

почему onClick не работает как видео? Property 'onClick' does not exist on type 'IntrinsicAttributes & IconBaseProps'. 29 | 30 | > 31 |

[@factsShorts13]

красава.. установил иконки отдельно через --save, и словил баг. все работает! чудесная работа Василия!