Тёмный

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

SIBERIA CAN CODE 🧊 - Frontend
Подписаться 10 тыс.
Просмотров 10 тыс.
50% 1

Ваше первое приложение с помощью 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

Опубликовано:

 

28 июн 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 41   
@user-zq6hx6sl8k
@user-zq6hx6sl8k Месяц назад
Спасибо, вспомнил как работать с тайпскриптом в реакте. Новичкам советую сначала освоить отдельно реакт и тайпскрипт, потом уже смотреть.
@siberiacancode
@siberiacancode Месяц назад
Спасибо за фидбек
@fkinggaming934
@fkinggaming934 Год назад
Классно все разобрана ) я попытался сделать нетривиальные задачи сам и получился конечно же 'говнокод', но это было близко к совершенству ) Зато познакомился с TSом. Спасибо за видео.
@jerusalemski
@jerusalemski Год назад
-делаем за 30 минут -видео 55:35 Ладно 🗿
@AleksSashka803
@AleksSashka803 Год назад
Лучший👍
@h1karoo
@h1karoo Год назад
Лучший!
@siberiacancode
@siberiacancode Год назад
Спасибо
@KVelian
@KVelian Год назад
Очень круто, спасибо за видео, всё просто и понятно, используя актуальный подход 👍 Так когда говорите Angular или Vue? 😁
@siberiacancode
@siberiacancode Год назад
Надеюсь скоро
@pinkblink6312
@pinkblink6312 Год назад
Todo ето конечно хорошо ( база как говорят) а вот я б конечно очень хотел от тебя курс или ведео на канале TypeScript для React . Сейчас почти все уже хотят от джунов использование ТС. Спасибо за видос)) я иногда даже если не смотрю видео, но лайкаю сразу
@siberiacancode
@siberiacancode Год назад
Это база, я помню, все в списке на идея для стримов есть. TSу быть на моем канале, осталось ток понять когда, но я думаю через пару стримов можно будет>
@jamjam3337
@jamjam3337 Год назад
👍
@grenadier4702
@grenadier4702 Год назад
Можно чище сделать TodoPanel, если добавить onChange, куда прокидывается коллбек, принимающий имя и описание. Тогда компонент был бы общим и не пришлось писать два режима - add и edit. Я вообще не рекомендую никому явно прокидывать функции в компоненты. Все должно быть в обобщенном: onChange, onAdd, onEdit и тд, куда кидаются данные, и ты делай с ними что хочешь там, где используешь этот компонент. if (todo.id === todoIdForEdit) { return addTodo(name, desc)} /> } Также, забыл про мемоизацию TodoItem, что плохо скажется на оптимизации, если тудушек будет много
@siberiacancode
@siberiacancode Год назад
Мемо не нужно использовать, так как компоненты не будут выполнять rerender, кроме случая клика на edit. Так что мемо будет лишним. Просто так memo и useMemo тоже не стоит использовать, только если вы уверены, что будет прям очень много рендеров. По поводу первого случая согласен, компонент должен принимать не конкретную функцию там setItem например, а функцию действия onClikc и тд Про 2 режима, не думаю что в такой дизайне реально избавиться от такого, при этом не потеряв читаймости. Сделав 2 режима, я подчеркнул разный функционал компонента и не считаю эту загрязняем, это просто функциональность моего компонента.
@grenadier4702
@grenadier4702 Год назад
@@siberiacancode Все тудушки будут ререндериться при едите/добавлении/удалении туду. Следовательно нужно мемо. А и checkToto в useCallback, дабы сохранить референс, иначе мемо будет бесполезным. Количество ререндеров зависит от количество тудушек. Чем больше, тем хуже скажется на производительности. Хоть туду может быть и мало, я бы все равно не пилил костыль, а просто запихнул компонент в мемо. В любом случае, поверхностная проверка пропсов быстрее, чем ререндер компонента Про два режима: да, это читаемее, но тяжелее поддерживать именно сам компонент TodoPanel, так как теперь у человека есть не одна функция-вывод - onAdd - а два режима, у каждого из которых есть свои определенные пропсы. Но в любом случае, и так, и так будет отлично, думаю
@siberiacancode
@siberiacancode Год назад
@@grenadier4702 тудушке не будут, есть key и поэтому все круто ru.reactjs.org/docs/reconciliation.html#recursing-on-children. Реакт оптимизируется этот момент. А про усложнение, тут надо следить за бизнес требованиями.
@siberiacancode
@siberiacancode Год назад
@@grenadier4702 Слушай а я ведь не прав, решил сам проверить руками. Я думал ключи прям помогают, но нет. Ключи нужны только для оптимизации отрисовки. Так что да мемо можно использовать, если предполагаются много тудушек тут ты прав 🤔
@shazu3270
@shazu3270 Год назад
Проблема в том, что если удалить всё из списка, то добавить больше невозможно, кнопка add не будет работать. Как фикс?
@Muradlek
@Muradlek Год назад
эх, пойду на английском смотреть. не смог найти ничего в русскоязычном сегменте youtube. Вы объясняете с готовым кодом, когда можно ход мыслей объяснить. Зачем мне готовый код, когда я сам хочу писать его и понять, почему тот или иной момент написан именно так, как там написано. получается, не программистов готовят, а тех, кто код копипастит из stack overflow. кроме того, авторы в основном так торопятся, будто за ними бабайка бегает, и забывает, что такие легкие вопросы обычно интересуют новичков... Впрочем, пойду к индусам... благо английский знаю. но все равно спасибо, что постарались помочь многим, хотя я после двух минут, уже "перехотел" смотреть.
@siberiacancode
@siberiacancode Год назад
Привет, данное виде просто лайв кодинг с готовым кодом, такие видео нужны, чтобы ребята смогли сделать ctrl c и после v и сидеть разбираться. Мб дополнять код или удалять код и смотреть, что будет. Есть на старте проблема, что ты просто не знаешь, что писать. Вот такие видео помогают сделать первый шаг и глянуть код. Если хочешь более живой видосик, то на стриме делал тот же туду ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-6Sce9sppCj0.html&ab_channel=SIBERIACANCODE%F0%9F%A7%8A-Frontend Там и ход мыли есть и вроде не торопимся.
@PoWeRMeH21
@PoWeRMeH21 Год назад
видос реально годный, но как то мало про реакт контекст, слишком быстро об этом рассказал, наверное чуть больше теории об этом и на практике не так быстро показывать то что делал в последней части, а так лайк
@siberiacancode
@siberiacancode Год назад
Спасибо, я уже писал ранее, что в итоге я понял что это не мой контент и перешел к другому формату. Про контекст есть много в стримах по state managementу.
@yakub8798
@yakub8798 Год назад
подскажите в каких случаях стоит использовать TS ? стоит ли его пихать везде ?
@siberiacancode
@siberiacancode Год назад
Прости за долгий ответ, если ты используешь ts, то лучше его использовать везде. Надо учесть, что есть конфиг файлы там prettier или тд, который можно написать ток на js, но это не страшно. Так же могут быть кейсы, где все таки понадобился js файл. Иногда бывает кейс, что ты переписываешь js на ts, понятное дело, что если это большой проект, то не получится за 1 вечер сразу его поставить на ts. Я рекомендую, если пишешь на ts, писать везде на нем
@yakub8798
@yakub8798 Год назад
@@siberiacancode понял , спасибо за ответ , ответ был достаточно полезным !
@SNSDfOu
@SNSDfOu 9 месяцев назад
супер, но Тайпскрипт пока для меня сложен
@shazu3270
@shazu3270 Год назад
У меня кнопки не меняют цвет почему то!!!🙂
@shazu3270
@shazu3270 Год назад
а не я дюрак все ок
@shazu3270
@shazu3270 Год назад
Ну чето прям плохо заходит с хукамии обработкой инпута и тд. Посоветуйте что почитать посмотреть послушать понюхать парни ребятки дорогие
@siberiacancode
@siberiacancode Год назад
Ну вообще это просто хендлеры евентов из js. Мб просто стоит смотреть в эту сторону, а так чисто посмотреть примеры с инпутами и кнопочками
@shazu3270
@shazu3270 Год назад
@@siberiacancode Димончик спасибо!! Если можно реквест побольше таких часовых проектов для нубиков с обьяснениями
@siberiacancode
@siberiacancode Год назад
@@shazu3270 попробуем, но не хочется просто так писать код, но я постараюсь придумать что-то интересное
@alikrekrytov6865
@alikrekrytov6865 Год назад
Видео из разряда абы снять !(
@siberiacancode
@siberiacancode Год назад
Да так и есть, это было начало моего пути, я пробовал. Много подписчиков просили, что-то для новичков. Потом я понял, что не мой контент и перестал такое снимать.
@alikrekrytov6865
@alikrekrytov6865 Год назад
@@siberiacancode Хорошо что понял.. Удачи вам !
@siberiacancode
@siberiacancode Год назад
@@alikrekrytov6865 звучит, как будто хочешь обидеть. Мне и просто кажется такие форматы устарели, поэтому если пишу код, то только на стримах. Спасибо и тебе удачи 😎
@v.demchenko
@v.demchenko Год назад
шарлатан, какие ещё 30 минут. Поставил бы на x10 ускорение... было бы за 5 минут. Удивляют такие кадры
@siberiacancode
@siberiacancode Год назад
Так и сделаю
@v.demchenko
@v.demchenko Год назад
@@siberiacancode поставил лайк 2 раза.
@user-zq6hx6sl8k
@user-zq6hx6sl8k Месяц назад
Ты всё равно код смотришь и на паузу ставишь, смысл видео растягивать.
@v.demchenko
@v.demchenko Месяц назад
@@user-zq6hx6sl8k смысл писать 30 минут🤨 если по факту это не так. Ускорь видео и будет тебе facebook за 10 минут🤡
Далее
Спасибо Анджилишка, попил😂
00:19
Хочу стать Junior React
18:42
Просмотров 4,2 тыс.
React Redux with TypeScript Crash Course - 2021
43:26
Просмотров 118 тыс.
Docker за 20 минут
21:42
Просмотров 63 тыс.
React-приложение на TypeScript
41:29
Просмотров 64 тыс.