React с полного 0 до реального проекта. Практика для начинающих 2024 | React, vite, deploy
Рет қаралды 5,350
Күн бұрын✏️ Изучаем на практике React с полного 0. По итогу будет приложение, которое умеет сканировать и генерировать QR код. А также все это сохраняется в localStorage. Оттуда мы будет доставать ранее сгенерированные коды.
🔥 Сервис для получения реального опыта PREAX - preax.ru/?i=1bd448e9
🔥 Поддержать автора:
www.donationalerts.com/r/kake...
📚 Ссылки:
Vite deploy: vitejs.dev/guide/static-deploy
Исходный код: github.com/R1ON/qr-code
💬 Чат в телеграмме (помощь новичкам):
t.me/kakieToYrokiChat
🎦 Другие видео:
🟣 React с полного 0 до реального проекта: • React с полного 0 до р...
🔵 Chrome Dev Tools полный курс: • Chrome Dev Tools полны...
🟢 Полный Roadmap по всему Frontend: • Как долго учить HTML, ...
🟡 Как стать MIDDLE FRONTEND?: • Как стать MIDDLE FRONT...
🟠 TypeScript базовый курс: • TypeScript базовый кур...
🎦 Плейлисты:
🟣 HTML: • Уроки по HTML для НАЧИ...
🔵 CSS: • Уроки по CSS для НАЧИН...
🟢 SVG: • SVG для НАЧИНАЮЩИХ
🟡 JavaScript: • Уроки по JavaScript дл...
🟠 TypeScript: • TypeScript
🔴 React: • React для НАЧИНАЮЩИХ
⏰ Таймкоды:
▶ 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...
#frontend #react #javascript #js #vite
@kakieToYroki Ай бұрын
Кратенько про PREAX. Основная фишка - тренируешься работать в команде с процессами и требованиями боевого проекта: 🔸 5 больших проектов - Погода, личный дневник, квизы, HR-платформа, таск-трекер. 🔸 Спринты и дедлайны - Научишься рассчитывать время и укладываться в сроки. 🔸 Работа с легаси - Исправишь ошибки, оптимизируешь код и сделаешь рефакторинг. 🔸 Пачка код-ревью - Увидишь много вариантов решений и поймешь как сделать свой код лучше. 🔸 Поддержка сообщества - Сможешь задать вопрос и за 5 минут получить ответ. 🔸 Новый стек технологий - Используешь самые популярные технологии, которые применяются в современных проектах. 🔸 Гибкий график - Сможешь легко совмещая тренировку с работой или учебой. 🔸 Полезные стримы - Публичные собеседования, разборы резюме, код-ревью, выступления от участников и обменом опытом. Попробуй ❤ Первый спринт бесплатный: preax.ru/?i=1bd448e9
@severbit 22 күн бұрын
Недавно вернулся с армий, решил вернуть знания и ищу видосы по реакту. Под конец видео я узнал канал. Чел я был твоим фанатом год назад. Рад что ты продвинулся. Помню когда только начинал учить кодинг с твоих видосов про игры на JS
@kakieToYroki 22 күн бұрын
Добро пожаловать )
@tetiana4257 Ай бұрын
так много годных видео, надеюсь их осилить
@VitalyP-h5y 15 күн бұрын
Отличное видео!! Побольше выпускай видюх в формате "от самого начала до самого конца"!
@KIREKSSHOW Ай бұрын
большеее видосов про реакт, хотел бы приложение для джунов типо мини магазина с бэком
@kakieToYroki Ай бұрын
Если это видео наберет нормально активности, то займусь этим проектом в ближайшее время :)
@MioGesa-md2ul 5 күн бұрын
@@kakieToYroki сейчас Ютуб блочат
@igorsenichev3779 Ай бұрын
Спасибо! Хорошая практика 🤝
@user-rm2so3bb2o Ай бұрын
Хотя я это уже давно знаю, все равно было приятно смотреть ваше видео❤
@kakieToYroki Ай бұрын
@react-js-next Ай бұрын
Огромная благодарность
@schizophrenia2 Ай бұрын
Очень супер! Хотелось бы увидеть как делать простой интернет магазин:3
@kakieToYroki Ай бұрын
Если это видео наберет нормально активности, то займусь этим проектом в ближайшее время :)
@user-rm2so3bb2o Ай бұрын
Я скоро начну свой КиноПоиск создавать мидловского уровня. Простой магазин кст создать очень просто, если не заморачиваться с деталями😊
@schizophrenia2 28 күн бұрын
@@user-rm2so3bb2o Привет, я пока обучаюсь) пока сложновато все это делать) пока что изучаю основы React, если ты можешь создать обычный интернет магазин то ты большой молодец:3
@user-ir1vd8xt4e 22 күн бұрын
Класное решени с input , избижали инициализации третей переменной
@user-ir1vd8xt4e 22 күн бұрын
Только я не понял зачем проверку производить пустой строки если пустая строка и так вычисляется как false
@user-um9up4xk9t 27 күн бұрын
Спасибо!!!
@falcon94q 21 күн бұрын
Красиво
@kluqueen569 Ай бұрын
Ахахахахвххвв не ожидал что ты выпустишь такой ролик)
@user-rm2so3bb2o Ай бұрын
Че ржешь
@dionusios05 29 күн бұрын
Здравствуйте, отличное видео! TypeScript => пожалуйста &&
@unicoxr5tj417 Ай бұрын
следующим уроком стоит ожидать авторизацию и глубокое погружение в Fake API
@user-lw7mg8yx4p 23 күн бұрын
Спасибо за видео, очень интересно! Сразу столкнулась с проблемой сканера, ошибка вылезла, пришлось искать другую библиотеку.
@neobulk3761 20 күн бұрын
Здравствуйте, что использовали взамен? у меня ошибка "OverconstrainedError".
@user-lw7mg8yx4p 20 күн бұрын
@@neobulk3761 здравствуйте! react-qrcode-scanner.
@user-lw7mg8yx4p 20 күн бұрын
@@neobulk3761 Здравствуйте! Использовала react-qrcode-scanner
@kakieToYroki 19 күн бұрын
Я, кстати, в конце видео другой сканер подключаю. Если не досмотрели до конца, то обратите на это внимание
@neobulk3761 19 күн бұрын
@@kakieToYroki да, его и поставил в итоге.
@tameraistillhome6486 28 күн бұрын
го типизировать
@Phantom-my1wr 19 күн бұрын
привет, а какой IDE используешь на работе чаще всего?
@M4Dof Ай бұрын
Привееет
@kakieToYroki Ай бұрын
здрасти)
@mates6772 Ай бұрын
Роман, ваши видео лучше секса
@kakieToYroki Ай бұрын
Я польщен )
@66sqream 16 күн бұрын
МОЖНО НА TS 🙏🏿🙏🏿🙏🏿🙏🏿🙏🏿🙏🏿🙏🏿
@ROADING_OFFICIAL Ай бұрын
Это далеко от реального проекта
@kakieToYroki Ай бұрын
Название немного кликбейтным получилось, тут согласен, но создать по-настоящему "реальный" проект, когда нет знаний даже реакта - нереальная задача 🫠 В 2 часа я бы никак не уместил поднятие всей инфраструктуры и написание приложения. Плюс все это должно быть с объяснением для начинающих
@ROADING_OFFICIAL Ай бұрын
@@kakieToYroki Не, ну это понятно
@user-fn6xx7db1r Ай бұрын
А какие вообще проекты настоящие
@cina-tech 29 күн бұрын
@@user-fn6xx7db1r с бэкендом, редаксом и другими страшностями))
StrongSkill
Рет қаралды 3,1 МЛН
Ulbi TV
Рет қаралды 280 М.
Wanderbraun
Рет қаралды 69 М.