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

[@REDGroup]

🔥 Оформить премиум подписку - 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]

Название темы редактора пж

[@flashback8504]

Все четко, все шикарно ОЧЕНЬ хочу чтобы такие видео были почаще, завтра скорее всего куплю у тебя интенсив по Реакту, потому что ты единственный, кто объясняет понятно быстро и самое главное без воды ,а что реально пригодится!

[@REDGroup]

Буду рад!

[@flashback8504]

@@REDGroup Седня куплю интенсив на 3 месяца

[@REDGroup]

👌

[@flashback8504]

@@REDGroup Ты лучший, спасибо за твои старания , ты заслуживаешь большего все хейтеры просто лесом идут 🔥🔥💪💪💪

[@mister_robot01]

Хотелось бы уроки по TS с реакт) Спасибо за ваш труд!

[@ДмитрийШагин-в3х]

Для тех кому все равно сложно понять, выпиваем 0.5 и включаем скорость 0.75

[@May-yw1kb]

Спасибо большое, Макс! Сказал - сделал.

[@nerofighter472]

Топ видос! Наверно контент для новичков всегда будет актуален))

[@unknown.6914]

крутое видео, спасибо Макс

[@REDGroup]

Пожалуйста, скоро кстати перезапустим эту рубрику, придумал более интересный формат

[@marynagaluza1707]

Я совсем начинающий реактщик, мне безумно зашло, это определённо подписка!)

[@kupolhub6991]

Привет Макс, хотелось бы посмотреть как сделать доску объявлений на React

[@Boro8ey]

Спасибо большое за урок! Объясняешь очень круто и понятно. Писал сразу на typescript т.к. посмотрел твоё видео и без него очень сложно будет в будущем. Попробую дополнить этот проект, сделать разные другие фичи: описание, markdown и т.д. Только есть одно но: в layout нужно добавить min-h-screen, чтобы при добавлении новых элементов фон не исчезал.

[@xPyc9x]

Спасибо за крутой контент

[@wladis1047]

Супер круто и информативно, спасибо что ты есть

[@webstack-frontend1697]

И правда куртой ролик💥

[@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]

Cпасибо за контент. Классная рубрика

[@evgenym.2137]

Круто, когда есть такие материалы для новичков 👍

[@danilkin1347]

однозначно лайк, можно больше контента по реакту начинающим?)

[@REDGroup]

Посмотрим, как зайдёт

[@danilkin1347]

@@REDGroup У меня вопрос по поводу вип чата, я купил подписку на 3 месяца, но не могу найти ссылку на вступление, можете пожалуйста подсказать где её найти?

[@REDGroup]

Рассылка идёт раз в 2 недели. Сегодня/завтра ожидайте приглашение на почте

[@РобертПлант-е8ъ]

Урок - огонь!!! Узнал много нового!!!

[@I248]

Вот ты крутой прогер и блогер. хорошо что можно смотреть без ускорения !)

[@REDGroup]

Рад слышать!

[@АнтонКравченко-в7п]

Просто красава

[@REDGroup]

Спасибо!

[@royce5867]

Здраствуйте 31:05 в моменте, у меня не отображается иконка check я ни как не смогла это исправить можете помочь с этим пожалуйста?

[@getrogetro7509]

Привет, можешь подсказать как такой снипет сделать? А то вручную писать уже поднадоело. На импорт то есть, а вот на создание функуции с текущим названием файла не могу достать

[@REDGroup]

Привет, установите расширение, там все готовые снипеты, у меня ролик был на канале про настройку vs code

[@maximkutprot7374]

Спасибо) как будто на скорости 2x просмотрел

[@prototype1269]

Привет Максим! Спасибо за полезны видео.

[@REDGroup]

Привет, спасибо!

[@АнтонКравченко-в7п]

Макс, ты на 28:27 заменил список с компонентами "todos" на data, но у тебя снизу стоит todos.map, откуда он берёт значения?

[@REDGroup]

Из useState, я там указал data как значение по умолчанию

[@user_ib_228]

Я уже работал с более сложными задачами и даже выполнял тестовые задания, но мне все равно было очень интересно и полезно это смотреть. Я был очень удивлен, когда ты захотел набрать лишь 150 лайков, потому что во время просмотра сложилось ощущение, что у тебя должна быть прям большая аудитория. Хороший ролик, я подписался

[@REDGroup]

Спасибо, буду стараться делать крутой контент

