Пишем список задач на React (React Hooks)

preview_player
Показать описание
В этом видео я расскажу все, что вам нужно знать для создания своего списка задач (Todo list) используя React (React Hooks).

Tайм-коды:
00:00:00 Пример Todo List
00:01:09 Подготовка шаблона
00:03:45 App компонент
00:06:30 ToDoForm компонент
00:13:30 ToDo компонент

Видео о useState:
Видео о useEffect:
Учим React хуки (плейлист):

Мой сайт:

Подписывайся на соц сети:

#react #reacthooks #todos #владкалач
  1. Влад Калачев - JavaScript уроки
  2. todo
  3. react
  4. reacthooks
  5. todo react
  6. список задач
Рекомендации по теме
Пишем список задач 0:18:37

Пишем список задач на React (React Hooks)

Пишем список задач(todo 0:29:28

Пишем список задач(todo app) на React

Простой ТудуЛист на 0:28:38

Простой ТудуЛист на React. TodoList React-Hooks

Пишем свой список 1:39:53

Пишем свой список задач (Todo List) на React JS

Проект на JavaScript 2:04:28

Проект на JavaScript Приложение список задач ToDo

Разработка списка задача 1:59:18

Разработка списка задача на ReactJS (ToDo) #1

Пишем Todo list 1:10:06

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

Разработал ToDo приложение 0:40:27

Разработал ToDo приложение на React // Список задач на Реакт // React с нуля до профи...

Разработка списка задача 1:37:45

Разработка списка задача на ReactJS (ToDo) #5

Пишем свой To-Do 2:10:40

Пишем свой To-Do list с нуля на REACT JS

Создаём TODO List 0:46:34

Создаём TODO List на React

01 - Todolist 1:16:54

01 - Todolist React JS - практика JS планировщик Todolist | Слив курса из IT-INCUBATOR.IO...

Разрабатываем ToDo лист 1:50:13

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

Разработай 6 проектов 2:01:08

Разработай 6 проектов на ReactJS (для начинающих)

🔴 №1 Создаем 3:47:51

🔴 №1 Создаем список задача (ToDo) на Vue, React, Svelte, Angular

Разработка списка задача 2:25:05

Разработка списка задача на ReactJS (ToDo) #2

Фильтр задач на 0:11:04

Фильтр задач на React / Todo List, часть 2. Хук useEffect

Топ 3 худших 0:00:15

Топ 3 худших программиста на YouTube! #код #айти #программист...

Необычный Todo list 0:34:08

Необычный Todo list на React. React.js, React Hooks, localStorage

Сайт портфолио на 2:56:40

Сайт портфолио на React JS урок для новичков. Базовый вводный курс в React для начинающих...

Полный Full Stack 4:24:13

Полный Full Stack курс ReactJS + NodeJS для начинающих за 4 часа! (MongoDB, Express, React, NodeJS)...

Экран, Компонент, Flatlist. 0:16:22

Экран, Компонент, Flatlist. Урок 1 / Мобильное приложение список задач на React Native...

Todo приложение на 0:46:19

Todo приложение на React для самых маленьких // Твое первое приложение [React, JavaScript, Tailwind]...

React JS c 3:42:01

React JS c Нуля - Курс для начинающих БЕЗ ВОДЫ [2024]

Комментарии
Автор

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

Tайм-коды:
00:00:00​ Пример Todo List
00:01:09​ Подготовка шаблона
00:03:45​ App компонент
00:06:30​ ToDoForm компонент
00:13:30​ ToDo компонент

-javascript
Автор

Несмотря на стандартность примера, очень понравилась четкая последовательность действий!
Четкий алгоритм написания компонентов и их взаимодействия позволяет не запутаться новичкам...

victormog
Автор

super, bolshoe spasibo
lakonichno i pponyatno bez lishney vody

glavstroyspb
Автор

5 раз собираю в удовольствие) из всех тудушек на просторах эта просто топчик

Rhythm_Men
Автор

о, To do лист ) спасибо !!)) всё очень понравилось )))

eugenia
Автор

учусь на курсах по фронту за 40к рублей и когда там объясняли тему toDoList этот учитель объяснил точь в точь как автор данного канала. Отличное объяснение, желаю удачи автору))))

zloy_zver
Автор

и вот подобный todo лист надо уметь делать, чтобы взяли стажером за еду.
Охренеть

DekardKain
Автор

Очень понятое объяснение, но видимо что-то уже устарело и не работает.
Счётчик списка задач не обновляется, в консоль вылетает ошибка Uncaught и сразу обновляется вся страница.

ДядяБогданКлючНа
Автор

для map и filter не нужна копия массива, они итак возвращают новый массив.

irinabg
Автор

14:13 - а зачем в div добавляется атрибут key ?

СтепанЦуканов-ты
Автор

Всё получилось! Спасибо! Можно, пожалуйста, ещё практику на React :)

nataliiachaikovska
Автор

Не хочется умничать, но в функции handleKeyPress нету никакого смысла, так как инпут и так работает с кнопки Enter. А так не плохой урок, спасибо!

vados
Автор

Влад, спасибо за видос, также давай что-нить с redux, reducer, в таком же плане .

Виталий-ейн
Автор

При добавлении элемента все пропадает, ни одного тэга, белая страница. В чем проблема? Код с гитхаба взял

bocik
Автор

Во всех примерах на базе _create-react-app_ сразу удаляются тесты.
Может стоит поломать тенденцию - рассказать для чего и как их использовать? ;-)

victormog
Автор

Опа, видео от человека со "званием" Тим лид, однозначно подписываюсь

vidosiki
Автор

Ты крутой, мужик, привет тебе из Беларуси!
Можешь сделать урок уровнем выше, например kanban с таймером и тарификацией в колонке "In Progress" (с useContext, useReducer например), а в конце видео, кстати, можно немного от себя рассказывать за применение хуков, или как бы реализовывалась с отличиями от этого примера похожая работа. Ну это чисто так, может понравится идея)
Спасибо тебе!

promotezor
Автор

Влад, спасибо за видео. Всё конекретно и по делу. Единственное, у меня не сработал счётчик на {todos.length}. Есть варианты возможных причин?

dilyafruzik
Автор

Брат спасибо за твою работу! Но много лишнего)

МихаилДжекович-лщ
Автор

Добрый день,
Как можно добавить дополнительную строку и картинку ?
Например у мне нужно добавить форму с Фото, названием и основным текстом в самом низу кнопка добавить. Заранее спасибо за ответ.

dima