React с полного 0 до реального проекта. Практика для начинающих 2024 | React, vite, deploy

✏️ Изучаем на практике React с полного 0. По итогу будет приложение, которое умеет сканировать и генерировать QR код. А также все это сохраняется в localStorage. Оттуда мы будет доставать ранее сгенерированные коды.

🔥 Поддержать автора:

📚 Ссылки:

💬 Чат в телеграмме (помощь новичкам):

🎦 Другие видео:

🎦 Плейлисты:

⏰ Таймкоды:
▶ 00:00 | Для кого это видео
▶ 00:56 | Что будем делать
▶ 02:04 | Как выглядит приложение
▶ 03:19 | Что нужно установить
▶ 04:22 | Что такое React
▶ 05:18 | Создаем проект на Vite
▶ 09:58 | Что такое JSX
▶ 10:21 | Что такое компонент
▶ 13:47 | Как работать с npm
▶ 17:00 | Генерируем статичный QR
▶ 27:55 | Хук useState
▶ 31:50 | Генерируем QR по событию onClick
▶ 39:31 | Подключаем css и стилизуем компонент
▶ 44:00 | Сканируем QR код
▶ 52:43 | Передаем объект в пропсы
▶ 55:00 | Выводим текст
▶ 57:57 | Подключаем CSS модули
▶ 01:02:33 | Делаем простой роутинг
▶ 01:09:01 | Общий layout
▶ 01:13:45 | Небольшой рефакторинг
▶ 01:15:08 | Работаем с localStorage
▶ 01:26:28 | Компонент "История сканирования"
▶ 01:32:54 | Компонент "История генерирования"
▶ 01:34:18 | Заливаем код на github
▶ 01:38:27 | Небольшая практика с git
▶ 01:39:45 | Настраиваем deploy
▶ 01:45:55 | Тестируем приложение
▶ 01:46:50 | Исправляю сломанный сканер
▶ 01:55:38 | Финальный тест приложения
▶ 01:56:23 | Подводим итоги
▶ 01:57:37 | Что пропустили?

🔊 Музыка:
Song: "Dj Quads - Birds And The Bees"

#frontend #react #javascript #js #vite

[kakieToYroki]

Кратенько про PREAX. Основная фишка — тренируешься работать в команде с процессами и требованиями боевого проекта:

🔸 5 больших проектов — Погода, личный дневник, квизы, HR-платформа, таск-трекер.
🔸 Спринты и дедлайны — Научишься рассчитывать время и укладываться в сроки.
🔸 Работа с легаси — Исправишь ошибки, оптимизируешь код и сделаешь рефакторинг.
🔸 Пачка код-ревью — Увидишь много вариантов решений и поймешь как сделать свой код лучше.
🔸 Поддержка сообщества — Сможешь задать вопрос и за 5 минут получить ответ.
🔸 Новый стек технологий — Используешь самые популярные технологии, которые применяются в современных проектах.
🔸 Гибкий график — Сможешь легко совмещая тренировку с работой или учебой.
🔸 Полезные стримы — Публичные собеседования, разборы резюме, код-ревью, выступления от участников и обменом опытом.

[severbit]

Недавно вернулся с армий, решил вернуть знания и ищу видосы по реакту. Под конец видео я узнал канал. Чел я был твоим фанатом год назад. Рад что ты продвинулся. Помню когда только начинал учить кодинг с твоих видосов про игры на JS

[KIREKSSHOW]

большеее видосов про реакт, хотел бы приложение для джунов типо мини магазина с бэком

[VitalyP-hy]

Отличное видео!! Побольше выпускай видюх в формате "от самого начала до самого конца"!

[schizophrenia]

Очень супер!
Хотелось бы увидеть как делать простой интернет магазин:3

[shurinskiy]

Очень хорошая подача материала. Просто прекрасная!
Отдельное спасибо, за деплой на гите.

[rmsobbo]

Хотя я это уже давно знаю, все равно было приятно смотреть ваше видео❤

[tetiana]

так много годных видео, надеюсь их осилить

[irvdxte]

Класное решени с input, избижали инициализации третей переменной

[lwmgyxp]

Спасибо за видео, очень интересно! Сразу столкнулась с проблемой сканера, ошибка вылезла, пришлось искать другую библиотеку.

[kluqueen]

Ахахахахвххвв не ожидал что ты выпустишь такой ролик)

[dionusios]

Здравствуйте, отличное видео! TypeScript => пожалуйста &&

[unicoxrtj]

следующим уроком стоит ожидать авторизацию и глубокое погружение в Fake API

[Phantom-mywr]

привет, а какой IDE используешь на работе чаще всего?

[ybumkhq]

Интересно по смотреть было, но неужели тяжело меньше 5 минут уделить, чтобы накидать пару стилей для интерфейса? Он же прчм глаза режет, как зрителям, так думаю и автору.