[@АндрейМельниченко-ъ2щ]

А еще есть вопрос по поводу менеджера пакетов. Посмотрел Ваше видео по сравнению yarn и npm, но решения не увидел. Очень сильно смущает, что для каждого проекта необходимо скачивать используемые пакеты в папку node_modules каждого проекта. Проекты маленькие, учебные. Не слишком удобно каждый раз качать минимум 300МБ для запуска проекта. Искал по интернету, решение данной проблемы. Пишут, что необходимо использовать yarn, вместо npm. Но так и не понял. Как следует устанавливать пакеты, чтобы они были доступны во вложенных проектах. Допустим, есть папка JavaScript. А в ней уже вложенные папки с проектами. Если устанавливать пакеты в папку верхнего уровня, как получить доступ к пакетам из вложенных папок?

[@REDGroup]

Я думаю у Вас мало теории и нужно наверстать. В каждом проекте должна быть папка node_modules, туда будут скачиваться все библиотеки.

[@neilhackgamer5941]

Опять Todo)

[@REDGroup]

Подписчик попросил и тут именно попытался для новичков

[@ВасяДомин-ъ8п]

Красавчик! Я внатуре понял

[@rettweeerttu3971]

Спасибо огромное, очень полезно!

[@melitopol_Russia]

при платной подписке доступ к последующим проектам будет?

[@REDGroup]

Да, конечно. В течении длительности подписки.

[@ВарвараХодаковская-ж5т]

Спасибо большое!!!!!!!!!!!!!! Очень хорошо объясняете

[@morelifetv1041]

Спасибо за видео

[@STELLS541]

Немножко конечно быстро, но оч и оч круто, и информативно ))

[@May-yw1kb]

Если кому интересно, тема у Макса "Night Wolf". Режим black

[@REDGroup]

Благодарю 🙏

[@karp2570]

Не думайте сдаваться - это самое простое😂

[@sharkman6434]

Макс ты шикарно объясняешь и не парься про то что ты типо не знаешь как объяснить про состояние , новичку придёться переварить и что такое состояние и пропсы и прочее и прочее базовое что он должен понимать как мы с тобой понимаем слово стол )) У тебя просто фарш идёт полезной инфы и правильной практики написания кода -- которую лично я вытягивал из самых разных роликов, то есть то что ты тут показываешь на изи и сразу кучей именно того что нужно --- чтоб научиться так писать надо посмотреть того этого там тут и так месяц два !! Подача быстрая точная чёткая ничего лишнего понятная чёткая дикция, спасибо тебе за видео и за твои труды ! Я рад что идёт новое поколение видео уроков от таких спецов как ты , пили дальше и не останавливайся лично я тебя рекомендую во всех группах в телеге, уверен скоро этот канал будет в топах так как такой подачи и фарша на русскоязычном ютубе почти нет !! Пили пожалуйста побольше на тайпскрипт так как уже нулей в школах сразу учат ему.

[@REDGroup]

Все будет, спасибо!

[@tiktoker428]

тут у тебя какой браузер случайно не firefox

[@REDGroup]

Brave

[@frontendforyou202]

Отличное видео! Будет (или уже есть) видео о том, как стали программистом?

[@REDGroup]

Частично было видео, но в будущем будет ещё

[@АндрейМельниченко-ъ2щ]

Добрый день! Повторяю код по уроку, но не применяется стиль tailwinds. Сравнивал, у меня нет файла postcss.config.js. все остальное также как и у вас

[@REDGroup]

Добрый. Откройте официальную документацию и сделайте все по шагам

[@АндрейМельниченко-ъ2щ]

делаю все по инструкции с официального сайта. А есть возможность проверить, в чем может быть проблема? Возможно какой-то пакет не установлен.

[@АндрейМельниченко-ъ2щ]

разобрался, неправильно была указана конфигурация в файле tailwind.config.js не хватало расширения jsx

[@ЕленаГерасименок-ш5ю]

@@АндрейМельниченко-ъ2щ ["./src/**/*.{js, jsx, html, ts, tsx}"] у меня тоже не работает, так прописала и ничего

[@ЕленаГерасименок-ш5ю]

@@АндрейМельниченко-ъ2щ может подскажешь, ещё менял что-нибудь в tailwind-e?

[@kostk1987]

Хороший контент.

[@Ruslan6896]

А как сделать проверку input на пустоту, что бы только с текстом добавлялся список?

