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

🔥 Оформить премиум подписку - https://htmllessons.ru/premium?utm_so...
► Интенсив React с нуля (приложение для тренировок) - https://htmllessons.ru/int/show/3?utm...

В этом крутом ролике мы сделаем Todo приложение для самых маленьких (с подробными объяснениями)

Надеюсь Вы оцените мои старания, с Вас лайк и подписка. 🔥 155 лайков и я снимаю еще ролик для новичков (дается мне это супер сложно, не привык все объяснять)

Если есть какие то вопросы по этой теме - пиши в 💬 комментариях!

💰 Новый ролик для спонсоров доступен на Boosty https://boosty.to/redgroup или в нашей общей подписке (от 3 мес.) на сайте https://htmllessons.ru/premium

Скачать 🖥 исходник проекта в нашем хранилище - https://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 с нуля - https://htmllessons.ru/int/show/2?utm...
► Интенсив по верстке сайта с 0 - https://htmllessons.ru/int/show/1?utm...

👉 Смотрите видео ДО КОНЦА, подписывайтесь на канал, ставьте 👍 и колокольчик 🔔

► Оформить подписку на нашем сайте - https://htmllessons.ru/premium
► Эксклюзивный контент - https://boosty.to/redgroup
► Оформи спонсорство и получи уникальный значок и эмоджи -    / @redgroup  

► Хранилище (здесь все файлы к видео) *требуется авторизация - https://htmllessons.ru/storage
► Научим разрабатывать сайты - https://htmllessons.ru/
► Личный Instagram -   / maxzbs  
► Личный Youtube -    / @maxhustleinsilence  

► Получи до 4000 руб. на первое бронирование через Airbnb - https://abnb.me/e/Mgl6khUuN3
► Если хочешь улучшить качество видео - https://htmllessons.ru/ext/donate

► Мой сетап VS Code -    • Настройка Visual Studio Code для разработ...  

Немного обо мне: меня зовут Максим, я уже 9 лет занимаюсь веб-разработкой. На данный момент являюсь основателем двух крутых проектов htmllessons.ru и еще одного глобального проекта. Первый, был моей дипломной работой в колледже. Как и все, начинал с изучения верстки html, css, js. Затем появилась потребность в изучении Laravel для разработки образовательного проекта. Затем я ушел от PHP и перешел на Javascript, так как появилась задача по разработке крупного проекта. Основная миссия – создавать крутые продукты, которые будут помогать людям и менять мир. Буду рад, если Вы меня поддержите и подпишитесь на мой канал. Спасибо 😊