React с полного 0 до реального проекта. Практика для начинающих 2024 | React, vite, deploy
HTML-код
- Опубликовано: 22 июл 2024
- Изучаем на практике React с полного 0. По итогу будет приложение, которое умеет сканировать и генерировать QR код. А также все это сохраняется в localStorage. Оттуда мы будет доставать ранее сгенерированные коды.
🔥 Junior Frontend Roadmap:
🔥 Middle Frontend Roadmap: • Как стать MIDDLE FRONT...
🔥 Поддержать автора: www.donationalerts.com/r/kake...
✅ Сервис для практики: preax.ru/?i=1bd448e9
❤️ Курс по Chrome Dev Tools: stepik.org/a/194549
❤️ Курс по React: • React для НАЧИНАЮЩИХ
❤️ Курс по JavaScript: • Уроки по JavaScript дл...
🔥 Telegram чатик: t.me/kakieToYrokiChat
Vite deploy: vitejs.dev/guide/static-deploy
Исходный код: github.com/R1ON/qr-code
***** Таймкоды:
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
20:08 Событие onChange и event.target.value
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"
/ djquadsoffi. .
Music provided by BreakingCopyright: • [Non Copyrighted Music...
Кратенько про PREAX. Основная фишка - тренируешься работать в команде с процессами и требованиями боевого проекта:
🔸 5 больших проектов - Погода, личный дневник, квизы, HR-платформа, таск-трекер.
🔸 Спринты и дедлайны - Научишься рассчитывать время и укладываться в сроки.
🔸 Работа с легаси - Исправишь ошибки, оптимизируешь код и сделаешь рефакторинг.
🔸 Пачка код-ревью - Увидишь много вариантов решений и поймешь как сделать свой код лучше.
🔸 Поддержка сообщества - Сможешь задать вопрос и за 5 минут получить ответ.
🔸 Новый стек технологий - Используешь самые популярные технологии, которые применяются в современных проектах.
🔸 Гибкий график - Сможешь легко совмещая тренировку с работой или учебой.
🔸 Полезные стримы - Публичные собеседования, разборы резюме, код-ревью, выступления от участников и обменом опытом.
Попробуй ❤ Первый спринт бесплатный: preax.ru/?i=1bd448e9
Недавно вернулся с армий, решил вернуть знания и ищу видосы по реакту. Под конец видео я узнал канал. Чел я был твоим фанатом год назад. Рад что ты продвинулся. Помню когда только начинал учить кодинг с твоих видосов про игры на JS
Добро пожаловать )
Отличное видео!! Побольше выпускай видюх в формате "от самого начала до самого конца"!
большеее видосов про реакт, хотел бы приложение для джунов типо мини магазина с бэком
Если это видео наберет нормально активности, то займусь этим проектом в ближайшее время :)
Класное решени с input , избижали инициализации третей переменной
Только я не понял зачем проверку производить пустой строки если пустая строка и так вычисляется как false
так много годных видео, надеюсь их осилить
Спасибо!!!
Спасибо! Хорошая практика 🤝
Огромная благодарность
Хотя я это уже давно знаю, все равно было приятно смотреть ваше видео❤
Очень супер!
Хотелось бы увидеть как делать простой интернет магазин:3
Если это видео наберет нормально активности, то займусь этим проектом в ближайшее время :)
Я скоро начну свой КиноПоиск создавать мидловского уровня. Простой магазин кст создать очень просто, если не заморачиваться с деталями😊
@@user-rm2so3bb2o Привет, я пока обучаюсь) пока сложновато все это делать) пока что изучаю основы React, если ты можешь создать обычный интернет магазин то ты большой молодец:3
Красиво
Здравствуйте, отличное видео! TypeScript => пожалуйста &&
Исходя из опыта последних лет Vite все же локальный билдер, не для реального продакшена. Next.js или Getsby более реальные претенденты для использования.
Ну и в целом в роли локального билдера уже существует нативный React-compiler, хоть он еще и не имеет rc.
А за старания - лайк, в качестве минимума материал подобран хорошо. Для страждущих можно сделать цикл роликов с 1 проектом, но разным контекстом - бэк, фронт, граф, апи, бд, деплой, безопасность, но без ts будет не серьезно.
Спасибо за видео, очень интересно! Сразу столкнулась с проблемой сканера, ошибка вылезла, пришлось искать другую библиотеку.
Здравствуйте, что использовали взамен? у меня ошибка "OverconstrainedError".
@@neobulk3761 здравствуйте! react-qrcode-scanner.
@@neobulk3761 Здравствуйте! Использовала react-qrcode-scanner
Я, кстати, в конце видео другой сканер подключаю. Если не досмотрели до конца, то обратите на это внимание
@@kakieToYroki да, его и поставил в итоге.
Ахахахахвххвв не ожидал что ты выпустишь такой ролик)
Че ржешь
следующим уроком стоит ожидать авторизацию и глубокое погружение в Fake API
го типизировать
привет, а какой IDE используешь на работе чаще всего?
Привееет
здрасти)
Роман, ваши видео лучше секса
Я польщен )
МОЖНО НА TS 🙏🏿🙏🏿🙏🏿🙏🏿🙏🏿🙏🏿🙏🏿
Это далеко от реального проекта
Название немного кликбейтным получилось, тут согласен, но создать по-настоящему "реальный" проект, когда нет знаний даже реакта - нереальная задача 🫠
В 2 часа я бы никак не уместил поднятие всей инфраструктуры и написание приложения. Плюс все это должно быть с объяснением для начинающих
@@kakieToYroki Не, ну это понятно
А какие вообще проекты настоящие
@@user-fn6xx7db1r с бэкендом, редаксом и другими страшностями))
Блин, выложи css! Я все время ждал, пока мы сделаем все красиво, а тут такая хрень!
А сам css написать не можешь?
Так тут видео чисто про логику)