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

В этом уроке создадим целиком вместе с вёрсткой ToDo list c использованием React, TypeScript, Zustand, ViteJS + будем использовать хранилище LocalStorage.
🏰 Английский YouTube: @webelart_en

Ссылки используемые в уроке:

Рекомендуемые видео в уроке:

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.

На канале я рассматриваю различные темы веб-разработки, на текущий момент: веб-основы, веб-анимации, веб-дизайн.

[escobar]

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

[murcha]

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

[svetlanazheleykina]

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

[samatibraimov]

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

[ronallik]

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

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

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

[gvegasss]

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

[fontawesomewhoisthis]

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

[dr_morpho]

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

[antoshjkee]

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

[kasetakkk]

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

[kuzinpeter]

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

[steur]

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

[polinaganina]

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

[evgeniyn]

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

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

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

[segeytarnarutsky]

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

[gardenliken]

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

[zzloyshkolnik]

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

[АлександрК-ты]

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