Разрабатываем ToDo лист на React + TypeScript + Zustand со сборкой на ViteJS | Уроки JavaScript

[@murcha5899]

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

[@escobar929]

Это крепкий лайк!!!!Нужно больше роликов по реакту и тайпскрипту< и всяких штук-фишек!!!!!!!!!!!!!!

[@samatibraimov4784]

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

[@webelart]

Спасибо! 🌹🌸

[@ronallik]

Отличный урок. Не обращайте внимание на "учителей" - в наших рядах их становится еще больше)) Подача материала отлично, все разложено по полочкам - однозначно лайк и подписка. Ждем новых выпусков.

[@gvegasss]

Супер! Нашел для себя нового классного учителя.

[@ОльгаБожедомова-у5ш]

Добрый день! Сейчас ищу работу, только что отучилась, с удовольствием пошла бы на первую работу под ваше начало. Вы объясняете так понятно, так приятно вас слушать, все сразу раскладывается по полочкам. Спасибо, что вы это делаете для нас😍

[@amoral3]

Привет! Где училась?

[@svetlanazheleykina4113]

Добрый день, Елена! Спасибо большое за урок! Старалась повторить, что-то получилось, что-то нет. Буду пересматривать и править. Спасибо за мотивацию и прекрасную подачу.

[@fontawesomewhoisthis]

Молодец, помогаешь развиваться новичкам. Благодаря таким как ты я смог добиться своих целей

[@antoshjkee4978]

Вы молодец ! Спасибо вам огромное за помощь сообществу, удачи в развитии канала)

[@polinaganina751]

Это мое первое видео от Елены. Мне очень понравилось два момента - "тасочки" (приятно слушать) и последние 10 минут крышесносных миддлваров с тайпскриптом. До этого было все понятно, Цуштант для меня новый стейт менеджер, но после Редакса очень понятный и приятный, а вот middleware с localStorage, да еще на TS - вот это для меня сложно и интересно! Спасибо!

[@webelart]

❤❤❤

[@dr_morpho]

Спасибо за ваш труд! Учусь по вашим видео ))

[@kuzinpeter3365]

Smart and charming person. Thank you for turning your knowledge into such high-quality video content, absolutely free. As long as KZbin exists I will be your subscriber.

[@webelart]

Thank you sooo much!!! ❤️

[@ДмитрийСергеев-ы9р]

Бага с двойным созданием задачи происходит из-за StrictMode. Это должно проявляться только в режиме разработки а не продакшена. Решение: убрать обёртку, либо забить)

[@webelart]

Да, мы там уже поняли. Удаляем. ❤

[@steur777]

мммуа)))) умничка) много всего нового узнал и попрактиковал) Спасибооо и лайк)

[@evgeniyn1542]

Елена, спасибо большое за видео, с Zustand ни когда не работал, и думаю будет очень интересно. 😊

[@kasetakkk]

StrictMode выполняет рендеринг компонентов дважды в development режиме, но не в production. По мнению разработчиков React - это позволяет обнаружить некоторые проблемы в вашем коде, если таковые будут и предупредить Вас об этом

[@segeytarnarutsky9090]

Только ночью приснился туду лист , после Реакт туториала, а тут такой подарок.

[@Alex_Korotkin]

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

[@РоманВлад-м9к]

Елена, вы лучшая! Очень приятно слушать и смотреть!)❤

[@igorgakhov1747]

Интересный урок 🤔 Спасибо за ваш труд, Елена! ❤

[@webelart]

❤️

[@zzloyshkolnik5703]

Здравствуйте, недавно наткнулся на ваш канал, очень всё нравится! Желаю вам процветания!

[@webelart]

Спасибо! ❤️

[@gardenliken]

Спасибо вам. Данный урок помог свести разве концы некоторых поверхностных знаний)

[@НиколайХаритонов-й3н]

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

[@excusememuar]

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

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

Спасибо за полезный контент! Особенно за TypeScript!

[@АлексейТютеньков]

Ты большая молодец! Продолжай в том же духе!

[@_kawaibunny_2514]

Прекрасно, с сеня подписка!

[@andTutin]

