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

В этом уроке создадим целиком вместе с вёрсткой ToDo list c использованием React, TypeScript, Zustand, ViteJS + будем использовать хранилище LocalStorage.
🍀 Поддержать канал: www.donationalerts.com/r/webe...
☕️ Купить кофе: buy.stripe.com/5kA7sL9574SG7x...
🎨 Купить набор кистей Procreate: webelart.com/illustration.
✍️ Мой telegram channel: t.me/webelart
🏰 Английский KZbin: @webelart_en
💁🏼‍♀️ Инстаграм: / webelart
🦄 LinkedIn: / webelart
❤️ Поддержать развитие канала: / webelart
Ссылки используемые в уроке:
🌱 Дополнительные материалы к уроку: github.com/liveldi/files_for_...
🌱 Ссылка на макет: www.figma.com/file/sUIxwc0dLG...)
🌱 State management zustand github.com/pmndrs/zustand
🌱 Документация ViteJS vitejs.dev
Рекомендуемые видео в уроке:
⭐️ Единицы измерения CSS: • 20 методов массивов в ...
00:00 Введение.
02:44 Установка и настройка ViteJS
05:47 Настройка структуры директорий
11:55 Постановка задачи. Изучаем макет в Figma.
12:47 Добавляем базовую верстку.
19:28 Знакомимся с zustand.
23:01 Описываем типы todo листа
26:16 Создаём store на zustand
42:44 Работаем над формой добавления задач (InputPlus)
52:49 Добавляем стили к InputPlus.
01:00:55 Отображаем отсутствие задач.
01:02:52 Отображение существующих задач.
01:09:54 Работа над компонентой задачи (InputTask).
01:14:18 Работа над стилями InputTask.
01:21:59 Добавляем mode редактирования для InputTask.
01:30:59 Тестирование + небольшие правки
01:33:19 Погружение в middleware zustand (devtools)
01:37:40 Пишем собственную middleware для LocalStorage.
На канале я рассматриваю различные темы веб-разработки, на текущий момент: веб-основы, веб-анимации, веб-дизайн.

[@murcha5899]

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

[@user-cb2bw2fx4j]

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

[@evgeniyn1542]

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

[@user-oy6zl5zh8n]

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

[@igorgakhov1747]

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

[@webelart]

❤️

[@antoshjkee4978]

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

[@gvegasss]

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

[@gardenliken]

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

[@dionyazolotarev]

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

[@dr_morpho]

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

[@user-kn3ut1sh2o]

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

[@user-qi8ws2se1z]

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

[@samatibraimov4784]

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

[@webelart]

Спасибо! 🌹🌸

[@svetlanazheleykina4113]

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

[@user-qg7md1ev3f]

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

[@amoral3]

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

[@user-ky4vq5jm5u]

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

[@steur777]

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

[@zzloyshkolnik5703]

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

[@webelart]

Спасибо! ❤️

[@user-yq3rz6ug7f]

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

[@misterpopcorn8789]

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

[@vladnezex6891]

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

[@user-qu5ff6dw8h]

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

[@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!!! ❤️

[@_kawaibunny_2514]

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

[@user-de5co7rz3u]

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

[@fucktor82]

Отличный туториал, спасибо :) проблемы с TS в версии 4.0+ решается добавление дополнительного вызова create перед добавление middleware: create()(devtools(...)). И кстати у zustand есть нативный middleware для работы со стораджами - persist, в версиях 4.0+ кастомный из видео не работает из-за того что тип State - depricated и вообще TS ругается :)

[@andTutin]

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

[@segeytarnarutsky9090]

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

[@nikolaiandrianov1856]

Спасибо!!!

[@user-ss1bq3lu3j]

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

[@webelart]

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

[@polinaganina751]

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

[@webelart]

❤❤❤

[@unicoxr5tj417]

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

[@romanmerkulov830]

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

[@excusememuar]

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

[@demptd13]

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

[@webelart]

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

[@kristapstunnis2769]

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

[@webelart]

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

[@TheDaZorg]

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

[@webelart]

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

[@lolireligion1460]

Спасибо вам за творчество Елена, что скажете про vue? Стоит ждать от вас уроки по углубленному js?

[@webelart]

Что интересно по углублённому js? Про vue пока в ближайшем будущем нет, на последних трех работах был реакт и пока с ним :)) Но если в будущем буду пробовать для самообучения скорее больше либы, то возможно что-то сниму. Про реакт, nodejs, typescript точно видео будут!

[@alexalwinner8890]

@@webelart Плюсую за nodejs, очень интересно.

[@horsewithnoname3015]

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

[@webelart]

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

[@horsewithnoname3015]

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

[@Arthur_foundation]

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

