React JS для начинающих: Создайте свое приложение
Вставка
- Опубліковано 7 чер 2024
- Дорожная карта и экосистема React JS 2024 - bit.ly/3StRwCN
Комьюнити и эксклюзивный контент на Boosty: boosty.to/vladilen
Облачный сервер для ваших проектов: slc.tl/5skmw
Исходный код: t.me/js_by_vladilen/796
Донат за полезный контент: www.donationalerts.com/r/vlad...
Добро пожаловать на мой канал! В этом видео я представляю вам большой теоретический курс для начинающих по React. Но не только теория, мы также добавим практику! Многие из вас спрашивают, где найти практический опыт и как стать фронтенд разработчиком с использованием React. Я решил создать что-то особенное - приложение связанное с криптовалютами. Это будет интересная история о мире крипты, которую мы будем разрабатывать с нуля используя React.
В этом видео вы увидите пример дизайна приложения и узнаете, как декомпозировать компоненты, работать со связками компонентов и применять дизайн. Также я поделюсь полезными советами и рекомендациями для улучшения вашего портфолио.
Не забудьте посмотреть до конца видео, чтобы получить все рекомендации от меня. Если вы хотите получить максимальную пользу от этого курса, активно комментируйте и задавайте вопросы - это поможет вам продолжить обучение самостоятельно.
Таймкоды:
00:00 - Важное введение. О чем курс?
03:29 - Структура приложения
15:25 - Разработка Sider
58:30 - Реализация React Context
1:09:00 - Разработка Header
1:33:50 - Реализация модального окна
1:43:54 - Разработка React Form
2:24:15 - Оптимизация вывода через object-map
2:31:17 - Реализация графиков c react-chartjs-2
2:40:34 - Вывод динамической таблицы
2:50:15 - Создание NodeJS сервера
2:55:00 - Добавление GIT
2:57:32 - Деплой React приложения на VPS
Ловите клевый проект в портфолио. Часто у начинающих вопрос: "Я не знаю что делать и как практиковаться". Идите на крипторынок и пробуйте реализовать любой понравившийся интерфейс))
Вообще надеюсь это видео даст вам идей что еще можно попрактиковать. А кто нацелен на самый быстрый и эффективный способ попасть на работу разработчиков - срочно переходите сюда и начинайте учиться бесплатно: bit.ly/3StRwCN. Там же дорожная карта по React 2024
Для клевых ребят переходите в Boosty. Там начинается история про классное комьюнити: boosty.to/vladilen
У вас не будет про Kotlin и Android или react native ? Вы хорошо преподаете, трудно влиться, хотя бы основы...
все вью накста не будет?
СПАСИБО ЗА ТОПОВЫЙ ВИДОС!!!! Очень ценим твой труд, продолжай!))❤❤❤
спасибо бро !! это крутой проект !! когда я начинал первый попался ты ,и до сих пор учусь )) ты монстр !!! :)
Спасибо огромное, Владилен 👍
Работы на 2-3 дня по освоению есть)
Спасибо большое! не останавливайся на этом) давай больше обучалок по реакту)
Спасибо! Хотелось бы еще!
Здорово! Спасибо сенсей)
Огонь🔥
Ждём!
Пушка! Спасибо большое
Супер, спасибо большое!
Всё классно! Спасибо за Ваши уроки!
Владилен, спасибо за отличный материал!
Ты лучший Блогер!!!❤❤❤🎉😊
Жесть. Я 2 месяца назад начал учить фронт енд. И специально искал курсы где делают именно вот такой сайт. Но не смог найти. Ты как будто мои мысли читаешь. Спасибо за видос о котором я мечтал)))))
Он крутой чел!!! ❤❤❤
Требуем еще
Спасибо за связку. Всё Ок. Работает
Владилен, спасибо за столь качественное и познавательное видео! Благодаря тебе я стал понимать Реакт лучше!
красавчик 👌🏻
Спасибо за крутой видос. С чего начать для изучение крипты и Web3? Спасибо заранее ...
КЛАСС😊
Привет, будет для новичков по новому next.js с нуля?
Спасибо за урок
А как вносить изменения на сервер или в дист? после того как уже задеплоил
именно проблема в том что я задеплоил, а потом изменения не отображаются на локал хосте, хоть я уже и закомитил изменения на гит хаб. Это надо что то по серверной части делать? с дистом я так понял но я не понимаю как его пересобрать(
А можно ли как то вызвать полностью ререндер формы? У меня данные в форме зависят от выбираемого предмета в селекте.
Здравствуйте я по поводу ошибки country.
Ошибка заключается в том если вы используете VPN который установили в расширении браузера чтобы решить ошибку отключить расширения каторый вы установили в браузере.
Владилен красавчик побольше делай что то про крипту если у тебя будет возможность.
просто Молодец!
у меня тема курсовой связана с разработкой приложения для обучения крипте, вот это подарок, а не видео)
круто !!!!
А как все таки сделать нормальный селект слева? Чтобы выбранное поле отображалось в самом селекте 1:34:10
Привет Владилен! Интересно что ты думаешь о фреймворке nextjs и вообще, стоит ли писать фронтенд на нем или лучше все-таки angular или react
next это итак react, только с ssr и встроенным роутингом
Неплохо было бы про настройки htaccess для spa приложений, в т.ч. развернутых в поддиректориях и что бы все это работало с react router (вкл. detailed routes) из строки ввода адреса
🔥
крутой проект запилил)) делай гайд как разобраться в крипте, я тоже очень хочу разобраться но везде какая-то дичь и инфоциганщина, было бы очень интересно послушать что ты думаешь об этом всем (крипта, инвестирование и тд..)
Владилен привет, может ты сможешь дать подсказку.
Я разрабатываю Resume Builder на реакт, и у меня проблема,
при клике на шаблон у меня подгружается готов компонент (резюме) в формате А4 по ширине и высоте, с текстом который могу редактировать и т.д
Но тут проблема, что если текста будет много, нужно будет уже 2 и более страниц которые должны скачатся в pdf
Как реализовать такой функционал разделение на страницы одного компонента
Я пытался использовать react-pdf-renderer но не могу его кастомизировать под себя по стилям
Спасибо за видео!
Один вопрос, то есть наши assets хранятся только в памяти кода так сказать? База данных в этом случае не нужна?
нет, он искуственно создал базу данных в нашем коде без запроса на реальный сервер, если я правильно понял твой вопрос
@@user-rr2gh4ox9i ну к примеру мы добовляем монету в портфолио, это информация должна же гдето записыватся🤔
Спасибо за информацию! А почему нельзя было nginx поставить для раздачи статики? Там можно и кеш настроить и еще много чего. К тому же он уже в основном репозитории, не надо ставить NVM и прочую инфраструктуру node. В случае с node еще надо было его добавить в автозагрузку. В общем слишком много телодвижений только для раздачи статики.
Как посмотреть demo app online? а так да, тема в тренде :)
@VladilenMinin привет , ожидал увидеть смарт контракт на remix или типо того , с интеграцией фронта или web3 приложение, или расширение. По факту - это todo , но вместо данных - крипта. Ожидал большего
согласен с вами
ошибка эта непонятная (proxyOverlay) из-за впн Browsec, тоже долго понять пытался)
Не отрабатывает почему-то select на открытие через keypress по /странно...
Я не понял зачем мы сделали сервак на node? Разве мы просто не можем сбилдить react приложение, статику с помощью nginx на серваке опубликовать.
Посмотрел видео и уже разбогател 😅
перешел по ссылке и так и не смог найти roadmap ((((
Порядок же следования мапы не определен по идее данные для чарта могут отображаться неправильно 2:39
Если говорить об идеях для имрува:
можно ассеты хранить как ассеты исходные, но создать замаленную переменную (через юзмемо, например) и не переживать за то, нужно перемапливать ассеты перед изменением, потому что они будут мапится по его изменению перед вставкой в контекст.
Ошибка в консоли выдает из-за расширения Browsec VPN, если его отключить extensions, то ошибка пропадёт.
Сколько будет строить данный проект на фрилансе? 🤩🤑
А видео не удаляете да надеюсь ?
Terima kasih banyak!
щщщщщикарно!
Эх, щас бы в 24 году идти во фронтенд
Може буде цікаво для key можна використовувати uuid.
У меня есть практика , нужно попрааить код сайта.
41:00
Привет. У меня была похожая проблема, где был этот 'country'. Если посмотреть вкладку network, то там будет уходить запрос на получение какой-то country, который отправлял vpn. При этом он вообще был отключен. Соответственно, адекватно получить country он не мог и кидал в консоль эту бесячую ошибку.
В итоге я просто снёс vpn, т.к. редко его использую и ошибка пропала.
Надеюсь помог)
Тоже появлялась такая ошибка, после того как отключил расширение с vpn в браузере (в настройках браузера), ошибка ушла
Kak zhiiiiitt
Хочу спросить аудиторию: можно ли добавить в джунское портфолио проект/-ы с курсов при условии, что переписать его/их на другом фреймворке? Например, на курсе даётся на React, переписать на Vue или наоборот. Сойдёт ли за пет-проект (зашквар или нет)? Просто у меня проблемы с придумыванием идеи с абсолютного нуля, особенно дизайна, хромает чувство прекрасного 😅 Что вообще такое "пет-проект", обязательно ли это значит что-то уникальное?
врятле проверяют, добавляй лишним не будет
Ага, туду АПП это будет уникальное 😅
Компанией играли в игру под твой видос - выпиваем каждый раз, когда ты говоришь "довольно-таки" 😄
Я проиграл на первом часе 😑
Кстати, спасибо за контент 👍🏿😊
Why not Typescript?
Ты крутой!
Это видео про web3?
про реакт
A kak zhitt to?
на бусти подписывайся, там ответы)
Ты как-то замудренно деплоил) Проще же через vercel импортировать проект с гита и все, проект в массах) Если что, поправьте меня!
Или через nginx раздавать. Тоже проще намного и ресурсов меньше будет потреблять и кеширование
Владилен , скажи побратски , фронтенд реально вниз идёт? я его ьолее менее освоил ,только щас работу искать начинаю , а тут говорят что джуном устроиться грубо говоря невозможно, действительно все так плохо?
Дык это всегда так сложно было джуном без опыта устроиться, так что не думаю что идёт вниз, это обычная история 😊
Илья Климов делал 2021 году на вью такое но все равно спасибо
Можно заново? Я опоздал
погнали
Небольшой баг. Например добавил крипту солану. Хочешь добавить опять такую же крипту, ругается.
как то пофиксил?
Владилен, не смогу столько времени уделить на просмотр видео, так как уже работаю фронтендером, но огромнейший тебе респект, что ДО СИХ ПОР делаешь обучающие видео, а не скатился в инфо-цыганство.
Лайк авансом тебе и плюс к бицухе))
А Редакс не надо уже учить? Если такое крутое апп можно сделать без редакса, то он тогда вообще не нужен 😮😊
В теории любое приложение можно сделать без стейт-менеджеров. Если тебе нравится прокидывать пропсы через 100500 компонентов - никто не против.
ua-cam.com/video/S4HOy6yTclU/v-deo.html Посмотрел API селекта, в обработчик onSelect 2м параметром приходит option, так что можно избежать лишней пробежки по массиву
Там ссылка не на роадмап, а на курсы.
Вооот! И я в предыдущем стриме голову сломала. А оказывается, нужно зарегиться на курсах, пролистать до фиг пойми скольки страниц, и где-то там будет видос с роадмапом и презентация.
Рад, что подучилось 🤝😌
как минимум что я увидел, инлайн стили точно плохая практика, так же magic numbers, выносите в константы,
так же стили в файле jsx тоже плохая практика, как минимум можно на уровне создавать style.js/ts и импортировать стили, возможно это просто минус библиотеки антд, в MUI так сделать 100%. возможно
Спасибо за ваш контент. Я хочу начать инвестировать в криптовалюту. Мне нужна помощь в этом, пожалуйста.
Я удивлен, что ты знаешь эту женщину, она хорошая.
Пожалуйста, как мне с ней связаться?
Спасибо.
Не сделает, это не тот опыт который нужен, вернее он слишком слаб тем более если его тупа списать!
Не хочу обидеть автора, но за 3 часа на готовых компонентах откровенно слабо получилось.
Предложения?
@@VladilenMininлично для себя открыл много нового)спасибо. А так даже хоть топ контент запилишь всегда будут те, которые будут недовольны, это нормально. Невозможно угодить всем
А конкретика где? Вода, а не комментарий - ни чего по существу.
Это называется инженерия)
Не хочу обидеть автора комментария, но на готовых словах русского языка откровенно слабо получилось, одна вода, без конкретики
ты когда скачешь между страницами помни что ты это делаешь не для того что бы тебе было видно и понятно а что бы было понятно нам. а если ты ведешь себя как муда к после того как написал строчку сразу перескакиваешь на страницу смотреть ты забываешься. не нужно быть мудаком
Шляпа полная 😂😂
Такой хороший) Так заманивает))
🤝