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

  Рет қаралды 47,036

RED Group

RED Group

Күн бұрын

Пікірлер: 109
@REDGroup
@REDGroup 2 жыл бұрын
🔥 Оформить премиум подписку - htmllessons.ru/premium? Скачать 🖥 исходник проекта в нашем хранилище - htmllessons.ru/storage#storage_file_36 Тайм коды: 00:00 - Начало 00:36 - Поиск дизайна 02:59 - Как установить React? 03:52 - Установка Tailwind CSS для упрощенного написания стилей 08:47 - Структура папок 11:02 - Что такое компонент и JSX? 12:23 - Продолжаем разбор файлов и папок 14:32 - Запуск проекта + тест Tailwind 15:09 - Обзор дизайна 16:04 - Массив данных 17:05 - Вывод списка тудушек 17:55 - Отдельный компонент тудушки 19:27 - Компонент красивого чекбокса (react icons) 23:15 - Layout (общие стили для всех компонентов) 24:14 - Заголовок 24:46 - Продолжаем делать компонент тудушки 27:10 - Локальное состояние массива через хук useState 29:13 - Выполнение задачи [Функционал] 31:22 - Как сделать проверку в классах? 34:35 - Еще раз объясняю функцию "выполнение задачи" Сори за звук :( 35:13 - Удаление задачи [Функционал] 38:40 - Добавление задачи [Функционал] 41:21 - Поле для добавления задачи 43:19 - Выполнение функции по нажатию на Enter 43:50 - Доработки поля 44:47 - Очистка поля после ввода 45:45 - Что получилось? 45:56 - Спасибо за просмотр!
@AreonPak
@AreonPak Жыл бұрын
Название темы редактора пж
@flashback8504
@flashback8504 2 жыл бұрын
Все четко, все шикарно ОЧЕНЬ хочу чтобы такие видео были почаще, завтра скорее всего куплю у тебя интенсив по Реакту, потому что ты единственный, кто объясняет понятно быстро и самое главное без воды ,а что реально пригодится!
@REDGroup
@REDGroup 2 жыл бұрын
Буду рад!
@flashback8504
@flashback8504 2 жыл бұрын
@@REDGroup Седня куплю интенсив на 3 месяца
@REDGroup
@REDGroup 2 жыл бұрын
👌
@flashback8504
@flashback8504 2 жыл бұрын
@@REDGroup Ты лучший, спасибо за твои старания , ты заслуживаешь большего все хейтеры просто лесом идут 🔥🔥💪💪💪
@mister_robot01
@mister_robot01 2 жыл бұрын
Хотелось бы уроки по TS с реакт) Спасибо за ваш труд!
@ДмитрийШагин-в3х
@ДмитрийШагин-в3х Жыл бұрын
Для тех кому все равно сложно понять, выпиваем 0.5 и включаем скорость 0.75
@May-yw1kb
@May-yw1kb 2 жыл бұрын
Спасибо большое, Макс! Сказал - сделал.
@nerofighter472
@nerofighter472 2 жыл бұрын
Топ видос! Наверно контент для новичков всегда будет актуален))
@unknown.6914
@unknown.6914 Жыл бұрын
крутое видео, спасибо Макс
@REDGroup
@REDGroup Жыл бұрын
Пожалуйста, скоро кстати перезапустим эту рубрику, придумал более интересный формат
@marynagaluza1707
@marynagaluza1707 Жыл бұрын
Я совсем начинающий реактщик, мне безумно зашло, это определённо подписка!)
@kupolhub6991
@kupolhub6991 2 жыл бұрын
Привет Макс, хотелось бы посмотреть как сделать доску объявлений на React
@Boro8ey
@Boro8ey 2 жыл бұрын
Спасибо большое за урок! Объясняешь очень круто и понятно. Писал сразу на typescript т.к. посмотрел твоё видео и без него очень сложно будет в будущем. Попробую дополнить этот проект, сделать разные другие фичи: описание, markdown и т.д. Только есть одно но: в layout нужно добавить min-h-screen, чтобы при добавлении новых элементов фон не исчезал.
@xPyc9x
@xPyc9x 2 жыл бұрын
Спасибо за крутой контент
@wladis1047
@wladis1047 Жыл бұрын
Супер круто и информативно, спасибо что ты есть
@webstack-frontend1697
@webstack-frontend1697 Жыл бұрын
И правда куртой ролик💥
@slava_tfdf
@slava_tfdf Жыл бұрын
Делал todo на JS и сохраняли в LocSt, теперь попробую по твоему уроку сделать на react. 👍 Если ещё будут уроки для новичков, то есть такая потребность в реализации проектов для спорта. Видел у тебя курс с индивидуальными тренировкам и подумываю взять чтобы пройти, так как главы там очень в тему. Но в большей степени есть интерес реализовать 1. это турнирная таблица на 4 команды (расписание игр, дата/время, стадион, судья) + ввод результатов (счёт, ФИ забил, ФИ ассистент, минута) + статистика (Бомбардиры, ассистенты) + разумеется админка, чтобы была возможность все эти данные вводить. 2. это ПРОГНОЗЫ - пользователи регистрируются (регистрацию и авторизацию хочу подглядеть из приложения для тренировок) + дальше добавляем матч (или упражнение), на который пользователь может оставить прогноз (П1 Н П2, указать точный счёт и ещё что-нибудь). Далее админ вводит результат матча и считается статистика по прогнозам всех пользователей и показывается кто сколько за что получил баллов и кто на каком месте. [Вот это всё хочется самому сделать, надеюсь на Reacte + mysql это вполне возможно] // Отдельно напишу предложение, не сочти за наглость) Сейчас практикуюсь на мини-играх и придумал игру мне в тему спорта: N человекам задаётся по 10 вопросов типа чёрное или белое. Далее пользователь, который зарегистрировался может в своём ЛК узнать с кем у него больше сходства из этих N человек и отвечает на те же 10 вопросов. По итогу получается сообщение с тем, с кем больше совпадений: больше общего с N5. >> Предложение: если запишешь урок с такой игрой на react, то готов купить курс: htmllessons.ru/int/show/3 на 3 месяца за 2990р., только подскажи реализована ли там возможность, чтобы админ видел всех пользователей, которые зарегистрированы и их прогресс по упражнениям, если нет, то насколько сложно это делается (буду готов научиться сделать его сам в дальнейшем). Спасибо за видео на канале. Подписался и смотрю 👍
@lonviser4917
@lonviser4917 2 жыл бұрын
Cпасибо за контент. Классная рубрика
@evgenym.2137
@evgenym.2137 2 жыл бұрын
Круто, когда есть такие материалы для новичков 👍
@danilkin1347
@danilkin1347 2 жыл бұрын
однозначно лайк, можно больше контента по реакту начинающим?)
@REDGroup
@REDGroup 2 жыл бұрын
Посмотрим, как зайдёт
@danilkin1347
@danilkin1347 2 жыл бұрын
@@REDGroup У меня вопрос по поводу вип чата, я купил подписку на 3 месяца, но не могу найти ссылку на вступление, можете пожалуйста подсказать где её найти?
@REDGroup
@REDGroup 2 жыл бұрын
Рассылка идёт раз в 2 недели. Сегодня/завтра ожидайте приглашение на почте
@РобертПлант-е8ъ
@РобертПлант-е8ъ 2 жыл бұрын
Урок - огонь!!! Узнал много нового!!!
@I248
@I248 2 жыл бұрын
Вот ты крутой прогер и блогер. хорошо что можно смотреть без ускорения !)
@REDGroup
@REDGroup 2 жыл бұрын
Рад слышать!
@АнтонКравченко-в7п
@АнтонКравченко-в7п 2 жыл бұрын
Просто красава
@REDGroup
@REDGroup 2 жыл бұрын
Спасибо!
@royce5867
@royce5867 2 жыл бұрын
Здраствуйте 31:05 в моменте, у меня не отображается иконка check я ни как не смогла это исправить можете помочь с этим пожалуйста?
@getrogetro7509
@getrogetro7509 2 жыл бұрын
Привет, можешь подсказать как такой снипет сделать? А то вручную писать уже поднадоело. На импорт то есть, а вот на создание функуции с текущим названием файла не могу достать
@REDGroup
@REDGroup 2 жыл бұрын
Привет, установите расширение, там все готовые снипеты, у меня ролик был на канале про настройку vs code
@maximkutprot7374
@maximkutprot7374 2 жыл бұрын
Спасибо) как будто на скорости 2x просмотрел
@prototype1269
@prototype1269 2 жыл бұрын
Привет Максим! Спасибо за полезны видео.
@REDGroup
@REDGroup 2 жыл бұрын
Привет, спасибо!
@АнтонКравченко-в7п
@АнтонКравченко-в7п 2 жыл бұрын
Макс, ты на 28:27 заменил список с компонентами "todos" на data, но у тебя снизу стоит todos.map, откуда он берёт значения?
@REDGroup
@REDGroup 2 жыл бұрын
Из useState, я там указал data как значение по умолчанию
@user_ib_228
@user_ib_228 2 жыл бұрын
Я уже работал с более сложными задачами и даже выполнял тестовые задания, но мне все равно было очень интересно и полезно это смотреть. Я был очень удивлен, когда ты захотел набрать лишь 150 лайков, потому что во время просмотра сложилось ощущение, что у тебя должна быть прям большая аудитория. Хороший ролик, я подписался
@REDGroup
@REDGroup 2 жыл бұрын
Спасибо, буду стараться делать крутой контент
@АндрейМельниченко-ъ2щ
@АндрейМельниченко-ъ2щ 2 жыл бұрын
А еще есть вопрос по поводу менеджера пакетов. Посмотрел Ваше видео по сравнению yarn и npm, но решения не увидел. Очень сильно смущает, что для каждого проекта необходимо скачивать используемые пакеты в папку node_modules каждого проекта. Проекты маленькие, учебные. Не слишком удобно каждый раз качать минимум 300МБ для запуска проекта. Искал по интернету, решение данной проблемы. Пишут, что необходимо использовать yarn, вместо npm. Но так и не понял. Как следует устанавливать пакеты, чтобы они были доступны во вложенных проектах. Допустим, есть папка JavaScript. А в ней уже вложенные папки с проектами. Если устанавливать пакеты в папку верхнего уровня, как получить доступ к пакетам из вложенных папок?
@REDGroup
@REDGroup 2 жыл бұрын
Я думаю у Вас мало теории и нужно наверстать. В каждом проекте должна быть папка node_modules, туда будут скачиваться все библиотеки.
@neilhackgamer5941
@neilhackgamer5941 2 жыл бұрын
Опять Todo)
@REDGroup
@REDGroup 2 жыл бұрын
Подписчик попросил и тут именно попытался для новичков
@ВасяДомин-ъ8п
@ВасяДомин-ъ8п 2 жыл бұрын
Красавчик! Я внатуре понял
@rettweeerttu3971
@rettweeerttu3971 2 жыл бұрын
Спасибо огромное, очень полезно!
@melitopol_Russia
@melitopol_Russia 2 жыл бұрын
при платной подписке доступ к последующим проектам будет?
@REDGroup
@REDGroup 2 жыл бұрын
Да, конечно. В течении длительности подписки.
@ВарвараХодаковская-ж5т
@ВарвараХодаковская-ж5т Жыл бұрын
Спасибо большое!!!!!!!!!!!!!! Очень хорошо объясняете
@morelifetv1041
@morelifetv1041 2 жыл бұрын
Спасибо за видео
@STELLS541
@STELLS541 2 жыл бұрын
Немножко конечно быстро, но оч и оч круто, и информативно ))
@May-yw1kb
@May-yw1kb 2 жыл бұрын
Если кому интересно, тема у Макса "Night Wolf". Режим black
@REDGroup
@REDGroup 2 жыл бұрын
Благодарю 🙏
@karp2570
@karp2570 Жыл бұрын
Не думайте сдаваться - это самое простое😂
@sharkman6434
@sharkman6434 2 жыл бұрын
Макс ты шикарно объясняешь и не парься про то что ты типо не знаешь как объяснить про состояние , новичку придёться переварить и что такое состояние и пропсы и прочее и прочее базовое что он должен понимать как мы с тобой понимаем слово стол )) У тебя просто фарш идёт полезной инфы и правильной практики написания кода -- которую лично я вытягивал из самых разных роликов, то есть то что ты тут показываешь на изи и сразу кучей именно того что нужно --- чтоб научиться так писать надо посмотреть того этого там тут и так месяц два !! Подача быстрая точная чёткая ничего лишнего понятная чёткая дикция, спасибо тебе за видео и за твои труды ! Я рад что идёт новое поколение видео уроков от таких спецов как ты , пили дальше и не останавливайся лично я тебя рекомендую во всех группах в телеге, уверен скоро этот канал будет в топах так как такой подачи и фарша на русскоязычном ютубе почти нет !! Пили пожалуйста побольше на тайпскрипт так как уже нулей в школах сразу учат ему.
@REDGroup
@REDGroup 2 жыл бұрын
Все будет, спасибо!
@tiktoker428
@tiktoker428 2 жыл бұрын
тут у тебя какой браузер случайно не firefox
@REDGroup
@REDGroup 2 жыл бұрын
Brave
@frontendforyou202
@frontendforyou202 2 жыл бұрын
Отличное видео! Будет (или уже есть) видео о том, как стали программистом?
@REDGroup
@REDGroup 2 жыл бұрын
Частично было видео, но в будущем будет ещё
@АндрейМельниченко-ъ2щ
@АндрейМельниченко-ъ2щ 2 жыл бұрын
Добрый день! Повторяю код по уроку, но не применяется стиль tailwinds. Сравнивал, у меня нет файла postcss.config.js. все остальное также как и у вас
@REDGroup
@REDGroup 2 жыл бұрын
Добрый. Откройте официальную документацию и сделайте все по шагам
@АндрейМельниченко-ъ2щ
@АндрейМельниченко-ъ2щ 2 жыл бұрын
делаю все по инструкции с официального сайта. А есть возможность проверить, в чем может быть проблема? Возможно какой-то пакет не установлен.
@АндрейМельниченко-ъ2щ
@АндрейМельниченко-ъ2щ 2 жыл бұрын
разобрался, неправильно была указана конфигурация в файле tailwind.config.js не хватало расширения jsx
@ЕленаГерасименок-ш5ю
@ЕленаГерасименок-ш5ю 2 жыл бұрын
@@АндрейМельниченко-ъ2щ ["./src/**/*.{js, jsx, html, ts, tsx}"] у меня тоже не работает, так прописала и ничего
@ЕленаГерасименок-ш5ю
@ЕленаГерасименок-ш5ю 2 жыл бұрын
@@АндрейМельниченко-ъ2щ может подскажешь, ещё менял что-нибудь в tailwind-e?
@kostk1987
@kostk1987 2 жыл бұрын
Хороший контент.
@Ruslan6896
@Ruslan6896 2 жыл бұрын
А как сделать проверку input на пустоту, что бы только с текстом добавлялся список?
@REDGroup
@REDGroup 2 жыл бұрын
if(value)
@saint8283
@saint8283 2 жыл бұрын
А чем папка screens от pages отличается?
@REDGroup
@REDGroup 2 жыл бұрын
pages обязательная папка в next.js для роутинга. А screen это кастомная папка для удобства структуры
@saint8283
@saint8283 2 жыл бұрын
@@REDGroup Спасибо за оперативный ответ. Я next.js не ставил, но роутер и папку pages использую. Не знаю, дело ли в папке или в самом роутере, но я заметил что компоненты страниц нельзя переиспользовать в роутах, иначе они не перерисовываются. Может функционал этой папки в чем-то другом или она просто дефолтная, но ответ я получил. Screens это не про роутинг, а про структуру и ничем не особенная. Еще раз спасибо.
@lollipop6384
@lollipop6384 2 жыл бұрын
классно!
@anastasiagrigoryeva6971
@anastasiagrigoryeva6971 2 жыл бұрын
Продолжай снимать видео)))
@rettweeerttu3971
@rettweeerttu3971 2 жыл бұрын
Я бы хотел бы увидеть как реализуется плавный скролл на Реакт , кнопки наверх/вниз
@ИванЯценко-ш5ч
@ИванЯценко-ш5ч Жыл бұрын
Советую ставить на скорость 0.5. Тогда будет понятнее
@yana1347
@yana1347 10 ай бұрын
Очень быстро для новичков!
@forwarddenz2976
@forwarddenz2976 2 жыл бұрын
Сделай сайт в котором можно будет тренировать печать вслепую и на скорость на React !!!!!! Изи 155 так 155
@kostyafrompiter
@kostyafrompiter 2 жыл бұрын
хм. думаю такое приложение надо разбивать по роликам. Верстка как минимум один ролик, еще 2-3 ролика на логику.
@forwarddenz2976
@forwarddenz2976 2 жыл бұрын
@@kostyafrompiter да, но идея хорошая или нет? И практика и действительно хорошее приложение
@REDGroup
@REDGroup 2 жыл бұрын
Не популярная тема
@kostyafrompiter
@kostyafrompiter 2 жыл бұрын
Это пушка бро!!! Очень понятно! Давай теперь сделай декомпозицию, кастомные хуки. Добавь какой нибудь тулкит, чтобы хранить дела в store, добавь кнопку редактирования задачи и сделай кнопку добавления, одним enter сыт не будешь. вот и план на некст видео
@allyoinna
@allyoinna Жыл бұрын
Да и на native можно было бы переложить вместе с асинхронным хранилищем. Было бы вообще два в одном)))
@Sins-w4y
@Sins-w4y 9 ай бұрын
это пздц я просто в шоке я думал после js ничего не страшно
@shortstime6664
@shortstime6664 2 жыл бұрын
мешки под глазами жесткие, высыпайся бро
@REDGroup
@REDGroup 2 жыл бұрын
Сплю по 7-8 часов, со сном все в порядке
@7ZazmaZ7
@7ZazmaZ7 2 жыл бұрын
Здравствуйте, как ваши дела, здоровье? 🤓 а вы в тиктоке уже есть? 🤔🤓🤓
@REDGroup
@REDGroup 2 жыл бұрын
Привет! В Тиктоке есть. Дела огонь, работаю по трём фронтам сейчас ютуб, интенсивы и основная работа. Здоровье тоже хорошо. Спасибо что интересуешься!
@StepanamZ
@StepanamZ 2 жыл бұрын
Как начинающий делал точно так же , миллион ошибок ничего не понял почему но очень интересно
@-inside4478
@-inside4478 2 жыл бұрын
друг, спать иногда нужно!!! Береги здоровье с молоду...
@REDGroup
@REDGroup 2 жыл бұрын
Все хорошо, я сплю по 7-8 часов.
@-inside4478
@-inside4478 2 жыл бұрын
@@REDGroup просто вид уже уставший и не здоровый. Я переживаю за тебя. С точки зрения эффективно прожитой жизни, важно не только выполнять одну из самых важных целей - передавать информацию. Но и прожить самому долгую и здоровую жизнь. )) Ты молодец. Отдыхай побольше. А то видно даже после монтажа, что торопишься все время куда-то. На взводе будто.
@abdulholiq13
@abdulholiq13 8 ай бұрын
ti haroshiy chelovek brat
@REDGroup
@REDGroup 8 ай бұрын
Спасибо
@poleposition3344
@poleposition3344 Жыл бұрын
у меня одного не работает удаление?
@s1de638
@s1de638 Жыл бұрын
Всем, чтобы не мучались, подсказываю: В последнем button у TodoItem напишите такой код: { e.stopPropagation(); removeTodo(todo._id) }}> А потом вдумайтесь, сам долго не мог сообразить)
@neilhackgamer5941
@neilhackgamer5941 2 жыл бұрын
kzbin.info/www/bejne/l2KunqKBgtaNjZY - вроде было что такое)
@REDGroup
@REDGroup 2 жыл бұрын
Ну это другой формат, тогда я просто писал, а сейчас для новичков, много было запросов, сделать с максимально полольным разъяснением
@theoty-js
@theoty-js Жыл бұрын
red
@neilhackgamer5941
@neilhackgamer5941 2 жыл бұрын
Первый!
@webrubin
@webrubin 2 жыл бұрын
ERROR in ./node_modules/react-icons/all.js ошибка , какой то конфликт
@ibnkhaleed
@ibnkhaleed 2 жыл бұрын
НА МОЙ ЛИЧНЫЙ ВЗГЛЯД CRA не самый лучший выбор для разработки React приложений. Лучший - Vite. Очень быстрый и нет ничего лишнего
@REDGroup
@REDGroup 2 жыл бұрын
Недавно пощупал vite, реально быстрая штука. В будущих проектах буду использовать
React  - Курс по React для Начинающих
51:46
Bogdan Stashchuk
Рет қаралды 153 М.
Бенчик, пора купаться! 🛁 #бенчик #арти #симбочка
00:34
Симбочка Пимпочка
Рет қаралды 4 МЛН
HELP!!!
00:46
Natan por Aí
Рет қаралды 14 МЛН
Friends make memories together part 2  | Trà Đặng #short #bestfriend #bff #tiktok
00:18
Учимся использовать useMemo, useCallback и React.memo | подводные камни | JavaScript, React
37:25
Елена Литвинова — Искусство Веб-разработки 🛸
Рет қаралды 25 М.
Build this React To-Do List app in 20 minutes! ☝
22:35
Bro Code
Рет қаралды 64 М.
ChatGPT: от новичка до PRO за полчаса
38:21
DiazBarnz
Рет қаралды 333 М.
React и TypeScript - Быстрый Курс
1:40:52
Владилен Минин
Рет қаралды 353 М.
Пишем список задач на React (React Hooks)
18:37
Влад Калачев - JavaScript уроки
Рет қаралды 35 М.
Бенчик, пора купаться! 🛁 #бенчик #арти #симбочка
00:34
Симбочка Пимпочка
Рет қаралды 4 МЛН