📝 TODO LIST React + Typescript - ЗА 30 минут

Ваше первое приложение с помощью React js. 📝 TODO LIST довольно прост для реализации и полон для понимания основных react паттернов. Делаем просто 📝 TODO LIST с помощью библиотеки reactjs. Цель данного стрима, понять основы React и TS, так же получить разработки в 2022 года.
github rep - github.com/debabin/react-todo...
Таймкоды ⌛️
00:00 Вступление
00:27 Начало работы
01:30 Создание компонента Header
04:38 Создание компонента TodoPanel
11:00 Создание компонента Button
20:20 Создание компонента TodoList
43:00 Создание TodoContext
55:00 Вывод
Социальные сети 🔥
youtube: / siberiacancode
telegram: t.me/techdnevnik
vk: siberiacancode
twitter: / db_babin

[@fkinggaming934]

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

[@AleksSashka803]

Лучший👍

[@user-zq6hx6sl8k]

Спасибо, вспомнил как работать с тайпскриптом в реакте. Новичкам советую сначала освоить отдельно реакт и тайпскрипт, потом уже смотреть.

[@siberiacancode]

Спасибо за фидбек

[@uusser273]

привет дядя богдан

[@h1karoo]

Лучший!

[@siberiacancode]

Спасибо

[@jerusalemski]

-делаем за 30 минут -видео 55:35 Ладно 🗿

[@pinkblink6312]

Todo ето конечно хорошо ( база как говорят) а вот я б конечно очень хотел от тебя курс или ведео на канале TypeScript для React . Сейчас почти все уже хотят от джунов использование ТС. Спасибо за видос)) я иногда даже если не смотрю видео, но лайкаю сразу

[@siberiacancode]

Это база, я помню, все в списке на идея для стримов есть. TSу быть на моем канале, осталось ток понять когда, но я думаю через пару стримов можно будет>

[@KVelian]

Очень круто, спасибо за видео, всё просто и понятно, используя актуальный подход 👍 Так когда говорите Angular или Vue? 😁

[@siberiacancode]

Надеюсь скоро

[@jamjam3337]

👍

[@shazu3270]

Проблема в том, что если удалить всё из списка, то добавить больше невозможно, кнопка add не будет работать. Как фикс?

[@grenadier4702]

Можно чище сделать TodoPanel, если добавить onChange, куда прокидывается коллбек, принимающий имя и описание. Тогда компонент был бы общим и не пришлось писать два режима - add и edit. Я вообще не рекомендую никому явно прокидывать функции в компоненты. Все должно быть в обобщенном: onChange, onAdd, onEdit и тд, куда кидаются данные, и ты делай с ними что хочешь там, где используешь этот компонент. if (todo.id === todoIdForEdit) { return addTodo(name, desc)} /> } Также, забыл про мемоизацию TodoItem, что плохо скажется на оптимизации, если тудушек будет много

[@siberiacancode]

Мемо не нужно использовать, так как компоненты не будут выполнять rerender, кроме случая клика на edit. Так что мемо будет лишним. Просто так memo и useMemo тоже не стоит использовать, только если вы уверены, что будет прям очень много рендеров. По поводу первого случая согласен, компонент должен принимать не конкретную функцию там setItem например, а функцию действия onClikc и тд Про 2 режима, не думаю что в такой дизайне реально избавиться от такого, при этом не потеряв читаймости. Сделав 2 режима, я подчеркнул разный функционал компонента и не считаю эту загрязняем, это просто функциональность моего компонента.

[@grenadier4702]

@@siberiacancode Все тудушки будут ререндериться при едите/добавлении/удалении туду. Следовательно нужно мемо. А и checkToto в useCallback, дабы сохранить референс, иначе мемо будет бесполезным. Количество ререндеров зависит от количество тудушек. Чем больше, тем хуже скажется на производительности. Хоть туду может быть и мало, я бы все равно не пилил костыль, а просто запихнул компонент в мемо. В любом случае, поверхностная проверка пропсов быстрее, чем ререндер компонента Про два режима: да, это читаемее, но тяжелее поддерживать именно сам компонент TodoPanel, так как теперь у человека есть не одна функция-вывод - onAdd - а два режима, у каждого из которых есть свои определенные пропсы. Но в любом случае, и так, и так будет отлично, думаю

[@siberiacancode]

@@grenadier4702 тудушке не будут, есть key и поэтому все круто ru.reactjs.org/docs/reconciliation.html#recursing-on-children. Реакт оптимизируется этот момент. А про усложнение, тут надо следить за бизнес требованиями.