давно тудусов не было

[@unicoxr5tj417]

красивая девочка, и кодер. эх, стар я уже)

[@ВикаКоко-р8ю]

Оо, спасибо! Сегодня посмотрю, лайк заранее :3

[@misterpopcorn8789]

Агонь! Супер познавательно!

[@demptd13]

Спасибо за видео) не знаю писал ли уже кто-то, что бы при выделении инпута не было бордера, то указать outline: none;

[@webelart]

Рада, что помогла! Да такое можно сделать, но не всегда рекомендуют, т.к. интерфейсом можно пользоваться через табы и только таким способ узнать что выделено, что нет. Но я тоже время от времени удаляю эти выделения, если нужно чтобы красиво :)))

[@МишаЩетинин-з5ы]

Спасибо огромное! Видео очень крутое!

[@romanmerkulov830]

Классное видео и подача. 2 раза из-за StrictMode? Спасибо за уроки

[@Danya-y5g]

Написал приложение по видео, все работает круто кроме одной мелочи - при редактировании заголовка задачи, новый заголовок не сохраняется в localStorage Для того чтобы это исправить, в компоненте InputTask в input нового поля при событии onKeyDown передавайте onEdited(id, editValue), editValue - вместо title Т.е по факту вы просто передаете старое значение, а нужно передавать новое из состояния

[@Arthur_foundation]

Здравствуйте, хочу спросить если у вас платные курсы или что-то подобное? Я изучал html и css, теперь хочу двигаться дальше, вот нашел ваш канал и после просмотра некоторых видео, сделал для себя вывод что вы хорошо объясняете

[@webelart]

Пока на текущий момент нету. Рада, что материал и подача нравятся. ❤️

[@1fractal]

Только начал смотреть, уверен что видео будет супер. Кстати название Vite взято с французского, что означает быстро и читается как "вит".

[@webelart]

Аааа! Ох уж эти названия! :D Спасибо! Это прямо как zustand, первоначально читала его как зустанд, потом оказалось, что слово немецкое и правильно зистанд :))))

[@justauser8517]

@@webelart. Правильно будет зуштанд с немецкого

[@webelart]

@@justauser8517 Да я уже видела коммент, что слово немецкое. Опять же, ох уж эти названия :)

[@АндрейСидоров-ц3ж]

@@webelart правильно Цуштанд. Если уж по немецки.

[@webelart]

@@АндрейСидоров-ц3ж Короче всё зустанд! 😂 Успокоились! Сегодня на работе спросила у венгерца, он несмотря на то что знает немецкий тоже называет его зустанд. В общем норм :D

[@ДмитрийДругов-ш7й]

Елена, доброе время суток. Познакомился с zustand, благодаря вашему видео. Огромное благодарю. Сейчас пишу простенький сайт с использованием zustand, и при клике на input type="checkbox" ни чего не происходит. И в связи с этим, можно ли с вами связаться для просмотра кода и выявление ошибки? Заранее благодарю.

[@kristapstunnis2769]

Елена огомное спасибо за прекрасное видео, с достаточо подробными объяснениями!) Это первое видео, которое я смотрю у вас на канале. И у меня возник вопрос, а у вас на канале есть видео с подключением PostgresSQL к NodeJs? Если да, то можно пожалуйста ссылочку, заранее спасибо)😊

[@webelart]

Здравствуйте, рада что видео понравилось! Пока про NodeJS в связке psql нет, только начинаю погружаться на канале в темы реакта, ноды и всех связующих. Постепенно добавлю и этот урок. Тема действительно классная! Пока можете посмотреть в сторону либы pg (node-postgres).

[@banderprofi]

Для меня познавательно, благодарю. Но почему вы не пользуетесь emmet? Есть какой-то сакральный смысл?)

[@webelart]

Нет, нету сакрального смысла :) Просто не использую.

[@endorphinair8166]

время 36:36 на 35 строке лучше сделать так set({ tasks: [newTask, ...tasks] })

[@webelart]

Так лучше выглядит :)

[@yohankim7996]

I was watching your lecture and set ({tasks: [newtasks, ...tasks]}) Warning: Maximum update depth exceeded. I keep getting this error. Can I check the code?

