Todo приложение на React для самых маленьких // Твое первое приложение [React, JavaScript, Tailwind]
Вставка
- Опубліковано 29 чер 2024
- 🔥 Оформить премиум подписку - htmllessons.ru/premium?...
► Интенсив React с нуля (приложение для тренировок) - htmllessons.ru/int/show/3?utm...
В этом крутом ролике мы сделаем Todo приложение для самых маленьких (с подробными объяснениями)
Надеюсь Вы оцените мои старания, с Вас лайк и подписка. 🔥 155 лайков и я снимаю еще ролик для новичков (дается мне это супер сложно, не привык все объяснять)
Если есть какие то вопросы по этой теме - пиши в 💬 комментариях!
💰 Новый ролик для спонсоров доступен на Boosty boosty.to/redgroup или в нашей общей подписке (от 3 мес.) на сайте htmllessons.ru/premium
Скачать 🖥 исходник проекта в нашем хранилище - htmllessons.ru/repositories#s...
#React #ToDo #Junior #RedGroup
В этом не стандартном видео мы разработаем простое todo приложение (список дел) на React. Но с максимально подробным объяснением, я постараюсь рассказать про каждую функцию и переменную, которую будем использовать. Кроме React, Вы узнаете такие библиотеки как classnames для динамичного вывода классов, react icons для svg иконок, tailwindcss для быстрого написания стилей.
Тайм коды:
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 - Спасибо за просмотр!
► Интенсив Node.js + Express - Backend с нуля - htmllessons.ru/int/show/2?utm...
► Интенсив по верстке сайта с 0 - htmllessons.ru/int/show/1?utm...
👉 Смотрите видео ДО КОНЦА, подписывайтесь на канал, ставьте 👍 и колокольчик 🔔
► Оформить подписку на нашем сайте - htmllessons.ru/premium
► Эксклюзивный контент - boosty.to/redgroup
► Оформи спонсорство и получи уникальный значок и эмоджи - / @redgroup
► Хранилище (здесь все файлы к видео) *требуется авторизация - htmllessons.ru/storage
► Научим разрабатывать сайты - htmllessons.ru/
► Личный Instagram - / maxzbs
► Личный UA-cam - / @maxhustleinsilence
► Получи до 4000 руб. на первое бронирование через Airbnb - abnb.me/e/Mgl6khUuN3
► Если хочешь улучшить качество видео - htmllessons.ru/ext/donate
► Мой сетап VS Code - • Настройка Visual Stud...
Немного обо мне: меня зовут Максим, я уже 9 лет занимаюсь веб-разработкой. На данный момент являюсь основателем двух крутых проектов htmllessons.ru и еще одного глобального проекта. Первый, был моей дипломной работой в колледже. Как и все, начинал с изучения верстки html, css, js. Затем появилась потребность в изучении Laravel для разработки образовательного проекта. Затем я ушел от PHP и перешел на Javascript, так как появилась задача по разработке крупного проекта. Основная миссия - создавать крутые продукты, которые будут помогать людям и менять мир. Буду рад, если Вы меня поддержите и подпишитесь на мой канал. Спасибо 😊
![React для Новичков [2024] | с чего начать изучение React?](http://i.ytimg.com/vi/CGJp7PMBF1I/mqdefault.jpg)
![React для Новичков [2024] | с чего начать изучение React?](/img/tr.png)
![React Native для начинающих за 2 часа [2022] ! Мобильное приложение на JavaScript](http://i.ytimg.com/vi/K-aD8ClG1FQ/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 - Спасибо за просмотр!
Название темы редактора пж
Хотелось бы уроки по TS с реакт) Спасибо за ваш труд!
Спасибо большое, Макс! Сказал - сделал.
Урок - огонь!!! Узнал много нового!!!
Топ видос! Наверно контент для новичков всегда будет актуален))
Круто, когда есть такие материалы для новичков 👍
Cпасибо за контент. Классная рубрика
Супер круто и информативно, спасибо что ты есть
Спасибо большое за урок! Объясняешь очень круто и понятно. Писал сразу на typescript т.к. посмотрел твоё видео и без него очень сложно будет в будущем. Попробую дополнить этот проект, сделать разные другие фичи: описание, markdown и т.д. Только есть одно но: в layout нужно добавить min-h-screen, чтобы при добавлении новых элементов фон не исчезал.
И правда куртой ролик💥
Все четко, все шикарно ОЧЕНЬ хочу чтобы такие видео были почаще, завтра скорее всего куплю у тебя интенсив по Реакту, потому что ты единственный, кто объясняет понятно быстро и самое главное без воды ,а что реально пригодится!
Буду рад!
@@REDGroup Седня куплю интенсив на 3 месяца
👌
@@REDGroup Ты лучший, спасибо за твои старания , ты заслуживаешь большего все хейтеры просто лесом идут 🔥🔥💪💪💪
Спасибо огромное, очень полезно!
Привет Максим! Спасибо за полезны видео.
Привет, спасибо!
Спасибо за крутой контент
крутое видео, спасибо Макс
Пожалуйста, скоро кстати перезапустим эту рубрику, придумал более интересный формат
Привет Макс, хотелось бы посмотреть как сделать доску объявлений на React
Для тех кому все равно сложно понять, выпиваем 0.5 и включаем скорость 0.75
Спасибо большое!!!!!!!!!!!!!! Очень хорошо объясняете
Делал todo на JS и сохраняли в LocSt, теперь попробую по твоему уроку сделать на react. 👍 Если ещё будут уроки для новичков, то есть такая потребность в реализации проектов для спорта. Видел у тебя курс с индивидуальными тренировкам и подумываю взять чтобы пройти, так как главы там очень в тему. Но в большей степени есть интерес реализовать 1. это турнирная таблица на 4 команды (расписание игр, дата/время, стадион, судья) + ввод результатов (счёт, ФИ забил, ФИ ассистент, минута) + статистика (Бомбардиры, ассистенты) + разумеется админка, чтобы была возможность все эти данные вводить. 2. это ПРОГНОЗЫ - пользователи регистрируются (регистрацию и авторизацию хочу подглядеть из приложения для тренировок) + дальше добавляем матч (или упражнение), на который пользователь может оставить прогноз (П1 Н П2, указать точный счёт и ещё что-нибудь). Далее админ вводит результат матча и считается статистика по прогнозам всех пользователей и показывается кто сколько за что получил баллов и кто на каком месте. [Вот это всё хочется самому сделать, надеюсь на Reacte + mysql это вполне возможно]
// Отдельно напишу предложение, не сочти за наглость) Сейчас практикуюсь на мини-играх и придумал игру мне в тему спорта: N человекам задаётся по 10 вопросов типа чёрное или белое. Далее пользователь, который зарегистрировался может в своём ЛК узнать с кем у него больше сходства из этих N человек и отвечает на те же 10 вопросов. По итогу получается сообщение с тем, с кем больше совпадений: больше общего с N5.
>> Предложение: если запишешь урок с такой игрой на react, то готов купить курс: htmllessons.ru/int/show/3 на 3 месяца за 2990р., только подскажи реализована ли там возможность, чтобы админ видел всех пользователей, которые зарегистрированы и их прогресс по упражнениям, если нет, то насколько сложно это делается (буду готов научиться сделать его сам в дальнейшем).
Спасибо за видео на канале. Подписался и смотрю 👍
Спасибо за видео
Немножко конечно быстро, но оч и оч круто, и информативно ))
Красавчик! Я внатуре понял
Вот ты крутой прогер и блогер. хорошо что можно смотреть без ускорения !)
Рад слышать!
Продолжай снимать видео)))
Хороший контент.
классно!
Я совсем начинающий реактщик, мне безумно зашло, это определённо подписка!)
Спасибо) как будто на скорости 2x просмотрел
Опять Todo)
Подписчик попросил и тут именно попытался для новичков
Я уже работал с более сложными задачами и даже выполнял тестовые задания, но мне все равно было очень интересно и полезно это смотреть. Я был очень удивлен, когда ты захотел набрать лишь 150 лайков, потому что во время просмотра сложилось ощущение, что у тебя должна быть прям большая аудитория. Хороший ролик, я подписался
Спасибо, буду стараться делать крутой контент
Просто красава
Спасибо!
Отличное видео! Будет (или уже есть) видео о том, как стали программистом?
Частично было видео, но в будущем будет ещё
однозначно лайк, можно больше контента по реакту начинающим?)
Посмотрим, как зайдёт
@@REDGroup У меня вопрос по поводу вип чата, я купил подписку на 3 месяца, но не могу найти ссылку на вступление, можете пожалуйста подсказать где её найти?
Рассылка идёт раз в 2 недели. Сегодня/завтра ожидайте приглашение на почте
Макс ты шикарно объясняешь и не парься про то что ты типо не знаешь как объяснить про состояние , новичку придёться переварить и что такое состояние и пропсы и прочее и прочее базовое что он должен понимать как мы с тобой понимаем слово стол )) У тебя просто фарш идёт полезной инфы и правильной практики написания кода -- которую лично я вытягивал из самых разных роликов, то есть то что ты тут показываешь на изи и сразу кучей именно того что нужно --- чтоб научиться так писать надо посмотреть того этого там тут и так месяц два !! Подача быстрая точная чёткая ничего лишнего понятная чёткая дикция, спасибо тебе за видео и за твои труды ! Я рад что идёт новое поколение видео уроков от таких спецов как ты , пили дальше и не останавливайся лично я тебя рекомендую во всех группах в телеге, уверен скоро этот канал будет в топах так как такой подачи и фарша на русскоязычном ютубе почти нет !!
Пили пожалуйста побольше на тайпскрипт так как уже нулей в школах сразу учат ему.
Все будет, спасибо!
Не думайте сдаваться - это самое простое😂
Я бы хотел бы увидеть как реализуется плавный скролл на Реакт , кнопки наверх/вниз
Это пушка бро!!! Очень понятно! Давай теперь сделай декомпозицию, кастомные хуки. Добавь какой нибудь тулкит, чтобы хранить дела в store, добавь кнопку редактирования задачи и сделай кнопку добавления, одним enter сыт не будешь. вот и план на некст видео
Да и на native можно было бы переложить вместе с асинхронным хранилищем. Было бы вообще два в одном)))
Очень быстро для новичков!
Как начинающий делал точно так же , миллион ошибок ничего не понял почему но очень интересно
Первый!
Макс, ты на 28:27 заменил список с компонентами "todos" на data, но у тебя снизу стоит todos.map, откуда он берёт значения?
Из useState, я там указал data как значение по умолчанию
Если кому интересно, тема у Макса "Night Wolf". Режим black
Благодарю 🙏
Здраствуйте 31:05 в моменте, у меня не отображается иконка check я ни как не смогла это исправить можете помочь с этим пожалуйста?
это пздц я просто в шоке я думал после js ничего не страшно
ti haroshiy chelovek brat
Спасибо
Советую ставить на скорость 0.5.
Тогда будет понятнее
Привет, можешь подсказать как такой снипет сделать? А то вручную писать уже поднадоело. На импорт то есть, а вот на создание функуции с текущим названием файла не могу достать
Привет, установите расширение, там все готовые снипеты, у меня ролик был на канале про настройку vs code
А еще есть вопрос по поводу менеджера пакетов. Посмотрел Ваше видео по сравнению yarn и npm, но решения не увидел. Очень сильно смущает, что для каждого проекта необходимо скачивать используемые пакеты в папку node_modules каждого проекта. Проекты маленькие, учебные. Не слишком удобно каждый раз качать минимум 300МБ для запуска проекта. Искал по интернету, решение данной проблемы. Пишут, что необходимо использовать yarn, вместо npm. Но так и не понял. Как следует устанавливать пакеты, чтобы они были доступны во вложенных проектах. Допустим, есть папка JavaScript. А в ней уже вложенные папки с проектами. Если устанавливать пакеты в папку верхнего уровня, как получить доступ к пакетам из вложенных папок?
Я думаю у Вас мало теории и нужно наверстать. В каждом проекте должна быть папка node_modules, туда будут скачиваться все библиотеки.
Сделай сайт в котором можно будет тренировать печать вслепую и на скорость на React !!!!!!
Изи 155 так 155
хм. думаю такое приложение надо разбивать по роликам. Верстка как минимум один ролик, еще 2-3 ролика на логику.
@@kostyafrompiter да, но идея хорошая или нет?
И практика и действительно хорошее приложение
Не популярная тема
А как сделать проверку input на пустоту, что бы только с текстом добавлялся список?
if(value)
при платной подписке доступ к последующим проектам будет?
Да, конечно. В течении длительности подписки.
мешки под глазами жесткие, высыпайся бро
Сплю по 7-8 часов, со сном все в порядке
Добрый день! Повторяю код по уроку, но не применяется стиль tailwinds. Сравнивал, у меня нет файла postcss.config.js. все остальное также как и у вас
Добрый. Откройте официальную документацию и сделайте все по шагам
делаю все по инструкции с официального сайта. А есть возможность проверить, в чем может быть проблема? Возможно какой-то пакет не установлен.
разобрался, неправильно была указана конфигурация в файле tailwind.config.js не хватало расширения jsx
@@user-wf7bn6ch2l ["./src/**/*.{js, jsx, html, ts, tsx}"] у меня тоже не работает, так прописала и ничего
@@user-wf7bn6ch2l может подскажешь, ещё менял что-нибудь в tailwind-e?
друг, спать иногда нужно!!! Береги здоровье с молоду...
Все хорошо, я сплю по 7-8 часов.
@@REDGroup просто вид уже уставший и не здоровый. Я переживаю за тебя. С точки зрения эффективно прожитой жизни, важно не только выполнять одну из самых важных целей - передавать информацию. Но и прожить самому долгую и здоровую жизнь. ))
Ты молодец. Отдыхай побольше. А то видно даже после монтажа, что торопишься все время куда-то. На взводе будто.
А чем папка screens от pages отличается?
pages обязательная папка в next.js для роутинга. А screen это кастомная папка для удобства структуры
@@REDGroup Спасибо за оперативный ответ. Я next.js не ставил, но роутер и папку pages использую. Не знаю, дело ли в папке или в самом роутере, но я заметил что компоненты страниц нельзя переиспользовать в роутах, иначе они не перерисовываются. Может функционал этой папки в чем-то другом или она просто дефолтная, но ответ я получил. Screens это не про роутинг, а про структуру и ничем не особенная. Еще раз спасибо.
тут у тебя какой браузер случайно не firefox
Brave
Здравствуйте, как ваши дела, здоровье? 🤓 а вы в тиктоке уже есть? 🤔🤓🤓
Привет! В Тиктоке есть. Дела огонь, работаю по трём фронтам сейчас ютуб, интенсивы и основная работа. Здоровье тоже хорошо. Спасибо что интересуешься!
red
ua-cam.com/video/a1KmoKMqZW4/v-deo.html - вроде было что такое)
Ну это другой формат, тогда я просто писал, а сейчас для новичков, много было запросов, сделать с максимально полольным разъяснением
у меня одного не работает удаление?
Всем, чтобы не мучались, подсказываю:
В последнем button у TodoItem напишите такой код:
{ e.stopPropagation(); removeTodo(todo._id) }}>
А потом вдумайтесь, сам долго не мог сообразить)
ERROR in ./node_modules/react-icons/all.js ошибка , какой то конфликт
НА МОЙ ЛИЧНЫЙ ВЗГЛЯД CRA не самый лучший выбор для разработки React приложений. Лучший - Vite. Очень быстрый и нет ничего лишнего
Недавно пощупал vite, реально быстрая штука. В будущих проектах буду использовать