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

Опубликовано: 30 Сентябрь 2024
на канале: Елена Литвинова — Искусство Веб-разработки 🛸

66,360

1.9k

В этом уроке создадим целиком вместе с вёрсткой 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.

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