Войти
  • 69681Просмотров
  • 3 года назадОпубликованоЕлена Литвинова — Искусство Веб-разработки 🛸

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

В этом уроке создадим целиком вместе с вёрсткой ToDo list c использованием React, TypeScript, Zustand, ViteJS + будем использовать хранилище LocalStorage. 🍀 Поддержать канал: ☕️ Купить кофе: 🎨 Купить набор кистей Procreate: ✍️ Мой telegram channel: 🏰 Английский YouTube: @webelart_en 💁🏼‍♀️ Инстаграм: 🦄 LinkedIn: ❤️ Поддержать развитие канала: Ссылки используемые в уроке: 🌱 Дополнительные материалы к уроку: 🌱 Ссылка на макет: (Community) 🌱 State management zustand 🌱 Документация ViteJS Рекомендуемые видео в уроке: ⭐️ Единицы измерения CSS: 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. На канале я рассматриваю различные темы веб-разработки, на текущий момент: веб-основы, веб-анимации, веб-дизайн.