🔥 Оформить премиум подписку - 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 - Спасибо за просмотр!
Все четко, все шикарно ОЧЕНЬ хочу чтобы такие видео были почаще, завтра скорее всего куплю у тебя интенсив по Реакту, потому что ты единственный, кто объясняет понятно быстро и самое главное без воды ,а что реально пригодится!
@@REDGroup У меня вопрос по поводу вип чата, я купил подписку на 3 месяца, но не могу найти ссылку на вступление, можете пожалуйста подсказать где её найти?
Спасибо большое за урок! Объясняешь очень круто и понятно. Писал сразу на typescript т.к. посмотрел твоё видео и без него очень сложно будет в будущем. Попробую дополнить этот проект, сделать разные другие фичи: описание, markdown и т.д. Только есть одно но: в layout нужно добавить min-h-screen, чтобы при добавлении новых элементов фон не исчезал.
Делал todo на JS и сохраняли в LocSt, теперь попробую по твоему уроку сделать на react. 👍 Если ещё будут уроки для новичков, то есть такая потребность в реализации проектов для спорта. Видел у тебя курс с индивидуальными тренировкам и подумываю взять чтобы пройти, так как главы там очень в тему. Но в большей степени есть интерес реализовать 1. это турнирная таблица на 4 команды (расписание игр, дата/время, стадион, судья) + ввод результатов (счёт, ФИ забил, ФИ ассистент, минута) + статистика (Бомбардиры, ассистенты) + разумеется админка, чтобы была возможность все эти данные вводить. 2. это ПРОГНОЗЫ - пользователи регистрируются (регистрацию и авторизацию хочу подглядеть из приложения для тренировок) + дальше добавляем матч (или упражнение), на который пользователь может оставить прогноз (П1 Н П2, указать точный счёт и ещё что-нибудь). Далее админ вводит результат матча и считается статистика по прогнозам всех пользователей и показывается кто сколько за что получил баллов и кто на каком месте. [Вот это всё хочется самому сделать, надеюсь на Reacte + mysql это вполне возможно] // Отдельно напишу предложение, не сочти за наглость) Сейчас практикуюсь на мини-играх и придумал игру мне в тему спорта: N человекам задаётся по 10 вопросов типа чёрное или белое. Далее пользователь, который зарегистрировался может в своём ЛК узнать с кем у него больше сходства из этих N человек и отвечает на те же 10 вопросов. По итогу получается сообщение с тем, с кем больше совпадений: больше общего с N5. >> Предложение: если запишешь урок с такой игрой на react, то готов купить курс: htmllessons.ru/int/show/3 на 3 месяца за 2990р., только подскажи реализована ли там возможность, чтобы админ видел всех пользователей, которые зарегистрированы и их прогресс по упражнениям, если нет, то насколько сложно это делается (буду готов научиться сделать его сам в дальнейшем). Спасибо за видео на канале. Подписался и смотрю 👍
Я уже работал с более сложными задачами и даже выполнял тестовые задания, но мне все равно было очень интересно и полезно это смотреть. Я был очень удивлен, когда ты захотел набрать лишь 150 лайков, потому что во время просмотра сложилось ощущение, что у тебя должна быть прям большая аудитория. Хороший ролик, я подписался
@@REDGroup просто вид уже уставший и не здоровый. Я переживаю за тебя. С точки зрения эффективно прожитой жизни, важно не только выполнять одну из самых важных целей - передавать информацию. Но и прожить самому долгую и здоровую жизнь. )) Ты молодец. Отдыхай побольше. А то видно даже после монтажа, что торопишься все время куда-то. На взводе будто.
Привет, можешь подсказать как такой снипет сделать? А то вручную писать уже поднадоело. На импорт то есть, а вот на создание функуции с текущим названием файла не могу достать
Макс ты шикарно объясняешь и не парься про то что ты типо не знаешь как объяснить про состояние , новичку придёться переварить и что такое состояние и пропсы и прочее и прочее базовое что он должен понимать как мы с тобой понимаем слово стол )) У тебя просто фарш идёт полезной инфы и правильной практики написания кода -- которую лично я вытягивал из самых разных роликов, то есть то что ты тут показываешь на изи и сразу кучей именно того что нужно --- чтоб научиться так писать надо посмотреть того этого там тут и так месяц два !! Подача быстрая точная чёткая ничего лишнего понятная чёткая дикция, спасибо тебе за видео и за твои труды ! Я рад что идёт новое поколение видео уроков от таких спецов как ты , пили дальше и не останавливайся лично я тебя рекомендую во всех группах в телеге, уверен скоро этот канал будет в топах так как такой подачи и фарша на русскоязычном ютубе почти нет !! Пили пожалуйста побольше на тайпскрипт так как уже нулей в школах сразу учат ему.
А еще есть вопрос по поводу менеджера пакетов. Посмотрел Ваше видео по сравнению yarn и npm, но решения не увидел. Очень сильно смущает, что для каждого проекта необходимо скачивать используемые пакеты в папку node_modules каждого проекта. Проекты маленькие, учебные. Не слишком удобно каждый раз качать минимум 300МБ для запуска проекта. Искал по интернету, решение данной проблемы. Пишут, что необходимо использовать yarn, вместо npm. Но так и не понял. Как следует устанавливать пакеты, чтобы они были доступны во вложенных проектах. Допустим, есть папка JavaScript. А в ней уже вложенные папки с проектами. Если устанавливать пакеты в папку верхнего уровня, как получить доступ к пакетам из вложенных папок?
Это пушка бро!!! Очень понятно! Давай теперь сделай декомпозицию, кастомные хуки. Добавь какой нибудь тулкит, чтобы хранить дела в store, добавь кнопку редактирования задачи и сделай кнопку добавления, одним enter сыт не будешь. вот и план на некст видео
@@REDGroup Спасибо за оперативный ответ. Я next.js не ставил, но роутер и папку pages использую. Не знаю, дело ли в папке или в самом роутере, но я заметил что компоненты страниц нельзя переиспользовать в роутах, иначе они не перерисовываются. Может функционал этой папки в чем-то другом или она просто дефолтная, но ответ я получил. Screens это не про роутинг, а про структуру и ничем не особенная. Еще раз спасибо.
Всем, чтобы не мучались, подсказываю: В последнем button у TodoItem напишите такой код: { e.stopPropagation(); removeTodo(todo._id) }}> А потом вдумайтесь, сам долго не мог сообразить)
![React JS c Нуля - Курс для начинающих БЕЗ ВОДЫ [2024]](http://i.ytimg.com/vi/kz23xxukY5s/mqdefault.jpg)
![React JS c Нуля - Курс для начинающих БЕЗ ВОДЫ [2024]](/img/tr.png)
![Quando Rondo - Grow Up [Official Music Video]](http://i.ytimg.com/vi/8zFnCg3BO4Q/mqdefault.jpg)
🔥 Оформить премиум подписку - 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 - Спасибо за просмотр!
Название темы редактора пж
Для тех кому все равно сложно понять, выпиваем 0.5 и включаем скорость 0.75
Хотелось бы уроки по TS с реакт) Спасибо за ваш труд!
Привет Макс, хотелось бы посмотреть как сделать доску объявлений на React
Я совсем начинающий реактщик, мне безумно зашло, это определённо подписка!)
Топ видос! Наверно контент для новичков всегда будет актуален))
Спасибо большое, Макс! Сказал - сделал.
Все четко, все шикарно ОЧЕНЬ хочу чтобы такие видео были почаще, завтра скорее всего куплю у тебя интенсив по Реакту, потому что ты единственный, кто объясняет понятно быстро и самое главное без воды ,а что реально пригодится!
Буду рад!
@@REDGroup Седня куплю интенсив на 3 месяца
👌
@@REDGroup Ты лучший, спасибо за твои старания , ты заслуживаешь большего все хейтеры просто лесом идут 🔥🔥💪💪💪
Спасибо) как будто на скорости 2x просмотрел
однозначно лайк, можно больше контента по реакту начинающим?)
Посмотрим, как зайдёт
@@REDGroup У меня вопрос по поводу вип чата, я купил подписку на 3 месяца, но не могу найти ссылку на вступление, можете пожалуйста подсказать где её найти?
Рассылка идёт раз в 2 недели. Сегодня/завтра ожидайте приглашение на почте
Спасибо за крутой контент
Круто, когда есть такие материалы для новичков 👍
Спасибо большое за урок! Объясняешь очень круто и понятно. Писал сразу на typescript т.к. посмотрел твоё видео и без него очень сложно будет в будущем. Попробую дополнить этот проект, сделать разные другие фичи: описание, markdown и т.д. Только есть одно но: в layout нужно добавить min-h-screen, чтобы при добавлении новых элементов фон не исчезал.
крутое видео, спасибо Макс
Пожалуйста, скоро кстати перезапустим эту рубрику, придумал более интересный формат
Супер круто и информативно, спасибо что ты есть
Вот ты крутой прогер и блогер. хорошо что можно смотреть без ускорения !)
Рад слышать!
Cпасибо за контент. Классная рубрика
Делал todo на JS и сохраняли в LocSt, теперь попробую по твоему уроку сделать на react. 👍 Если ещё будут уроки для новичков, то есть такая потребность в реализации проектов для спорта. Видел у тебя курс с индивидуальными тренировкам и подумываю взять чтобы пройти, так как главы там очень в тему. Но в большей степени есть интерес реализовать 1. это турнирная таблица на 4 команды (расписание игр, дата/время, стадион, судья) + ввод результатов (счёт, ФИ забил, ФИ ассистент, минута) + статистика (Бомбардиры, ассистенты) + разумеется админка, чтобы была возможность все эти данные вводить. 2. это ПРОГНОЗЫ - пользователи регистрируются (регистрацию и авторизацию хочу подглядеть из приложения для тренировок) + дальше добавляем матч (или упражнение), на который пользователь может оставить прогноз (П1 Н П2, указать точный счёт и ещё что-нибудь). Далее админ вводит результат матча и считается статистика по прогнозам всех пользователей и показывается кто сколько за что получил баллов и кто на каком месте. [Вот это всё хочется самому сделать, надеюсь на Reacte + mysql это вполне возможно]
// Отдельно напишу предложение, не сочти за наглость) Сейчас практикуюсь на мини-играх и придумал игру мне в тему спорта: N человекам задаётся по 10 вопросов типа чёрное или белое. Далее пользователь, который зарегистрировался может в своём ЛК узнать с кем у него больше сходства из этих N человек и отвечает на те же 10 вопросов. По итогу получается сообщение с тем, с кем больше совпадений: больше общего с N5.
>> Предложение: если запишешь урок с такой игрой на react, то готов купить курс: htmllessons.ru/int/show/3 на 3 месяца за 2990р., только подскажи реализована ли там возможность, чтобы админ видел всех пользователей, которые зарегистрированы и их прогресс по упражнениям, если нет, то насколько сложно это делается (буду готов научиться сделать его сам в дальнейшем).
Спасибо за видео на канале. Подписался и смотрю 👍
Урок - огонь!!! Узнал много нового!!!
Опять Todo)
Подписчик попросил и тут именно попытался для новичков
И правда куртой ролик💥
Просто красава
Спасибо!
Очень быстро для новичков!
Красавчик! Я внатуре понял
Привет Максим! Спасибо за полезны видео.
Привет, спасибо!
Спасибо за видео
Немножко конечно быстро, но оч и оч круто, и информативно ))
Спасибо большое!!!!!!!!!!!!!! Очень хорошо объясняете
Если кому интересно, тема у Макса "Night Wolf". Режим black
Благодарю 🙏
Спасибо огромное, очень полезно!
Я уже работал с более сложными задачами и даже выполнял тестовые задания, но мне все равно было очень интересно и полезно это смотреть. Я был очень удивлен, когда ты захотел набрать лишь 150 лайков, потому что во время просмотра сложилось ощущение, что у тебя должна быть прям большая аудитория. Хороший ролик, я подписался
Спасибо, буду стараться делать крутой контент
Не думайте сдаваться - это самое простое😂
Продолжай снимать видео)))
Отличное видео! Будет (или уже есть) видео о том, как стали программистом?
Частично было видео, но в будущем будет ещё
Сделай сайт в котором можно будет тренировать печать вслепую и на скорость на React !!!!!!
Изи 155 так 155
хм. думаю такое приложение надо разбивать по роликам. Верстка как минимум один ролик, еще 2-3 ролика на логику.
@@kostyafrompiter да, но идея хорошая или нет?
И практика и действительно хорошее приложение
Не популярная тема
Я бы хотел бы увидеть как реализуется плавный скролл на Реакт , кнопки наверх/вниз
Советую ставить на скорость 0.5.
Тогда будет понятнее
Как начинающий делал точно так же , миллион ошибок ничего не понял почему но очень интересно
Хороший контент.
ti haroshiy chelovek brat
Спасибо
классно!
это пздц я просто в шоке я думал после js ничего не страшно
друг, спать иногда нужно!!! Береги здоровье с молоду...
Все хорошо, я сплю по 7-8 часов.
@@REDGroup просто вид уже уставший и не здоровый. Я переживаю за тебя. С точки зрения эффективно прожитой жизни, важно не только выполнять одну из самых важных целей - передавать информацию. Но и прожить самому долгую и здоровую жизнь. ))
Ты молодец. Отдыхай побольше. А то видно даже после монтажа, что торопишься все время куда-то. На взводе будто.
Макс, ты на 28:27 заменил список с компонентами "todos" на data, но у тебя снизу стоит todos.map, откуда он берёт значения?
Из useState, я там указал data как значение по умолчанию
при платной подписке доступ к последующим проектам будет?
Да, конечно. В течении длительности подписки.
Привет, можешь подсказать как такой снипет сделать? А то вручную писать уже поднадоело. На импорт то есть, а вот на создание функуции с текущим названием файла не могу достать
Привет, установите расширение, там все готовые снипеты, у меня ролик был на канале про настройку vs code
Макс ты шикарно объясняешь и не парься про то что ты типо не знаешь как объяснить про состояние , новичку придёться переварить и что такое состояние и пропсы и прочее и прочее базовое что он должен понимать как мы с тобой понимаем слово стол )) У тебя просто фарш идёт полезной инфы и правильной практики написания кода -- которую лично я вытягивал из самых разных роликов, то есть то что ты тут показываешь на изи и сразу кучей именно того что нужно --- чтоб научиться так писать надо посмотреть того этого там тут и так месяц два !! Подача быстрая точная чёткая ничего лишнего понятная чёткая дикция, спасибо тебе за видео и за твои труды ! Я рад что идёт новое поколение видео уроков от таких спецов как ты , пили дальше и не останавливайся лично я тебя рекомендую во всех группах в телеге, уверен скоро этот канал будет в топах так как такой подачи и фарша на русскоязычном ютубе почти нет !!
Пили пожалуйста побольше на тайпскрипт так как уже нулей в школах сразу учат ему.
Все будет, спасибо!
А еще есть вопрос по поводу менеджера пакетов. Посмотрел Ваше видео по сравнению yarn и npm, но решения не увидел. Очень сильно смущает, что для каждого проекта необходимо скачивать используемые пакеты в папку node_modules каждого проекта. Проекты маленькие, учебные. Не слишком удобно каждый раз качать минимум 300МБ для запуска проекта. Искал по интернету, решение данной проблемы. Пишут, что необходимо использовать yarn, вместо npm. Но так и не понял. Как следует устанавливать пакеты, чтобы они были доступны во вложенных проектах. Допустим, есть папка JavaScript. А в ней уже вложенные папки с проектами. Если устанавливать пакеты в папку верхнего уровня, как получить доступ к пакетам из вложенных папок?
Я думаю у Вас мало теории и нужно наверстать. В каждом проекте должна быть папка node_modules, туда будут скачиваться все библиотеки.
Здраствуйте 31:05 в моменте, у меня не отображается иконка check я ни как не смогла это исправить можете помочь с этим пожалуйста?
мешки под глазами жесткие, высыпайся бро
Сплю по 7-8 часов, со сном все в порядке
тут у тебя какой браузер случайно не firefox
Brave
А как сделать проверку input на пустоту, что бы только с текстом добавлялся список?
if(value)
Здравствуйте, как ваши дела, здоровье? 🤓 а вы в тиктоке уже есть? 🤔🤓🤓
Привет! В Тиктоке есть. Дела огонь, работаю по трём фронтам сейчас ютуб, интенсивы и основная работа. Здоровье тоже хорошо. Спасибо что интересуешься!
Это пушка бро!!! Очень понятно! Давай теперь сделай декомпозицию, кастомные хуки. Добавь какой нибудь тулкит, чтобы хранить дела в store, добавь кнопку редактирования задачи и сделай кнопку добавления, одним enter сыт не будешь. вот и план на некст видео
Да и на native можно было бы переложить вместе с асинхронным хранилищем. Было бы вообще два в одном)))
А чем папка screens от pages отличается?
pages обязательная папка в next.js для роутинга. А screen это кастомная папка для удобства структуры
@@REDGroup Спасибо за оперативный ответ. Я next.js не ставил, но роутер и папку pages использую. Не знаю, дело ли в папке или в самом роутере, но я заметил что компоненты страниц нельзя переиспользовать в роутах, иначе они не перерисовываются. Может функционал этой папки в чем-то другом или она просто дефолтная, но ответ я получил. Screens это не про роутинг, а про структуру и ничем не особенная. Еще раз спасибо.
Добрый день! Повторяю код по уроку, но не применяется стиль tailwinds. Сравнивал, у меня нет файла postcss.config.js. все остальное также как и у вас
Добрый. Откройте официальную документацию и сделайте все по шагам
делаю все по инструкции с официального сайта. А есть возможность проверить, в чем может быть проблема? Возможно какой-то пакет не установлен.
разобрался, неправильно была указана конфигурация в файле tailwind.config.js не хватало расширения jsx
@@АндрейМельниченко-ъ2щ ["./src/**/*.{js, jsx, html, ts, tsx}"] у меня тоже не работает, так прописала и ничего
@@АндрейМельниченко-ъ2щ может подскажешь, ещё менял что-нибудь в tailwind-e?
у меня одного не работает удаление?
Всем, чтобы не мучались, подсказываю:
В последнем button у TodoItem напишите такой код:
{ e.stopPropagation(); removeTodo(todo._id) }}>
А потом вдумайтесь, сам долго не мог сообразить)
ruclips.net/video/a1KmoKMqZW4/видео.html - вроде было что такое)
Ну это другой формат, тогда я просто писал, а сейчас для новичков, много было запросов, сделать с максимально полольным разъяснением
Первый!
red
НА МОЙ ЛИЧНЫЙ ВЗГЛЯД CRA не самый лучший выбор для разработки React приложений. Лучший - Vite. Очень быстрый и нет ничего лишнего
Недавно пощупал vite, реально быстрая штука. В будущих проектах буду использовать
ERROR in ./node_modules/react-icons/all.js ошибка , какой то конфликт