[@webelart]

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

[@SadykoffFamily]

Спасибо за видео. Хотелось бы от Вас услышать мнение о Vue. К примеру в интернетах сейчас при выборе между React и Vue чаще всего советуют последний.

[@alexeybudai8511]

Vue, как мне говорили проще, но если сначало "помучаться" с реактом, то перейти на vue не сложно. Тут наверное вопрос как быстро хотите войти в it, наверное познать основы vue будет проще, хотя с текущей ситуацией и от джунов требуют достаточно много, так что наверное тут дело вкуса и целей. Сам пишу на реакт не сказал бы что это что-то сверх лёгкое или тяжёлое наверное это середина, ну это что касается основ, т к если изучать углубленно то и во vue много всего.

[@SadykoffFamily]

@@alexeybudai8511 8 месяцев прошло с того комментария) Я успешно деплою проекты и на том и на этом, попутное используя общие библиотеки типа tailwind или framer motion. И да, react для меня оказался даже проще.

[@user-tu2mg3jx5n]

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

[@user-rj9rd5dh9t]

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

[@banderprofi]

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

[@webelart]

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

[@1fractal]

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

[@webelart]

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

[@justauser8517]

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

[@webelart]

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

[@user-td5bw9rt2g]

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

[@webelart]

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

[@maximkhokhlov4187]

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

[@webelart]

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

[@frusen_sol]

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

[@webelart]

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

[@user-dq9pl8me3o]

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

[@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 (т.е. когда браузер не перезагружается постоянно при смене страниц), меняются только части на странице с точечными запросами данных.

[@user-dq9pl8me3o]

@@webelart Спасибо!

[@endorphinair8166]

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

[@webelart]

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

[@pie_company]

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

[@user-iu5ij8ri6g]

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

[@user-vw7zb5gb8c]

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

[@UzDevWave]

strick mode => 2x useEffect

[@svetlanavaldaeva3232]

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

[@svetlanavaldaeva3232]

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

[@murcha5899]

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

[@bur5153]

40:26 updateTitle

[@sergeys4732]

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

[@webelart]

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

[@sergeys4732]

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

[@webelart]

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

[@sergeys4732]

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

[@webelart]

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

[@user-ic9wm9mi1l]

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

[@sggames5813]

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

[@sggames5813]

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

[@user-bp4ct9sp9w]

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

[@jiauyjiauy3777]

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

[@webelart]

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

[@jiauyjiauy3777]

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

[@webelart]

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

[@jiauyjiauy3777]

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

[@webelart]

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

[@lunu7039]

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

[@user-wf7bn6ch2l]

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

[@webelart]

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

[@user-wf7bn6ch2l]

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

[@ramankarseka7362]

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

[@webelart]

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

[@user-ij3wr1ym1c]

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

[@webelart]

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

[@user-ij3wr1ym1c]

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

[@webelart]

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

[@user-ij3wr1ym1c]

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

[@TheBorninmotion]

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

[@nikital.9036]

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

[@user-bm9xh8wz2y]

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

[@webelart]

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

[@biLLie_wiLLie]

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

[@webelart]

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

[@user-ds2fm3qy3w]

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

[@Blondguy12]

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

[@1fractal]

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

[@Blondguy12]

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

[@SlonoKing]

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

[@webelart]

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

[@Blondguy12]

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

[@theoty-js]

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

[@webelart]

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

[@theoty-js]

@@webelart понял :)

[@alch8738]

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

[@killers512]

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

[@user-qi8ws2se1z]

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

[@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.

[@user-hruser]

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

[@lightinthedark5708]

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

[@webelart]

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

[@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

[@Danny-uc6kx]

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

[@SlonoKing]

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

[@user-fd8xw7ji2u]

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

[@ArpeksMenethil]

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

[@webelart]

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

[@dd4el12]

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

[@SlonoKing]

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

[@webelart]

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

[@ashimov1970]

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

[@webelart]

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

[@ashimov1970]

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

[@webelart]

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

[@webelart]

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

[@ashimov1970]

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

[@kenesaryHan]

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

[@webelart]

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

[@StarkElessar]

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

[@VDViktor]

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

[@vladislavtomasciuc8273]

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

[@webelart]

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

[@user-zy9ng5be4g]

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

[@VVVCOMy]

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

[@webelart]

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

[@biLLie_wiLLie]

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

[@webelart]

:))))

[@azamatyudaev]

не вайт а вит

[@webelart]

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

[@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 :)

[@adrynov]

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

[@user-oc1bh7sf3c]

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

[@special3831]

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

[@sochidenis]

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

[@webelart]

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

[@gift.albooms]

Чтобы 2 таски не создавались в useEffect с deps = [] нужно strictMode убрать