[@pie_company]

я влюбился.выходите за меня !!!!

[@webelart]

Вот так сразу? :)

[@maximkhokhlov4187]

Елена, посмотрите в сторону UUID для генерации уникальных идентификаторов

[@webelart]

Да знаю про него, тема хорошая! Думаю в текущем примере не хотелось использовать доп. либу и как-то ограничиться маленькой функцией, но на бэкенде, конечно, лучше переходить к более профессиональным id. Кстати посмотрела сколько весит, в 3 раза больше чем zustand bundlephobia.com/package/uuid@8.3.2

[@frusen_sol]

в 18 реакте появился новый хук useId() как раз для генерации уникального случайного идентификатора =)

[@webelart]

@@frusen_sol Воу воу воу!!! Срочно надо изучать! 😍

[@TheDaZorg]

Елена, спасибо за ваши видео. Хотелось спросить, вы в настоящее время всегда используете только React на стороне фронта или также знакомы с vue или angular ?

[@webelart]

Здравствуйте, рада что видео понравилось. ❤️ С vue и angular не работала, на последних трех работах был React и в целом меня в нем всё устраивает, позволяет решить любые задачи которые нужны.

[@nikolaiandrianov1856]

Спасибо!!!

[@sergeys4732]

Зустанд получше Рудакса будет конечно, сами на работе тоже зустанд юзаем)

[@webelart]

О, тоже zustand используете! 🔥🔥🔥

[@sergeys4732]

@@webelart в bundlephobia смотрели размер бандла?

[@webelart]

@@sergeys4732 Сейчас проверила 1.1кб, с редаксом не такая чтобы разница 1.6кб... Вот у preact и preact-dom уже повыше, если с react сравнивать.

[@sergeys4732]

@@webelart а редакс тулкит?) там что то цифры совсем уж большие

[@webelart]

@@sergeys4732 С этим не работала. Интересно надо поизучать. Максимум туда redux-thunk подключала, ну и может какие-то либы для работы с API.

[@sggames5813]

Забавно, на ванильном js запросто, но реакт и другие библиотеки/фреймворки тёмный лес.

[@sggames5813]

@@awenn2015 Та я и так не парюсь, но я не понял что ты написал и твою озабоченность.

[@СергейПрокопчук-н9к]

лишний ререндер вызывается из-за StrictMode обертки

[@КонстантинЕгоров-ю8у]

Такое мне пока рано делать, но лайк не глядя за отличный урок! А скажите пожалуйста, на сколько хорошо надо знать вёрстку, если планируешь работать именно с реакт и Дж. с?

[@webelart]

Здравствуйте, Константин! Вёрстка вам здесь в любом случае пригодится, что по факту это такое: когда мы создаём теги (html в чистом варианте), добавляем стили (css) - и это уже вёрстка. Также можно добавлять события и реакции на них, кликнули на кнопку, что-то появилось. Собственно примерно в упрощённом виде так работают страницы сайтов :) В реакте у вас вместо чистого html будет jsx по факту можно назвать шаблонизатором, который на js позволяет писать теги похожие на html, собственно эти теги потом будут вставлены в чистый html и вы увидите в хроме отображение. Также будете добавлять стили. Можно по разному, в текущем уроке я использовала препроцессор scss, он в итоге преобразуется в чистый css и добавляется на страницу также. А вот js часть уже в реакте в плане событий имеет свои особенности, как реакции на события происходят и т.д. По факту в чистой разработке вы пишите на html, css, js клиентскую часть. Весь клиент по факту, а именно внутренности теги, стили и т.д. можно добавлять через чистый js, реакт - это просто js библиотека, которая по факту формирует html через js, но упрощает этот процесс и оптимизирует. css может по разному отрабатывать, тут настройка сборки (это может быть webpack), он может разделять js на отдельную логику css, js минифицированный и они уже подключаются к стартовой странице html. Но при этом вёрстка по факту остаётся, вам нужно уметь использовать css, располагать контент на странице, делать это качественно и грамотно. Поэтому вёрстку знать надо. Сам реакт в связке с доп. либами также добавляет много разных возможностей, которые позволяют перенести часть Бэкенд логики на клиент: 1. разделение на страницы 2. более точечные запросы. и т.д. И он очень популярен для создания SPA (т.е. когда браузер не перезагружается постоянно при смене страниц), меняются только части на странице с точечными запросами данных.

