React JS для начинающих: Создайте свое приложение

  Переглядів 57,949

Владилен Минин

Владилен Минин

День тому

Дорожная карта и экосистема 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

КОМЕНТАРІ: 112
@VladilenMinin
@VladilenMinin 3 місяці тому
Ловите клевый проект в портфолио. Часто у начинающих вопрос: "Я не знаю что делать и как практиковаться". Идите на крипторынок и пробуйте реализовать любой понравившийся интерфейс)) Вообще надеюсь это видео даст вам идей что еще можно попрактиковать. А кто нацелен на самый быстрый и эффективный способ попасть на работу разработчиков - срочно переходите сюда и начинайте учиться бесплатно: bit.ly/3StRwCN. Там же дорожная карта по React 2024 Для клевых ребят переходите в Boosty. Там начинается история про классное комьюнити: boosty.to/vladilen
@diatm1506
@diatm1506 2 місяці тому
У вас не будет про Kotlin и Android или react native ? Вы хорошо преподаете, трудно влиться, хотя бы основы...
@artemunix5223
@artemunix5223 16 днів тому
все вью накста не будет?
@user-gg7cg7gz9o
@user-gg7cg7gz9o 2 місяці тому
спасибо бро !! это крутой проект !! когда я начинал первый попался ты ,и до сих пор учусь )) ты монстр !!! :)
@RubikElevator
@RubikElevator 3 місяці тому
СПАСИБО ЗА ТОПОВЫЙ ВИДОС!!!! Очень ценим твой труд, продолжай!))❤❤❤
@kimalhasanov3793
@kimalhasanov3793 3 місяці тому
Огонь🔥 Ждём!
@max_mgtow
@max_mgtow 3 місяці тому
Спасибо огромное, Владилен 👍 Работы на 2-3 дня по освоению есть)
@Cherry.Blossom.11
@Cherry.Blossom.11 3 місяці тому
Спасибо большое! не останавливайся на этом) давай больше обучалок по реакту)
@Alex-rs1tt
@Alex-rs1tt 3 місяці тому
Здорово! Спасибо сенсей)
@user-fh9bq2mf1i
@user-fh9bq2mf1i Місяць тому
Спасибо! Хотелось бы еще!
@Troxip
@Troxip 3 місяці тому
Жесть. Я 2 месяца назад начал учить фронт енд. И специально искал курсы где делают именно вот такой сайт. Но не смог найти. Ты как будто мои мысли читаешь. Спасибо за видос о котором я мечтал)))))
@mr_robot666
@mr_robot666 3 місяці тому
красавчик 👌🏻
@user-tf4vu9kr2z
@user-tf4vu9kr2z 3 місяці тому
Супер, спасибо большое!
@user-wo3oh7zd6b
@user-wo3oh7zd6b 3 місяці тому
Всё классно! Спасибо за Ваши уроки!
@vladsnordrems3179
@vladsnordrems3179 3 місяці тому
Владилен, спасибо за отличный материал!
@user-tq4kf8bz4e
@user-tq4kf8bz4e 3 місяці тому
Спасибо за связку. Всё Ок. Работает
@OOSports
@OOSports 3 місяці тому
Владилен, спасибо за столь качественное и познавательное видео! Благодаря тебе я стал понимать Реакт лучше!
@ByEfimov
@ByEfimov 3 місяці тому
КЛАСС😊
@azizbeksamatov4631
@azizbeksamatov4631 3 місяці тому
Спасибо за крутой видос. С чего начать для изучение крипты и Web3? Спасибо заранее ...
@user-yl5kn9gq4p
@user-yl5kn9gq4p 27 днів тому
круто !!!!
@user-fh9bq2mf1i
@user-fh9bq2mf1i 2 місяці тому
Требуем еще
@erkanat_iman
@erkanat_iman 3 місяці тому
Спасибо за урок
@smelnew
@smelnew 3 місяці тому
просто Молодец!
@alxski6318
@alxski6318 24 дні тому
Неплохо было бы про настройки htaccess для spa приложений, в т.ч. развернутых в поддиректориях и что бы все это работало с react router (вкл. detailed routes) из строки ввода адреса
@AsaAlexa
@AsaAlexa 3 місяці тому
Владилен красавчик побольше делай что то про крипту если у тебя будет возможность.
@BarcikMinusPTS
@BarcikMinusPTS 3 місяці тому
у меня тема курсовой связана с разработкой приложения для обучения крипте, вот это подарок, а не видео)
@nikitachekalin3539
@nikitachekalin3539 3 місяці тому
@VladilenMinin привет , ожидал увидеть смарт контракт на remix или типо того , с интеграцией фронта или web3 приложение, или расширение. По факту - это todo , но вместо данных - крипта. Ожидал большего
@user-in9mx5ex9z
@user-in9mx5ex9z 2 місяці тому
согласен с вами
@user-nd6lr7dl1n
@user-nd6lr7dl1n 3 місяці тому
Привет Владилен! Интересно что ты думаешь о фреймворке nextjs и вообще, стоит ли писать фронтенд на нем или лучше все-таки angular или react
@namesurname8552
@namesurname8552 Місяць тому
next это итак react, только с ssr и встроенным роутингом
@hazyaeva-rofls
@hazyaeva-rofls 3 місяці тому
🔥
@EvilYou
@EvilYou День тому
33:38 Не 2, а 4 секунды. Так как у нас два асинхронных запроса выполняются один за другим
@oleksiymiyskiy4694
@oleksiymiyskiy4694 3 місяці тому
Привет, будет для новичков по новому next.js с нуля?
@aleksandrmajer626
@aleksandrmajer626 3 місяці тому
Спасибо за видео! Один вопрос, то есть наши assets хранятся только в памяти кода так сказать? База данных в этом случае не нужна?
@user-rr2gh4ox9i
@user-rr2gh4ox9i 3 місяці тому
нет, он искуственно создал базу данных в нашем коде без запроса на реальный сервер, если я правильно понял твой вопрос
@aleksandrmajer626
@aleksandrmajer626 3 місяці тому
@@user-rr2gh4ox9i ну к примеру мы добовляем монету в портфолио, это информация должна же гдето записыватся🤔
@alexanonym1584
@alexanonym1584 14 годин тому
А как все таки сделать нормальный селект слева? Чтобы выбранное поле отображалось в самом селекте 1:34:10
@user-bz2if9qh9p
@user-bz2if9qh9p 3 місяці тому
крутой проект запилил)) делай гайд как разобраться в крипте, я тоже очень хочу разобраться но везде какая-то дичь и инфоциганщина, было бы очень интересно послушать что ты думаешь об этом всем (крипта, инвестирование и тд..)
@Nosiri_Khusrav
@Nosiri_Khusrav 3 місяці тому
Здравствуйте я по поводу ошибки country. Ошибка заключается в том если вы используете VPN который установили в расширении браузера чтобы решить ошибку отключить расширения каторый вы установили в браузере.
@kerfuflekhjk2941
@kerfuflekhjk2941 Місяць тому
А как вносить изменения на сервер или в дист? после того как уже задеплоил именно проблема в том что я задеплоил, а потом изменения не отображаются на локал хосте, хоть я уже и закомитил изменения на гит хаб. Это надо что то по серверной части делать? с дистом я так понял но я не понимаю как его пересобрать(
@Xrustalleff
@Xrustalleff 14 днів тому
Эх, щас бы в 24 году идти во фронтенд
@AnthonyVault
@AnthonyVault 3 місяці тому
А можно ли как то вызвать полностью ререндер формы? У меня данные в форме зависят от выбираемого предмета в селекте.
@kolyan4d
@kolyan4d 3 місяці тому
Как посмотреть demo app online? а так да, тема в тренде :)
@whoami_4900
@whoami_4900 3 місяці тому
ошибка эта непонятная (proxyOverlay) из-за впн Browsec, тоже долго понять пытался)
@crabsburger501
@crabsburger501 3 місяці тому
Владилен привет, может ты сможешь дать подсказку. Я разрабатываю Resume Builder на реакт, и у меня проблема, при клике на шаблон у меня подгружается готов компонент (резюме) в формате А4 по ширине и высоте, с текстом который могу редактировать и т.д Но тут проблема, что если текста будет много, нужно будет уже 2 и более страниц которые должны скачатся в pdf Как реализовать такой функционал разделение на страницы одного компонента Я пытался использовать react-pdf-renderer но не могу его кастомизировать под себя по стилям
@Dmitry-cb7wl
@Dmitry-cb7wl 2 місяці тому
Спасибо за информацию! А почему нельзя было nginx поставить для раздачи статики? Там можно и кеш настроить и еще много чего. К тому же он уже в основном репозитории, не надо ставить NVM и прочую инфраструктуру node. В случае с node еще надо было его добавить в автозагрузку. В общем слишком много телодвижений только для раздачи статики.
@Grigoren_com
@Grigoren_com 2 місяці тому
щщщщщикарно!
@mrakov
@mrakov 3 місяці тому
Если говорить об идеях для имрува: можно ассеты хранить как ассеты исходные, но создать замаленную переменную (через юзмемо, например) и не переживать за то, нужно перемапливать ассеты перед изменением, потому что они будут мапится по его изменению перед вставкой в контекст.
@user-wx9ye2or1u
@user-wx9ye2or1u 3 місяці тому
Сколько будет строить данный проект на фрилансе? 🤩🤑
@loadmore
@loadmore 3 місяці тому
Посмотрел видео и уже разбогател 😅
@victorpilyasinsky8736
@victorpilyasinsky8736 3 місяці тому
Terima kasih banyak!
@curious001
@curious001 3 місяці тому
41:00 Привет. У меня была похожая проблема, где был этот 'country'. Если посмотреть вкладку network, то там будет уходить запрос на получение какой-то country, который отправлял vpn. При этом он вообще был отключен. Соответственно, адекватно получить country он не мог и кидал в консоль эту бесячую ошибку. В итоге я просто снёс vpn, т.к. редко его использую и ошибка пропала. Надеюсь помог)
@markeellaas
@markeellaas 3 місяці тому
Тоже появлялась такая ошибка, после того как отключил расширение с vpn в браузере (в настройках браузера), ошибка ушла
@StarkRealityy
@StarkRealityy 3 місяці тому
Ты крутой!
@valerypobelenskiy1001
@valerypobelenskiy1001 Місяць тому
Не отрабатывает почему-то select на открытие через keypress по /странно...
@ms_andersen
@ms_andersen 3 місяці тому
Хочу спросить аудиторию: можно ли добавить в джунское портфолио проект/-ы с курсов при условии, что переписать его/их на другом фреймворке? Например, на курсе даётся на React, переписать на Vue или наоборот. Сойдёт ли за пет-проект (зашквар или нет)? Просто у меня проблемы с придумыванием идеи с абсолютного нуля, особенно дизайна, хромает чувство прекрасного 😅 Что вообще такое "пет-проект", обязательно ли это значит что-то уникальное?
@InterestFactsRefef
@InterestFactsRefef 3 місяці тому
врятле проверяют, добавляй лишним не будет
@mk3mk3mk
@mk3mk3mk 2 місяці тому
Ага, туду АПП это будет уникальное 😅
@natsudragnil4065
@natsudragnil4065 3 місяці тому
Kak zhiiiiitt
@dan1e11s
@dan1e11s 3 місяці тому
перешел по ссылке и так и не смог найти roadmap ((((
@user-ln9eo3dn7h
@user-ln9eo3dn7h 3 місяці тому
Може буде цікаво для key можна використовувати uuid.
@clutchmeisteryo9831
@clutchmeisteryo9831 2 місяці тому
Я не понял зачем мы сделали сервак на node? Разве мы просто не можем сбилдить react приложение, статику с помощью nginx на серваке опубликовать.
@user-wk3hy4yy5t
@user-wk3hy4yy5t 3 місяці тому
Ошибка в консоли выдает из-за расширения Browsec VPN, если его отключить extensions, то ошибка пропадёт.
@maximk5620
@maximk5620 3 місяці тому
Компанией играли в игру под твой видос - выпиваем каждый раз, когда ты говоришь "довольно-таки" 😄 Я проиграл на первом часе 😑 Кстати, спасибо за контент 👍🏿😊
@illegalGoose
@illegalGoose 2 місяці тому
Ты как-то замудренно деплоил) Проще же через vercel импортировать проект с гита и все, проект в массах) Если что, поправьте меня!
@Dmitry-cb7wl
@Dmitry-cb7wl 2 місяці тому
Или через nginx раздавать. Тоже проще намного и ресурсов меньше будет потреблять и кеширование
@bekboltailakov6944
@bekboltailakov6944 3 місяці тому
А видео не удаляете да надеюсь ?
@gom-jabbar
@gom-jabbar 3 місяці тому
Владилен , скажи побратски , фронтенд реально вниз идёт? я его ьолее менее освоил ,только щас работу искать начинаю , а тут говорят что джуном устроиться грубо говоря невозможно, действительно все так плохо?
@mk3mk3mk
@mk3mk3mk 2 місяці тому
Дык это всегда так сложно было джуном без опыта устроиться, так что не думаю что идёт вниз, это обычная история 😊
@digitalturkistan1857
@digitalturkistan1857 3 місяці тому
Илья Климов делал 2021 году на вью такое но все равно спасибо
@andreyvbzuev8977
@andreyvbzuev8977 Місяць тому
Why not Typescript?
@rokhar3278
@rokhar3278 3 місяці тому
Это видео про web3?
@VladilenMinin
@VladilenMinin 3 місяці тому
про реакт
@natsudragnil4065
@natsudragnil4065 3 місяці тому
Можно заново? Я опоздал
@VladilenMinin
@VladilenMinin 3 місяці тому
погнали
@mk3mk3mk
@mk3mk3mk 2 місяці тому
А Редакс не надо уже учить? Если такое крутое апп можно сделать без редакса, то он тогда вообще не нужен 😮😊
@itsMatrik
@itsMatrik 2 місяці тому
В теории любое приложение можно сделать без стейт-менеджеров. Если тебе нравится прокидывать пропсы через 100500 компонентов - никто не против.
@natsudragnil4065
@natsudragnil4065 3 місяці тому
A kak zhitt to?
@VladilenMinin
@VladilenMinin 3 місяці тому
на бусти подписывайся, там ответы)
@velikorossnationalist4259
@velikorossnationalist4259 3 місяці тому
Небольшой баг. Например добавил крипту солану. Хочешь добавить опять такую же крипту, ругается.
@user-su1td2mh1y
@user-su1td2mh1y Місяць тому
как то пофиксил?
@user-nb7cv5px1v
@user-nb7cv5px1v Місяць тому
ukposts.info/have/v-deo/i2R5g69tsIqUzYk.html Посмотрел API селекта, в обработчик onSelect 2м параметром приходит option, так что можно избежать лишней пробежки по массиву
@GeorgeAltmann
@GeorgeAltmann 3 місяці тому
Спасибо за ваш контент. Я хочу начать инвестировать в криптовалюту. Мне нужна помощь в этом, пожалуйста.
@melissamcelroy6864
@melissamcelroy6864 3 місяці тому
Я удивлен, что ты знаешь эту женщину, она хорошая.
@GeorgeAltmann
@GeorgeAltmann 3 місяці тому
Пожалуйста, как мне с ней связаться?
@GeorgeAltmann
@GeorgeAltmann 3 місяці тому
Спасибо.
@ska6391
@ska6391 3 місяці тому
Владилен, не смогу столько времени уделить на просмотр видео, так как уже работаю фронтендером, но огромнейший тебе респект, что ДО СИХ ПОР делаешь обучающие видео, а не скатился в инфо-цыганство. Лайк авансом тебе и плюс к бицухе))
@user-ni2kr1mh8l
@user-ni2kr1mh8l 3 місяці тому
как минимум что я увидел, инлайн стили точно плохая практика, так же magic numbers, выносите в константы, так же стили в файле jsx тоже плохая практика, как минимум можно на уровне создавать style.js/ts и импортировать стили, возможно это просто минус библиотеки антд, в MUI так сделать 100%. возможно
@romanmegagunko4650
@romanmegagunko4650 3 місяці тому
Там ссылка не на роадмап, а на курсы.
@user-il1ld9cj8c
@user-il1ld9cj8c 3 місяці тому
Вооот! И я в предыдущем стриме голову сломала. А оказывается, нужно зарегиться на курсах, пролистать до фиг пойми скольки страниц, и где-то там будет видос с роадмапом и презентация.
@VladilenMinin
@VladilenMinin 3 місяці тому
Рад, что подучилось 🤝😌
@seryozhamangushev9638
@seryozhamangushev9638 3 місяці тому
Не сделает, это не тот опыт который нужен, вернее он слишком слаб тем более если его тупа списать!
@UnreaLyNX
@UnreaLyNX 3 місяці тому
Не хочу обидеть автора, но за 3 часа на готовых компонентах откровенно слабо получилось.
@VladilenMinin
@VladilenMinin 3 місяці тому
Предложения?
@user-dn5gk7cb5v
@user-dn5gk7cb5v 3 місяці тому
@@VladilenMininлично для себя открыл много нового)спасибо. А так даже хоть топ контент запилишь всегда будут те, которые будут недовольны, это нормально. Невозможно угодить всем
@rvoskanyan
@rvoskanyan 3 місяці тому
А конкретика где? Вода, а не комментарий - ни чего по существу.
@paul.inglsmit
@paul.inglsmit 3 місяці тому
Это называется инженерия)
@mihinov
@mihinov 3 місяці тому
Не хочу обидеть автора комментария, но на готовых словах русского языка откровенно слабо получилось, одна вода, без конкретики
@user-bo2fn9ye6b
@user-bo2fn9ye6b 21 день тому
ты когда скачешь между страницами помни что ты это делаешь не для того что бы тебе было видно и понятно а что бы было понятно нам. а если ты ведешь себя как муда к после того как написал строчку сразу перескакиваешь на страницу смотреть ты забываешься. не нужно быть мудаком
@sanya_s_parmezana
@sanya_s_parmezana 3 місяці тому
Шляпа полная 😂😂
@user-ub5yg5sf6z
@user-ub5yg5sf6z 3 місяці тому
Такой хороший) Так заманивает))
@VladilenMinin
@VladilenMinin 3 місяці тому
🤝
50 вопросов на React JS собеседование
52:45
Владилен Минин
Переглядів 328 тис.
Get a knife! | Standoff 2
01:06
Standoff 2 Live
Переглядів 1,5 млн
Teenagers Show Kindness by Repairing Grandmother's Old Fence #shorts
00:37
Fabiosa Best Lifehacks
Переглядів 30 млн
I Made A Browser Game
14:17
Clumsy Jackdaw
Переглядів 136
FRONTEND: Мифы и Реалии рынка труда
34:43
Владилен Минин
Переглядів 39 тис.
Как учиться в переизбытке информации
33:55
Владилен Минин
Переглядів 10 тис.
Про  __proto__ и prototype на практике
31:44
LN Master
Переглядів 4,8 тис.
РАБОТАЙ МЕНЬШЕ: Как достичь цели за 2-4 часа в день
21:18
TypeScript in React - COMPLETE Tutorial (Crash Course)
53:21
ByteGrad
Переглядів 178 тис.
Топ 10 ИИ каждый программист должен знать
22:46
Владилен Минин
Переглядів 22 тис.
React Hooks - Полный Курс (Про Все Хуки в 1 видео!)
1:47:00
Владилен Минин
Переглядів 433 тис.
Идеальный результат программирования
6:23
Миша Ларченко
Переглядів 10 тис.