Пишем Todo list App на React, useState hook

Todo list App (список задач) на React. Для хранения данных воспользуемся хуком useState. В приложении можно добавлять, удалять, редактировать задачи, а так же менять статус - закрытая или открытая задача. Компоненты функциональные. В видео показано все. начиная от установки приложения create-react-app до небольших элементов внешнего вида из react-bootstrap и иконок fortawesome
Вторая часть: • Фильтр задач на React ...
#todolistapp #react #todo #usestate #reactusestate #hooks #reacthook #todoreact #todoadd #todoedit #todoupdate #tododelete #reactjs #reacttodolist
Добро пожаловать на мой канал! В этом уроке мы погрузимся в создание Todo List App на React - мощного инструмента для управления задачами. Разберем, как легко и эффективно создать свой собственный список задач с использованием React. Узнаем, как добавлять, редактировать и удалять задачи, а также как использовать состояние для обновления интерфейса в реальном времени.
Этот Todo List на React будет не просто списком задач, а настоящим инструментом управления заданиями. Если вы интересуетесь разработкой на React или просто хотите улучшить свои навыки в создании веб-приложений, то этот урок для вас! Подписывайтесь, ставьте лайк и начнем создание собственного практичного Todo List на React - вашего личного менеджера задач

[@seo-soul]

2 часть. Фильтр задач kzbin.info/www/bejne/aXO8gmmNorB_m7c

[@natalianatalia3357]

Не слушайте тех, кто критикует или пишет зачем. Ваши уроки по написанию ToDo мне понравились, очень полезно. Пишите другие проекты.

[@aslanbekkaipaev9148]

Отличный пример того, как должно строиться и реализовываться обучающее видео! Очень помог немного лучше понять тему реакта!

[@sichouli1914]

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

[@user-en6mm4vo2n]

Огромное спасибо, всё описано просто идеально 🙌 С радостью посмотрел бы новые выпуски на разные темы реакта!)

[@user-de8qy1mw4g]

Спасибо, все понятно и доступно!

[@user-dd3ft1is2p]

Очень хорошое обьяснение!!!! Спасибо автору.

[@user-iu8pp6bo7d]

Спасибо за Ваш труд!

[@finger_colors]

Спасибо огромное, видео отличное всё понятно!

[@begimaiModueva]

Спасибо вам мне понравилось все очень помог понять хук useState 💣

[@user-wh9mc2po7g]

спасибо, хороший урок

[@serjsamoilow8711]

спасибо за изи вариант тудулиста и отдельное спасибо за библиотеку uuid - она тупо топ. кто не понял как работает uuid то там все просто: import { v1 as uuidv1 } from 'uuid'; id: uuidv1()

[@seanlanderas7257]

Cпасибо большое, а то я долго застрял на этом моменте)

[@user-et8qw8nu2m]

ДА, огромное тебе спасибо за комент с разъяснением, а то у меня тоже мозг закипел )))

[@blackbird4229]

спасибо, добрый человек!

[@talehmammadli4118]

Cпасибо большое ;)

[@aslanbekkaipaev9148]

Спасибо, друг!!!!

[@schoolofphilosophy4789]

здорово, наиболее приближенно к тому, что я ищу. Как понимаю, здесь представленна простая реализация. Получается, что наши компоненты "умные", следят за информацией... И, как понимаю, в дальнейшем, можно сделать их глупыми, реализовав Flux подход.

[@bettkaa]

когда мы создавали функцию для удаляемых значений,в newTodo не нужен спред оператор на todo, так как filter и так создает новый массив

[@seo-soul]

вы правы, спасибо за замечание

[@user-wm8jd5ti8w]

Есть ссылка на гит?

[@RusDevel]

У меня изменения ко всем постам добавляются(((

[@MrMetalforce]

please ..can you write the code?

[@user-eq3ph4qc9g]

Куда пропал брат?

[@iga6459]

44:53 после окончания функций saveTodo у меня выводит ошибка "todo is not iterable". Вообще без понятия как это ошибку исправить в интернете я не нашел. Help

[@andrey_andreevich_official]

Привет, если актуально, ответь, чем смогу помогу, я смог по уроку все сделать, все работает

[@Dober1288]

Почему в statusTodo используется метод filter ? И зачем перед каждым использованием map/filter копировать массив через спред?

[@seo-soul]

спред не нужен, вы правы. Про фильтр не помню уже, что там было

[@andranikagabekyan471]

Около 30:00 он скачивает uuid что бы поставить уникальный id но это глупо так как есть функция Date.now() которая просто указывает id не похожий на другие и не приходится устанавливать uuid тем самым нагружать проект

[@smteam56]

Как вариант зарандомить ID - Math.random().toString(36).substring(2, 9)

[@steinye]

в этом вообще 0 глупости. безусловно, собирать id он мог разными способами. Начиная от Date.now() и вплоть до генерации рандомных чисел. Но зачем делать костыль, если можно воспользоваться методом, который прямо таки и создавался для подобных вещей?

[@Dober1288]

а если Date.now() несколько раз подряд вызвать?

[@kotiki_bbl_ceksi1271]

37:30

[@smteam56]

По поводу уникального ID - можно его сгенерировать(зарандомить) таким образом - Math.random().toString(36).substring(2, 9). А так - видеоурок огонь, максимально разжевано!

[@user-ob6lj5lr5u]

Добрый день ,а можете подсказать или скинуть часть кода где это прописать?У меня почему-то с uuid ничего не работает

[@user-iz1tp2mo9h]

@@user-ob6lj5lr5u Привет, может уже поздно. Но держи : function saveTodo() { setTodo([ ...todo, { id: Math.random().toString(36).substring(2, 9), title: value, status: true, }, ]); }

[@pavel7650]

Я +new Date() генерирую

[@pgdn6665]

Если это кто-то смотрит в 2023, то uuid надо импортировать так "import {v4 as uuid} from "uuid" "

[@fazzzy297]

Зачем

[@user-iq9ll8lz9m]

зачем он пишет todo?

[@schoolofphilosophy4789]

потому что

[@obivanishche]

Зачем пишет Todolist? Ну наверное потому что это второй по популярности тестовый кейс на фронта джуна после лендинга