[@КонстантинЕгоров-ю8у]

@@webelart Спасибо!

[@jiauyjiauy3777]

Zustand произносится как /ˈʦuːʃtant/ ~ цуштант. Это немецкое слово, означающее "статус". Если уже читать на англ. манер, то это было бы ~ зустэнд (по типу zeus-tand) :)

[@webelart]

На английский манер - это зистанд 😜

[@jiauyjiauy3777]

@@webelart а почему 'zus' должно произноситься, как "зис"?

[@webelart]

@@jiauyjiauy3777 Да забейте, наслаждайтесь вечером 😘❤️

[@jiauyjiauy3777]

@@webelart да мне чисто интересно узнать (не более того), т.к. я зануда с лингвистической точки зрения. Да и можно на ты))

[@webelart]

@@jiauyjiauy3777 Если попробуете это слово запихать в Google Translate и нажать озвучку, то произносить зистанд. Звучит странно согласна, я его зустандом называю, но с немецкого это цуштанд :D

[@horsewithnoname3015]

спасибо за новый туториал❤ скажите, пожалуйста, а есть ли возможность привязать параллакс к движению телефона🤔 его акселерометру/ гироскопу

[@webelart]

Да такое можно сделать, сама не реализовывала, но на одной из прошлых работ в команде делали подобную штуку.

[@horsewithnoname3015]

@@webelart спасибо, чтож звучит как вызов)

[@UzDevWave]

strick mode => 2x useEffect

[@svetlanavaldaeva]

Добрый день! Подскажите, почему на 1:08 может возникать ошибка: "Свойство "children" этого тега JSX ожидает один дочерний объект типа "ReactNode", однако было предоставлено несколько дочерних объектов."

[@svetlanavaldaeva]

вдруг кому пригодится: в map надо добавить return

[@НикитаМалиенко-о6у]

Елена, подскажите какой у вас macbook?

[@webelart]

13 дюймов, M1, memory 16GB

[@НикитаМалиенко-о6у]

@@webelart хочу купить себе макбук, подскажите пожалуйста, по личному опыту, не мало ли вам 13 дюймов для разработки сайтов? все таки 13 и так кажется маловато, так ещё и при открытом дев тулз справа, так вообще)) как вам по ощущениям?

[@webelart]

@@НикитаМалиенко-о6у Тут всё просто. 15 дюймовые действительно более приятны если за ними работать изолированно, но у меня всегда есть внешний монитор, обычно 27 дюймов. И поэтому мне ок. А маленькие беру потому что тяжело таскать 15 дюймовые, и если я куда-то еду и долго на ногах, то прямо жуть, хоть они и тонкие и вроде бы лёгкие, всё-равно :))) Тем не менее даже с пятнашкам у меня внешний монитор тоже был, на него прикольно уводить окна браузера, консоль, а на основном писать код :)

[@НикитаМалиенко-о6у]

@@webelart круто, спасибо большое за развернутый ответ!

[@СашаИванов-ц2я3д]

Стрик мод вызывал юз эффект два раза с пустыми зависимостями

[@АндрейМельниченко-ъ2щ]

Доброй ночи! Понравилось ваше видео. Но к сожалению, пока знаний мало и не хочется еще TypeScript голову забивать. Хочу попробовать это реализовать на JS. насколько это реально? Можно ли интерфейсы заменить классами js? Кстати zustand понравилось больше по сравнению с useState. В Redux пока даже боюсь лезть Уже полгода изучаю JS, на кодеварс делаю задачи. Но когда пытаюсь что-то серьезней делать, впадаю в ступор. Так как трудно разбить большую задачу на маленькие подзадачи и решать их последовательно, создавая приложение.

[@webelart]

