Популярное

Музыка Кино и Анимация Автомобили Животные Спорт Путешествия Игры Юмор

Интересные видео

2025 Сериалы Трейлеры Новости Как сделать Видеоуроки Diy своими руками

Топ запросов

смотреть а4 schoolboy runaway турецкий сериал смотреть мультфильмы эдисон
dTub
Скачать

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

Автор: Елена Литвинова — Искусство Веб-разработки 🛸

Загружено: 2022-04-21

Просмотров: 68687

Описание:

В этом уроке создадим целиком вместе с вёрсткой ToDo list c использованием React, TypeScript, Zustand, ViteJS + будем использовать хранилище LocalStorage.
🍀 Поддержать канал: https://www.donationalerts.com/r/webe...
☕️ Купить кофе: https://buy.stripe.com/5kA7sL9574SG7x...
🎨 Купить набор кистей Procreate: https://webelart.com/illustration.
✍️ Мой telegram channel: https://t.me/webelart
🏰 Английский YouTube: @webelart_en
💁🏼‍♀️ Инстаграм:   / webelart  
🦄 LinkedIn:   / webelart  
❤️ Поддержать развитие канала:   / webelart  

Ссылки используемые в уроке:
🌱 Дополнительные материалы к уроку: https://github.com/liveldi/files_for_...
🌱 Ссылка на макет: https://www.figma.com/file/sUIxwc0dLG...)
🌱 State management zustand https://github.com/pmndrs/zustand
🌱 Документация ViteJS https://vitejs.dev

Рекомендуемые видео в уроке:
⭐️ Единицы измерения CSS:    • 20 методов массивов в JavaScript, которые ...  

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.

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

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

Поделиться в:

Доступные форматы для скачивания:

Скачать видео mp4

  • Информация по загрузке:

Скачать аудио mp3

Похожие видео

array(10) { [0]=> object(stdClass)#7399 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "LWtHl__oEWc" ["related_video_title"]=> string(106) "TypeScript ФУНДАМЕНТАЛЬНЫЙ КУРС от А до Я. Вся теория + практика" ["posted_time"]=> string(23) "1 месяц назад" ["channelName"]=> string(7) "Ulbi TV" } [1]=> object(stdClass)#7372 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "kXiLmTvGIdU" ["related_video_title"]=> string(62) "Пишем галерею на React + TypeScript & Deploy" ["posted_time"]=> string(21) "2 года назад" ["channelName"]=> string(85) "Елена Литвинова — Искусство Веб-разработки 🛸" } [2]=> object(stdClass)#7397 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "Wrpn-qZ3NTc" ["related_video_title"]=> string(121) "Разбираем хуки (hooks) в React по доке и на примере todo листа | уроки JavaScript" ["posted_time"]=> string(21) "2 года назад" ["channelName"]=> string(85) "Елена Литвинова — Искусство Веб-разработки 🛸" } [3]=> object(stdClass)#7404 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "lf32_XjKxxo" ["related_video_title"]=> string(76) "Подробно изучаем Zustand State Management (React, TypeScript)" ["posted_time"]=> string(21) "3 года назад" ["channelName"]=> string(85) "Елена Литвинова — Искусство Веб-разработки 🛸" } [4]=> object(stdClass)#7383 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "rgd1hsh6Zy0" ["related_video_title"]=> string(100) "Почему искусственный интеллект станет нашим хозяином!" ["posted_time"]=> string(19) "2 дня назад" ["channelName"]=> string(81) "И.И.С.У.С. — ИИ Свободного Условного Сознания" } [5]=> object(stdClass)#7401 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "GNrdg3PzpJQ" ["related_video_title"]=> string(64) "React JS фундаментальный курс от А до Я" ["posted_time"]=> string(21) "3 года назад" ["channelName"]=> string(7) "Ulbi TV" } [6]=> object(stdClass)#7396 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "tiXlND4zP1I" ["related_video_title"]=> string(80) "Восстание в США? / Стрельба и армия на улицах" ["posted_time"]=> string(23) "7 часов назад" ["channelName"]=> string(10) "NEXTA Live" } [7]=> object(stdClass)#7406 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "eLGH0is92VU" ["related_video_title"]=> string(166) "Ночная трагедия: погибшие и раненые под завалами. Иранские ракеты разрушили дома в Израиле" ["posted_time"]=> string(21) "3 часа назад" ["channelName"]=> string(31) "Сергей Ауслендер" } [8]=> object(stdClass)#7382 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "WTO7U-p92uE" ["related_video_title"]=> string(175) "ФЕЙГИН: Случилась ПОДЗЕМНАЯ ЯДЕРНАЯ ВСПЫШКА. Операция УДАРИЛА ПО КИЕВУ. Все оружие идет Израилю" ["posted_time"]=> string(23) "6 часов назад" ["channelName"]=> string(25) "Фабрика новин" } [9]=> object(stdClass)#7400 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "2d4vDRVcpYg" ["related_video_title"]=> string(159) "🔥После штурмов из 100 возвращаются единицы! За бегство русских ЖЕСТКО НАКАЗЫВАЮТ - НАКИ" ["posted_time"]=> string(23) "8 часов назад" ["channelName"]=> string(31) "Телеканал Прямий" } }
TypeScript ФУНДАМЕНТАЛЬНЫЙ КУРС от А до Я. Вся теория + практика

TypeScript ФУНДАМЕНТАЛЬНЫЙ КУРС от А до Я. Вся теория + практика

Пишем галерею на React + TypeScript & Deploy

Пишем галерею на React + TypeScript & Deploy

Разбираем хуки (hooks) в React по доке и на примере todo листа | уроки JavaScript

Разбираем хуки (hooks) в React по доке и на примере todo листа | уроки JavaScript

Подробно изучаем Zustand State Management (React, TypeScript)

Подробно изучаем Zustand State Management (React, TypeScript)

Почему искусственный интеллект станет нашим хозяином!

Почему искусственный интеллект станет нашим хозяином!

React JS фундаментальный курс от А до Я

React JS фундаментальный курс от А до Я

Восстание в США? / Стрельба и армия на улицах

Восстание в США? / Стрельба и армия на улицах

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

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

ФЕЙГИН: Случилась ПОДЗЕМНАЯ ЯДЕРНАЯ ВСПЫШКА. Операция УДАРИЛА ПО КИЕВУ. Все оружие идет Израилю

ФЕЙГИН: Случилась ПОДЗЕМНАЯ ЯДЕРНАЯ ВСПЫШКА. Операция УДАРИЛА ПО КИЕВУ. Все оружие идет Израилю

🔥После штурмов из 100 возвращаются единицы! За бегство русских ЖЕСТКО НАКАЗЫВАЮТ - НАКИ

🔥После штурмов из 100 возвращаются единицы! За бегство русских ЖЕСТКО НАКАЗЫВАЮТ - НАКИ

© 2025 dtub. Все права защищены.



  • Контакты
  • О нас
  • Политика конфиденциальности



Контакты для правообладателей: [email protected]