[@REDGroup]

if(value)

[@saint8283]

А чем папка screens от pages отличается?

[@REDGroup]

pages обязательная папка в next.js для роутинга. А screen это кастомная папка для удобства структуры

[@saint8283]

@@REDGroup Спасибо за оперативный ответ. Я next.js не ставил, но роутер и папку pages использую. Не знаю, дело ли в папке или в самом роутере, но я заметил что компоненты страниц нельзя переиспользовать в роутах, иначе они не перерисовываются. Может функционал этой папки в чем-то другом или она просто дефолтная, но ответ я получил. Screens это не про роутинг, а про структуру и ничем не особенная. Еще раз спасибо.

[@lollipop6384]

классно!

[@anastasiagrigoryeva6971]

Продолжай снимать видео)))

[@rettweeerttu3971]

Я бы хотел бы увидеть как реализуется плавный скролл на Реакт , кнопки наверх/вниз

[@ИванЯценко-ш5ч]

Советую ставить на скорость 0.5. Тогда будет понятнее

[@yana1347]

Очень быстро для новичков!

[@forwarddenz2976]

Сделай сайт в котором можно будет тренировать печать вслепую и на скорость на React !!!!!! Изи 155 так 155

[@kostyafrompiter]

хм. думаю такое приложение надо разбивать по роликам. Верстка как минимум один ролик, еще 2-3 ролика на логику.

[@forwarddenz2976]

@@kostyafrompiter да, но идея хорошая или нет? И практика и действительно хорошее приложение

[@REDGroup]

Не популярная тема

[@kostyafrompiter]

Это пушка бро!!! Очень понятно! Давай теперь сделай декомпозицию, кастомные хуки. Добавь какой нибудь тулкит, чтобы хранить дела в store, добавь кнопку редактирования задачи и сделай кнопку добавления, одним enter сыт не будешь. вот и план на некст видео

[@allyoinna]

Да и на native можно было бы переложить вместе с асинхронным хранилищем. Было бы вообще два в одном)))

[@Sins-w4y]

это пздц я просто в шоке я думал после js ничего не страшно

[@shortstime6664]

мешки под глазами жесткие, высыпайся бро

[@REDGroup]

Сплю по 7-8 часов, со сном все в порядке

[@7ZazmaZ7]

Здравствуйте, как ваши дела, здоровье? 🤓 а вы в тиктоке уже есть? 🤔🤓🤓

[@REDGroup]

Привет! В Тиктоке есть. Дела огонь, работаю по трём фронтам сейчас ютуб, интенсивы и основная работа. Здоровье тоже хорошо. Спасибо что интересуешься!

[@StepanamZ]

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

[@-inside4478]

друг, спать иногда нужно!!! Береги здоровье с молоду...

[@REDGroup]

Все хорошо, я сплю по 7-8 часов.

[@-inside4478]

@@REDGroup просто вид уже уставший и не здоровый. Я переживаю за тебя. С точки зрения эффективно прожитой жизни, важно не только выполнять одну из самых важных целей - передавать информацию. Но и прожить самому долгую и здоровую жизнь. )) Ты молодец. Отдыхай побольше. А то видно даже после монтажа, что торопишься все время куда-то. На взводе будто.

[@abdulholiq13]

ti haroshiy chelovek brat

[@REDGroup]

Спасибо

[@poleposition3344]

у меня одного не работает удаление?

[@s1de638]

Всем, чтобы не мучались, подсказываю: В последнем button у TodoItem напишите такой код: { e.stopPropagation(); removeTodo(todo._id) }}> А потом вдумайтесь, сам долго не мог сообразить)

[@neilhackgamer5941]

kzbin.info/www/bejne/l2KunqKBgtaNjZY - вроде было что такое)

[@REDGroup]

Ну это другой формат, тогда я просто писал, а сейчас для новичков, много было запросов, сделать с максимально полольным разъяснением

[@theoty-js]

red

[@neilhackgamer5941]

Первый!

[@webrubin]

ERROR in ./node_modules/react-icons/all.js ошибка , какой то конфликт

[@ibnkhaleed]

НА МОЙ ЛИЧНЫЙ ВЗГЛЯД CRA не самый лучший выбор для разработки React приложений. Лучший - Vite. Очень быстрый и нет ничего лишнего

[@REDGroup]

Недавно пощупал vite, реально быстрая штука. В будущих проектах буду использовать