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