[@siberiacancode]

@@grenadier4702 Слушай а я ведь не прав, решил сам проверить руками. Я думал ключи прям помогают, но нет. Ключи нужны только для оптимизации отрисовки. Так что да мемо можно использовать, если предполагаются много тудушек тут ты прав 🤔

[@Muradlek]

эх, пойду на английском смотреть. не смог найти ничего в русскоязычном сегменте youtube. Вы объясняете с готовым кодом, когда можно ход мыслей объяснить. Зачем мне готовый код, когда я сам хочу писать его и понять, почему тот или иной момент написан именно так, как там написано. получается, не программистов готовят, а тех, кто код копипастит из stack overflow. кроме того, авторы в основном так торопятся, будто за ними бабайка бегает, и забывает, что такие легкие вопросы обычно интересуют новичков... Впрочем, пойду к индусам... благо английский знаю. но все равно спасибо, что постарались помочь многим, хотя я после двух минут, уже "перехотел" смотреть.

[@siberiacancode]

Привет, данное виде просто лайв кодинг с готовым кодом, такие видео нужны, чтобы ребята смогли сделать ctrl c и после v и сидеть разбираться. Мб дополнять код или удалять код и смотреть, что будет. Есть на старте проблема, что ты просто не знаешь, что писать. Вот такие видео помогают сделать первый шаг и глянуть код. Если хочешь более живой видосик, то на стриме делал тот же туду kzbin.info/www/bejne/bITGlmyppdV2oJI&ab_channel=SIBERIACANCODE%F0%9F%A7%8A-Frontend Там и ход мыли есть и вроде не торопимся.

[@yakub8798]

подскажите в каких случаях стоит использовать TS ? стоит ли его пихать везде ?

[@siberiacancode]

Прости за долгий ответ, если ты используешь ts, то лучше его использовать везде. Надо учесть, что есть конфиг файлы там prettier или тд, который можно написать ток на js, но это не страшно. Так же могут быть кейсы, где все таки понадобился js файл. Иногда бывает кейс, что ты переписываешь js на ts, понятное дело, что если это большой проект, то не получится за 1 вечер сразу его поставить на ts. Я рекомендую, если пишешь на ts, писать везде на нем

[@yakub8798]

@@siberiacancode понял , спасибо за ответ , ответ был достаточно полезным !

[@PoWeRMeH21]

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

[@siberiacancode]

Спасибо, я уже писал ранее, что в итоге я понял что это не мой контент и перешел к другому формату. Про контекст есть много в стримах по state managementу.

[@SNSDfOu]

супер, но Тайпскрипт пока для меня сложен

[@shazu3270]

У меня кнопки не меняют цвет почему то!!!🙂

[@shazu3270]

а не я дюрак все ок

[@shazu3270]

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

[@siberiacancode]

Ну вообще это просто хендлеры евентов из js. Мб просто стоит смотреть в эту сторону, а так чисто посмотреть примеры с инпутами и кнопочками

[@shazu3270]

@@siberiacancode Димончик спасибо!! Если можно реквест побольше таких часовых проектов для нубиков с обьяснениями

[@siberiacancode]

@@shazu3270 попробуем, но не хочется просто так писать код, но я постараюсь придумать что-то интересное

[@alikrekrytov6865]

Видео из разряда абы снять !(

[@siberiacancode]

Да так и есть, это было начало моего пути, я пробовал. Много подписчиков просили, что-то для новичков. Потом я понял, что не мой контент и перестал такое снимать.

[@alikrekrytov6865]

@@siberiacancode Хорошо что понял.. Удачи вам !

[@siberiacancode]

@@alikrekrytov6865 звучит, как будто хочешь обидеть. Мне и просто кажется такие форматы устарели, поэтому если пишу код, то только на стримах. Спасибо и тебе удачи 😎

[@v.demchenko]

шарлатан, какие ещё 30 минут. Поставил бы на x10 ускорение... было бы за 5 минут. Удивляют такие кадры

[@siberiacancode]

Так и сделаю

[@v.demchenko]

@@siberiacancode поставил лайк 2 раза.

[@user-zq6hx6sl8k]

Ты всё равно код смотришь и на паузу ставишь, смысл видео растягивать.

[@v.demchenko]

@@user-zq6hx6sl8k смысл писать 30 минут🤨 если по факту это не так. Ускорь видео и будет тебе facebook за 10 минут🤡