Todo приложение на React для самых маленьких // Твое первое приложение [React, JavaScript, Tailwind]
🔥 Оформить премиум подписку - https://htmllessons.ru/premium?utm_source=youtube&utm_medium=red-group&utm_campaign=description&utm_content=todo-for-children
► Интенсив React с нуля (приложение для тренировок) - https://htmllessons.ru/int/show/3?utm_source=youtube&utm_medium=red-group&utm_campaign=description&utm_content=todo-for-children
В этом крутом ролике мы сделаем Todo приложение для самых маленьких (с подробными объяснениями)
Надеюсь Вы оцените мои старания, с Вас лайк и подписка. 🔥 155 лайков и я снимаю еще ролик для новичков (дается мне это супер сложно, не привык все объяснять)
Если есть какие то вопросы по этой теме - пиши в 💬 комментариях!
💰 Новый ролик для спонсоров доступен на Boosty https://boosty.to/redgroup или в нашей общей подписке (от 3 мес.) на сайте https://htmllessons.ru/premium
Скачать 🖥 исходник проекта в нашем хранилище - https://htmllessons.ru/storage#storage_file_36
#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_source=youtube&utm_medium=red-group&utm_campaign=description&utm_content=todo-for-children
► Интенсив по верстке сайта с 0 - https://htmllessons.ru/int/show/1?utm_source=youtube&utm_medium=red-group&utm_campaign=description&utm_content=todo-for-children
👉 Смотрите видео ДО КОНЦА, подписывайтесь на канал, ставьте 👍 и колокольчик 🔔
► Оформить подписку на нашем сайте - https://htmllessons.ru/premium
► Эксклюзивный контент - https://boosty.to/redgroup
► Оформи спонсорство и получи уникальный значок и эмоджи - https://www.youtube.com/channel/UCdpPBwKPriPIP2eyP9a1C6g/join
► Хранилище (здесь все файлы к видео) *требуется авторизация - https://htmllessons.ru/storage
► Научим разрабатывать сайты - https://htmllessons.ru/
► Личный Instagram - https://www.instagram.com/maxzbs/
► Личный Youtube - https://www.youtube.com/channel/UChXs79MvR8NjOumyxY3ayjw
► Получи до 4000 руб. на первое бронирование через Airbnb - https://abnb.me/e/Mgl6khUuN3
► Если хочешь улучшить качество видео - https://htmllessons.ru/ext/donate
► Мой сетап VS Code - https://youtu.be/_jquc4KJ4IU
Немного обо мне: меня зовут Максим, я уже 9 лет занимаюсь веб-разработкой. На данный момент являюсь основателем двух крутых проектов htmllessons.ru и еще одного глобального проекта. Первый, был моей дипломной работой в колледже. Как и все, начинал с изучения верстки html, css, js. Затем появилась потребность в изучении Laravel для разработки образовательного проекта. Затем я ушел от PHP и перешел на Javascript, так как появилась задача по разработке крупного проекта. Основная миссия – создавать крутые продукты, которые будут помогать людям и менять мир. Буду рад, если Вы меня поддержите и подпишитесь на мой канал. Спасибо 😊
Видео Todo приложение на React для самых маленьких // Твое первое приложение [React, JavaScript, Tailwind] канала RED Group
► Интенсив React с нуля (приложение для тренировок) - https://htmllessons.ru/int/show/3?utm_source=youtube&utm_medium=red-group&utm_campaign=description&utm_content=todo-for-children
В этом крутом ролике мы сделаем Todo приложение для самых маленьких (с подробными объяснениями)
Надеюсь Вы оцените мои старания, с Вас лайк и подписка. 🔥 155 лайков и я снимаю еще ролик для новичков (дается мне это супер сложно, не привык все объяснять)
Если есть какие то вопросы по этой теме - пиши в 💬 комментариях!
💰 Новый ролик для спонсоров доступен на Boosty https://boosty.to/redgroup или в нашей общей подписке (от 3 мес.) на сайте https://htmllessons.ru/premium
Скачать 🖥 исходник проекта в нашем хранилище - https://htmllessons.ru/storage#storage_file_36
#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_source=youtube&utm_medium=red-group&utm_campaign=description&utm_content=todo-for-children
► Интенсив по верстке сайта с 0 - https://htmllessons.ru/int/show/1?utm_source=youtube&utm_medium=red-group&utm_campaign=description&utm_content=todo-for-children
👉 Смотрите видео ДО КОНЦА, подписывайтесь на канал, ставьте 👍 и колокольчик 🔔
► Оформить подписку на нашем сайте - https://htmllessons.ru/premium
► Эксклюзивный контент - https://boosty.to/redgroup
► Оформи спонсорство и получи уникальный значок и эмоджи - https://www.youtube.com/channel/UCdpPBwKPriPIP2eyP9a1C6g/join
► Хранилище (здесь все файлы к видео) *требуется авторизация - https://htmllessons.ru/storage
► Научим разрабатывать сайты - https://htmllessons.ru/
► Личный Instagram - https://www.instagram.com/maxzbs/
► Личный Youtube - https://www.youtube.com/channel/UChXs79MvR8NjOumyxY3ayjw
► Получи до 4000 руб. на первое бронирование через Airbnb - https://abnb.me/e/Mgl6khUuN3
► Если хочешь улучшить качество видео - https://htmllessons.ru/ext/donate
► Мой сетап VS Code - https://youtu.be/_jquc4KJ4IU
Немного обо мне: меня зовут Максим, я уже 9 лет занимаюсь веб-разработкой. На данный момент являюсь основателем двух крутых проектов htmllessons.ru и еще одного глобального проекта. Первый, был моей дипломной работой в колледже. Как и все, начинал с изучения верстки html, css, js. Затем появилась потребность в изучении Laravel для разработки образовательного проекта. Затем я ушел от PHP и перешел на Javascript, так как появилась задача по разработке крупного проекта. Основная миссия – создавать крутые продукты, которые будут помогать людям и менять мир. Буду рад, если Вы меня поддержите и подпишитесь на мой канал. Спасибо 😊
Видео Todo приложение на React для самых маленьких // Твое первое приложение [React, JavaScript, Tailwind] канала RED Group
Показать
Комментарии отсутствуют
Информация о видео
Другие видео канала
Beginner React.js Coding Interview (ft. Clément Mihailescu)Пишем список задач на React (React Hooks)Разработка списка задача на ReactJS (ToDo) #1React Todo List App Tutorial - Beginner React JS Project Using HooksПрактика JavaScript — пишем туду лист на JavaScript | Уроки для новичковReact Crash Course - Build A Full Recipe App TutorialДелаю копию приложения McDonald’s на React Native с нуляReact Router 6 - базовый роутинг React-приложенияBuild A Todo List App with React from Scratch in 2022 || CRUD App || Including HooksАнимация перехода между страницами в React SPA с react-spring20 REACT ХУКОВ за 1 ЧАС + Custom хуки // React для начинающихReact JS Todo List Tutorial With Source Code - React JS Tutorial⚡️ Быстрый курс по Next.js | Уроки next.js для начинающихНеобычный Todo list на React. React.js, React Hooks, localStorage⚡️Быстрый курс по Redux Toolkit (React, RTK query, TypeScript, Next.js)Быстрый курс по REACT 2022 // Уроки React для начинающих!Что такое React js. Обзор возможностей для начинающих. План изученияReact.js. Создание первого приложения, структура react приложения, основы JSX, оформление CSSПишем Todo list App на React, useState hook