Здравствуйте! Вам в любом случае react потребуется. Можно без typescript, но на чистом JS будет сложнее. В целом на чистом тоже можно, на на react проще. Про zustand да он крутой, мне тоже больше, чем redux нравится сейчас. И про ваши трудности я тоже понимаю. Обычно я в такие моменты покупала книгу какую-нибудь, допустим по реакту и читала одновременно создавая приложение. Я подумаю на тему таких видео. может реально будет интересно.

[@АндрейМельниченко-ъ2щ]

@@webelart Добрый день! Не могу понять, реализация и взаимодействие с данными описано interface ToDoStore. Но непонятно, при взаимодействии с интерфейсом в приложении мы не вызываем функции, которые описаны ToDoStore. А в interface InputTaskProps описаны другие функции, и нажимая кнопку удалить вызывается функция, которая реализована в ToDoStore. Допустим, я хочу сделать не удаление задачи при включении чекбокс, а ее перечеркивание. По логике, я должен поставить флаг выполнения задачи true и изменить ее стиль css. Как происходит связывание функции удаления onRemoved: (id: string) => void; с функцией которая реализует само удаление removeTask: (id: string) => void; ЗЫ: нашел где происходит связывание - в App.tsx ЗЫ1: по реализации интересно сделать на чистом ReactJS, возможно с Redux. Так как в голове каша, и когда еще TS смотришь, он хоть мне близок, учитывая небольшой опыт Cи, все равно воспринимается тяжело

[@AmirAkhmetov-z4v]

скоре из за включенного useStrinct в main ts

[@ramankarseka7362]

Видео хорошее!! давай еще пилить тайпскрипте!))) и огромная просьба: не выкладывать в 60 кадрах, даже в 50 и даже в 30))). Для статических видео частота не нужна, а для кого-то это может быть критичным: тариф по трафику, ограничение по скорости/качеству. Спасибо

[@webelart]

25 кадров должно быть достаточно, посмотрю при след. монтировке. Последние видео 60 кадров, т.к. сначала монтирую кодинг съёмку, а она с компа 🙂 С камеры по умолчанию 25, и с какого источника начинаю сначала там настройки по умолчанию и берутся. В общем пофикшу, спасибо за комментарий 😘❤️

[@murcha5899]

sctrict mode всегда так отрабатывает два раза. удалить его и все. на 39 минуте

[@ДаниРадари]

как сделать билд и перенести на хостинг?

[@nikital.9036]

А какой смысл использовать сборщик? Чем create react app с typescript темплейтом не угодил?

[@АлександрЛемешевский-ф5й]

Основной плюс vite очень быстрое локальное компилирование. Изменения в разработке собираются за доли секунды

[@webelart]

Я не так много работала с такими сборщиками, обычно на проектах кастомные. Первоначально я использовала create-react-app для быстрой сборки примеров и вроде бы ок. Но когда с typescript установила, у меня возникли проблемы с scss и module. Начала разбираться в чём проблема потратила некоторое кол-во времени. И решила попробовать vitejs, буквально создала проект, пару команд и всё завелось моментом, модули css, typescript, svg без проблем вообще. На мой взгляд такие сборщики должны работать без всяких затруднений и с минимальными затратами сил, запустил - работает. С create-react-app уже не первый раз какие-то глюки были. Плюс он довольно давно уже не поддерживается нормально.

[@alch8738]

Если это немецкое слово, то произносится «цуштанд», означает состояние.

[@ЭльвираСадыкова-э7г]

Елена Литвинова - если хотите больше подписчиков и просмотров- делайте 10 видео для тупых и одно для умных.

[@bur5153]

40:26 updateTitle

[@wb_collections]

- из-за него идет перерисовка 2 раза

[@theoty-js]

из редакса надеюсь переключаться на zustand не придётся в дальнейшем

[@webelart]

У нас в компании как раз переключились 😅 всмысле на старом приложении редакс.

[@theoty-js]

@@webelart понял :)

[@raivisrasnacs1088]

Why use 5 different technologies for such a simple project? Plain javascript does job perfectly.

[@webelart]

Because the goal of this lesson is not to create a simple project. The goal is to study technologies: reactjs + state management zustand. And usually when you start to study a new library it's cool to create something simple and todo list is the perfect suit here.

[@TheBorninmotion]

было бы круто увидеть подобное на веб компонентах вместо фреймворков и либ

[@lunu7039]

Туду туду тудутудутуду тудутутуууууу дудудуду

[@Blondguy12]

Спасибо большое за ваши великолепные уроки, Елена! Хочу спросить у вас, повлияла ли текущая сложная ситуация в России на разработку, просто сейчас только учусь вёрстке и всему подобному и тревожусь что все возможно это зря и Россия теоретически может быть отброшена назад в развитии и не бессмысленны ли мои потуги к учёбе

[@1fractal]

Если тебе нравиться этим заниматься то точно не забрасывай, есть фриланс, оутсорс, комуто там знакомому знакомому чтото сделать, на самый худейший конец можно просто переехать... Главное стать хорошим толковым девом, дальше само пойдет... удачи тебе :)

[@Blondguy12]

@@1fractal спасибо большое за поддержку)

[@SlonoKing]

Наоборот спецы сейчас востребованы как никогда

[@webelart]

Я отпишусь по Лондону, т.к. здесь живу. Здесь все хорошо по прежнему востребовано и предложения от рекрутеров продолжают поступать. Недавно даже из меты вновь писали :) Ребята всё классно написали. Поддерживаю!

[@Blondguy12]

@@webelart благодарю за ответ)

[@killers512]

А в мире JS существуют примеры кроме ToDo листа?

[@Alex_Korotkin]

канал it--kamasutra там разбирается социальная сеть.

[@biLLie_wiLLie]

11:07 зачем восклицательный знак на строке 6?

[@webelart]

Это для тайпскрипта. Получение document.getElementById('root') не гарантирует, что в html документе есть элемент с id=root, typescript ругается, т.к. для функции ReactDOM.createRoot контейнер должен быть обязательно. И поэтому добавляем !, что говорит typescript-у мы уверены document.getElementById('root') !== null

[@lightinthedark5708]

Zustand это немецкое слово. Значит "статус". Посмотрите его произношение в гуглтранслейте, и не Вайт, а Виит.

[@webelart]

О боже, ещё один буквоед! Зустанд и Вайт!

[@ashimov1970]

Не зистанд, а зустанд. П.С. Елена, вы действительно в Лондоне работаете? 😲

[@webelart]

Правильно цуштант и это немецкое слово. А если в google.translate вобьёте, то на англ. будет зистанд. Да, я живу в Лондоне.

[@ashimov1970]

@@webelart 1. вы то упорно произносите зистанд 2. какая разница как на немецком? слово то означает технологию американского происхождения. Происхождение самого слова тут уже не имеет значения.

[@webelart]

@@ashimov1970 В англ варианте читается зистанд, в чём ваша проблема?

[@webelart]

@@ashimov1970 Почему вы решили, что технология американского происхождения?

[@ashimov1970]

@@webelart 1. в любом случае не немецкого. по доступной в инете инфе его создателями являются создатели Recoil, а создателем последнего является по инфе с сайта Recoil японец. 2. в ютубе все англоязычные блогеры, за исключением некоторых, называющих его по немецки зюштанд, называют его зустанд или застэнд. НИ ОДНОГО не слышал, называющего его зистанд

[@ArpeksMenethil]

Я чуть со стула не упал, услышав: "На порту localhost"! Порт: это 3000, а localhost - это адрес машины на котором запущен скрипт. А так, спасибо за объяснения)

[@webelart]

Оговорилась, что ж тут поделать. Этот момент заметила ещё при записи, и вырулила в видео через пару секунд, но решила не акцентировать внимание на ошибке. От программистов ничего не скроешь :) Рада, что контент понравился! ❤️

[@Danny-uc6kx]

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

[@mrwaqas4049]

For non Russian students English version should be available

[@webelart]

Currently it's not, but I want to start create English videos as well. I think soon I'll start it. ❤️

[@mrwaqas4049]

@@webelart ❤ from Pakistan

[@user-hruser]

не зистанд, а цуштанд. это немецкое слово означает состояние

[@dd4el12]

Мне кажется на чистом js быстрее будет, но потом расширить это на чистом js геморрой.

[@SlonoKing]

Чтобы написать микроприложение из двух конпок, нужно столько всего установить. Жесть какаято

[@webelart]

Понимаю ваше беспокойство, для такого небольшого приложения кажется проще на html, css, js все написать и будет норм. :) Но 1. Цель основная обучение, посмотреть на технологии, как можно использовать. Писать здесь полномасштабное приложение можно, но времени гораздо больше займёт. ToDo листы - это как правила классика для практики. Они содержат все базовые функции: удаление, обновление, редактирование. 2. В реакте мне нравится простота работы с DOM. Даже в таком небольшом примере. Т.к. когда знаешь как быстро всё настроить, а мы по факту сделали здесь всё быстро vitejs пару секунд и всё готово :) А дальше уже экспорты работают, любые лимбы какие захотите из npm быстро можно установить. 3. Когда приложение становится большим, многостаночник даже, крупнее магазин и т.д. У реакта есть много преимуществ, это по факту SPA и пользователь гораздо быстрее получает информацию на странице, т.к. перезагрузки между страницами нет, идёт перерисовка только нужных частей. Ну и т.к. react - это js библиотека, то при разработке SPA работать на чистом js станет довольно сложно. 4. Этот стек востребован на рынке. И довольно хорошо востребован: react, typescript , и как я вижу zustand тоже используют ребята судя по комментариям. ❤️

[@VDViktor]

Опа, а чего Лондон? А как же родина? Англосаксы же плохие, не?

[@vladislavtomasciuc8273]

c localStorage немного каша началась - скопировали вставили не заработало потом заработало)

[@webelart]

Всё как в жизни, согласитесь? 😊

[@VadimBakunovich]

Спасибо за проделанную работу! Есть небольшие замечания и пожелания: 1. Обратите внимание на произношение некоторых английских слов (например Vite, install); 2. Почему не пользуетесь возможностями ускоренного набора кода (как встроенными в VSCode, так и сторонними плагинами)? 3. Не совсем понятно применение тегов article и section; 4. Почему при выполнении задачи она удаляется? Обычно текст задачи перечёркивается или фон задачи меняется. Странный функционал ) 5. Для удобства также можно использовать в проекте абсолютные пути (относительно src).

[@kenesaryHan]

Видео хорошее но лучше текст заранее подготовить и проговорить

[@webelart]

Если текст заранее готовить, то видео будет искусственным. Я предпочитаю живую съёмку и презентации в том числе. Так подача выглядит более интересной и настоящей. Заранее готовлю обычно только примеры, т.к. иначе уйдёт много времени, но и даже эту подготовку делаю не всегда. ❤️

[@StarkElessar]

Такую архитектуру папок видел на рельсах 😁

[@VVVCOMy]

Немного критики: Не правельная подача матерьяла , а именно - непоследовательно. Для новичков очень запутано и не понятно, некоторые сушьности определены заранее .

[@webelart]

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

[@SlonoKing]

Ничёнипанятна

[@biLLie_wiLLie]

Сколько незнакомых слов в названии)

[@webelart]

:))))

[@azamatyudaev]

не вайт а вит

[@webelart]

Это всё, что вы вынесли из урока? 🤔

[@adrynov]

Дефолтная таска 8-)) Надеюсь, вы в жизни так не говорите, англицизмов в русском уже слишком много. Привет из Ирландии...

[@munashe_dev]

russian is difficult understand ... i want to learn russian language ..

[@webelart]

:))) I have an English Channel as well. ❤️

[@webelart]

This one kzbin.info/door/dw1R35g3uDj4LVt1-aS-hA :)

[@Коржик-щ4ф]

Женщина в программировании?!😱😱

[@special3831]

Елена вам срочно нужно вернуться в Россию, бросайте этот Лондон,в Россию срочно!!!!Мы ждём вас ,рано или поздно вас выгонят из Лондона а в России вам будут рады!

[@sochidenis]

Чтобы Два раза не вызывалось надо убрать из main.tsx

[@webelart]

Ага там уже разобрались! 😅 Спасибо!