Сайт портфолио на React JS урок для новичков. Базовый вводный курс в React для начинающих

[@kanadqaspb1467]

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

[@timskiwolf]

Юрий, вы человечище! Спасибо большое все понятно и красиво, один из лучших контентов в ютубе на тему фронта)

[@WebCademy]

Спасибо, осталось добавить тайм коды и будет вообще 🔥

[@evdokimova-olga]

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

[@VideosFromNorway]

Спасибо!Крутой видос!Это мой первый опыт с React!Но мне уже нравиться!Благодаря таким видео желание продолжать учиться не пропадает а наоборот растет!Спасибо большое!Очень хотелось бы увидеть у вас курс по React!Ещё раз огромное спасибо за то что обучаете людей!

[@WebCademy]

Спасибо за комментарий!) Да, надо подумать над мини курсом по React на канал.

[@ДаниярМирюсупов]

Юрий смотрю ваши уроки давно, объясняете очень хорошо. Практика на высоте, спасибо мастер Шифу!

[@web-constcode6252]

О, круто. Давно хотел изучить React. Жги, Юра!

[@othersidesss1]

Юра, спасибо огромное! Классно обьясняешь..давайте еще что-то по реакту на часов 5-6) по-жа-луй-ста) сам же видишь такого рода видосы популярны...как например JS за 6 часов..такие видосы помогут раскрутке канала..

[@Ilgiz1973]

Очень полезный урок по Реакту. Грамотно и понятно все показано и рассказано. Спасибо!

[@arturdauzvardas3112]

Юрий вообще МОЛОДЕЦ!!! Учу React по его урокам. Все доходчиво. Спасибо огромное!!!

[@ВасилийТеркин-л4з2ф]

Юрий, спасибо, очень полезный урок для начинающих изучать React!

[@Danze_lite]

Жесть конечно, вы просто невероятный человек, спасибо вам большое ! На одном дыхании повторил весь урок. Вы познакомили меня с реактом с нуля)

[@Sacar666]

офигенный урок по Реакту, впервые все так прозрачно и понятно) Спасибо огромное, теперь бы еще получать данные из бд, а не переменной будет вообще пожар)

[@Polpa-r9u]

Редко такое, чтобы я по своей воле писал комментарий, да еще и положительный. Тот случай когда неудержаться) С первых минут поставил лойз и далее не был разочарован. Посмотрел полностью как фильм) Первое знакомство и с React и с каналом ВебКадеми. Супер подача для чайников, все понятно. Надеюсь в будущем будет больше ваших туториалов с таким внятным донесением информации 👍🏼

[@typicalperson6135]

Спасибо вам огромное! Мне понравилось как вы объясняете. Чоң рахмат!

[@christianspace9700]

Большое спасибо! Благодаря вам перенес на реакт свой сайт портфолио и дополнил его функциональность!

[@DenisK-to8lf]

У Вас случайно данного макета из видео не осталось?

[@aktotuttttt]

Пушка-гонка, Юрий! Давай вот такого побольше и почаще! Погнали заделаем сервис по билетам, отелям, бронированию машин на React+Redux+TS будет бомба!

[@arhfallen6792]

Так...В целом видео очень хорошее и дает представление новичку как можно перейти на реакт. Главное повторять за автором шаг за шагом и внимательно слушать что он говорит. Ну, а если такой подход к разработке зайдет, то можно и глубже в реакт погружаться. Если несколько советов из личного опыта касательно этого видео: - не используйте CRA, В рамках одного видео, для понимания, да, можно. Если погружаться дальше в разработку, то используйте Vite(к примеру). CRA больше не поддерживается, у него нет обновлений, а значит и могут быть проблему с установкой новых модулей и уязвимостью. - импортирование функции работает и когда файл с ней закрыт. Главное чтобы экспорт был прописан, а откуда ее взять vscode сам знает. К тому же не обязательно перед использованием фукнции или хука, его импортировать руками. Можно просто начать писать useState к примеру и после введения use, IDE уже сама вам начнет предлагать варианты импорта - это называется реакт фрагмент и если говорить простым языком, то он дает понять компилятору реакта, что разметка которую вы в него помещаете, будет являться частью какого-то другого блока. Это очень удобно при разработке универсальных компонентов или частей интерфейса - browserRouter лучше использовать в корневом файле, т.е main.js. Если у вас в приложении будет несколько Routes, то не придется browserRouter прописывать для каждого. К примеру эту ситуация может возникнуть когда у вас есть шапка, навигационное меню в личном кабинете или на выдаче товаров. Нужно стараться избегать дублирования кода....ну а если как в примере, то можно и так как показано делать. В документации кстати указаны оба варианта, значит можно - для реакта лучше использовать css модули, они позволяют более гибко жонглировать стилями и не создавать лишних переменных, но это опять же...ситуативно.

[@vladyslavpastushenko4871]

Спасибо за информацию. Приятно видеть такие советы когда ты новичок

[@АнтонРождественский-о4ь]

Повторять тоже не советую, лучше посмотреть потом самому сделать

[@arhfallen6792]

@@АнтонРождественский-о4ь Посмотреть и потом сделать самому, это уже следующая стадия обучения) На ней все советы которые я писал выше, уже не актуальны должны быть) Для новичка нормально смотреть и повторять, главное делать это вдумчиво и понимать что делаешь (хотя бы приблизительно)

[@ocheretnyi]

Руки еще не дошли до react, видео очень клёвое. Суть одна это веб компоненты)

[@Edgar-pu1lc]

Самый лучший канал на русском ютубе по таким роликам,очень хорошо объясняете,спасибо большое

[@VictorSitro]

классный подход и подача материала + готовый проект для разбора. спасибо!!

[@maksimangerman6238]

Юрий , выражаю Вам огромную благодарность 😁

[@DmitryKuznetsov-d7w]

Спасибо вам за этот урок теперь я понял как нужно переносить вёрстку и работать с ней в react.

[@LuckyBoy-id1xr]

Спасибо большое! Очень рад, что просмотрел этот урок!

[@evgeniilewicki5874]

Решил просто посмотреть как пишут на React и вдруг осознал как лучше писать на Blazor. Благодарствую. Кстати урок интересный мне понравился и как абсолютно не знающему React был понятен.

[@leonpiter]

Нельзя такое видео оставить без комментария. Спасибо огромное за такой подробный урок.

[@OlegGuitar]

Спасибо! Почти всё понял несмотря на то, что не смотрел предыдущий урок)

[@GrigoriyTv]

Очень классный урок, все очень понятно, вы ооооооочень круто объясняете, спасибо вам, продллжайте снимать React.

[@alexx_2023]

Благодарочка от души за такую понятную подачу материала!👍👍👍 Я после платных курсов по фронтенд, наконец-то доделал резюме, вспомнил реакт😄🤝

[@benchik100]

Спасибо! это первое видео по которому я изучаю React! Именно его мне посоветовали для старта! 🤘

[@daniyar2975]

Юра, спасибо огромное! Классно обьясняешь..давайте еще что-то по реакту на часов 5-6).Отличный урок хотя бы смог запустить и многое понять!

[@kova_hi5605]

После этого урока, я понял, как важно иметь порядок в файлах со стилями)

[@Danze_lite]

Спасибо большое за ваш труд, безумно полезно. Вы супер пупер)

[@vaspurakavdalian1133]

Маестро благодарю! Классно объясняешь..давайте еще что-то по REACT на часов 5-6 please сам же видишь такого рода уроки популярны...как например JS за 6 часов..такие уроки помогут раскрутке канала..

[@sdasdxsaxsa]

только с твоими уроками я начал понимать JS , лучший!!!

[@Amberstargazerofearth]

Просто и доходчиво. Так и надо! Лайк

[@ИринаЛевченко-е9и]

спасибо большое, много полезной инфы, которая пригодится в будущем

[@Дмитрий-г7я7п]

Отличное обьяснение для новичка, автору спасибо!

[@hozaeva_shorts]

Новый уровень. Поздравляю!

[@nikomunikabelen8540]

Спасибо за урок. Как всегда, все максимально понятно!

[@raminramazanov4355]

Лучший, объясняй так по подробнее дальше

[@Max-tepl]

Должно быть пушка, щас заценим 👍

[@useruseroff6605]

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

[@olgak.1823]

Спасибо огромное за урок! Всё очень понятно и доступно для новичка.

[@tatsianavaleri]

Супер!!! Все доступно и понятно , спасибо!!!

[@mikzibrov]

Замечательные уроки, курсы, прям вот получаю удовольствие от разработки. Единственно хотелось бы попросить, ну будущее при монтаже видео уменьшать звук включения заставки ВебАкадеми на оранжевом фоне. Когда смотришь в наушниках это прям врезается на фоне голоса Юры. Пожалейте слух своих подписчиков =)

[@WebCademy]

Спасибо, приму к сведению.

[@SeregaKim-dk7gl]

Это великолепно. Спасибо

[@simpleview1433]

очень ценный урок, спасибо тебе бро

[@UchimVmeste.]

React router dom очень хорошее объяснение. 👍

[@ЭрланМирзаматов-с7и]

Спасибо Огромное за такой Видеоурок, нашел ответы на многие свои вопросы 👍👍👍

[@salimov-dev]

Cпасибо, Юрий! Крутой контент!

[@web_codz]

Спасибо за видео! Так классно объясняете! Все понятно!

[@MrGreenman02]

спасибо Юрий за урок!)

[@UchimVmeste.]

Я предпочитаю картинки держать в public , чтобы не было столько заморочек с их импортами. А так респект👍

[@MrTopolevsky]

Спасибо! Полезный урок! Просьба сделать урок по Next.js

[@jin_drew]

Спасибо за видео!

[@kristenaidan4567]

Юрий, спасибо за годный контент) Из пожеланий хотелось бы, чтобы в проекты на React вы добавляли и typescript. Так как без typescript сейчас в работе никуда. Он везде требуется.

[@lexusgt]

Спасибо! Надеюсь ролик не удалите, т.к. планирую к нему обращаться еще не раз ))

[@WebCademy]

Ролик будет на канале 👍

[@denhost5033]

Очень крутой контент для новичка!!! Еще было бы интересно как реализовать на реакт модальные окна (с разными вариантами: вызов формы связи, открытие картинок в отдельной модалке, и модалка в нутри модалки), так же интересно было бы посмотреть реализацию форм связи, и третья идея для урока это добавление стилей через "modul" (думаю поняли о чем я...... когда реакт автоматом генерирует уникальные стили). Спасибо за видео!!!

[@servera-center]

Думается написать свое можно)

[@LeraGo-t3z]

Спасибо Вам большое! Огромный труд!

[@ВадимЛюманов]

Видео годное. По поводу файловой структуры - имхо можно было бы использовать модульный css в файлах компонентов, чтобы компонент был независимым и никакой другой разработчик случайно не переопределил стили этого компонента и не сломал дизайн. Но эти решения для больших проектов, где пилят несколько девелоперов. Все дело в уникальности названий классов, потому что правила для класса с тем же именем, следующие ниже в общем css, переопределят верхние правила - и все поломается.

[@volodymyrkomunitsky567]

Thank you very much. GREAT JOB!

[@ПавелАтаманюк-о8п]

Смотрю ваши уроки с удовольствием, объясняете очень хорошо. Огромное спасибо! (Ссылка на сайт школы битая ....)

[@Duh280]

Спасибо! Было интересно!)))

[@dmitrym840]

Спасибо за такой урок

[@erkanat_iman]

Спасибо, грамотно и понятно!

[@КристинаРевякина-я7ч]

Спасибо большое за полезный урок 💕

[@АзаматКанатбеков-п3х]

Спасибо большое за ролик 👍👍👍, было бы круто если показали как работает реакт с бэкендом

[@nikolajlesnikov6381]

Спасибо, хороший урок.

[@oksara33]

Єдине відео, де все чітко зрозуміло.

[@ismo2286]

Благодарен вам за ваш труд

[@Grigoren_com]

оооо! вот это - то что нужно!!!

[@ТихонШкитов]

Спасибо за контент!

[@МахабатБактыбеккызы-т7д]

спасибо за уроки 😉

[@3dportableinc64]

30 лет назад придумали инсталяторы и батники . Но до сих пор юзаем командную строку полчаса для установки программ:)

[@Noname__name]

Жаль что я не к вам в школу пошел)уже бы выучил и разобрал все)

[@WebCademy]

Жаль) Приходите к нам.

[@andriitopii]

слетают стили css в navbar немогу понять почему. когда в NavLink className пишу эту функцию ({isActive}) => isActive ? activeLink : normalLink} все стили перестают роботать если убераю эту конструкцию все роюотает. 1:50:37 время видео

[@pavelillich7612]

Спасбо за урок

[@ivanello74]

Спасибо Огромное!!Класс

[@lilrock6734]

Круто!!! Спасибо!!!

[@justkrem7764]

Спс за урок! Думал что все же сделаешь в конце кнопку загрузки файла CV (хотя уже сам сделал, минутное дело оказалось). P/S А я вот все никак не мог привыкнуть к твоему стилю некотрых названий, я про повторяющийся project.js и style.css Ну то такое поменял под себя чтобы не путаться.

[@maryouchie]

Подскажите, как вы сделали кнопку загрузки СV? Как раз пытаюсь сделать ее и никак не получается :(

[@luchi_m]

У кого-то получилось? А то я тоже не могу разобраться

[@justkrem7764]

@@maryouchie ток увидел, да там же просто линк на тег a повесить нужно! Я cv разместил на гугл диске и вписал линк уже на версию загрузки(как такой делается можно нагуглить)

[@justkrem7764]

@@luchi_m ответил комментом выше

[@mushroom2267]

Кто-нибудь может подсказать как присваивается isActive? Что-то не получается разобраться

[@Imnefrr]

Как человек, который играл на концертах в барах, могу сказать: 6:01 - у нас есть специальные наушники потому что ты ходишь по концерту и можешь плохо слышать себя,они заглушают всё, и ты слышишь только себя. Они работают как затычки фактически. Что касается того, что он был не заинтересован в скорой помощи - да, это уже пофигизм. Про поднятие охраны: возможно, человека уже спасали, и поэтому он начал говорить «еее» одновременно как часть шоу и как подтверждение, типа «молодцы». Насчёт бита: на большинстве концертов всегда играют минусовку или какую-то песню, чтобы людям не было скучно. (Не за все говорю)

[@WebCademy]

Спасибо за комментарий. Думаю вы писали его к другому ролику.

[@justkrem7764]

01:42:30 Когда вылаживаешь на хостинг проект он почему-то не загружает сразу верстку главной страницы, т.е. в приходит только , при этом локально все норм работает, переключения по пунктам тоже, в чем дело может быть подскажите плиз?!

[@andrewreich5902]

Подскажи, ты решил данную проблему?

[@justkrem7764]

@@andrewreich5902 Решил. Не любой хостинг подходит.На gitPage, Netlify не работает, на versel норм. работает

[@andrewreich5902]

@@justkrem7764 это тебе и помогло с проблемой 404? Если там другое решение, подскажи пожалуйста

[@andrewreich5902]

@@justkrem7764 у меня всё работает, но только стоит обновить страницу, как сразу 404

[@justkrem7764]

@@andrewreich5902 У меня все норм работает, ошибок нет, портфолио по этой работе уже изменил под себя.

[@Izobeat-t7f]

Отличный урок

[@LookovVR]

Спасибо! Кстати, на винде видео были гораздо плавнее и смотрибельнее)

[@WebCademy]

Не сразу заметил. Но недавно заморочился по этому поводу. Это настройки качества записи. Сейчас подкрутил, чтобы цвета были поярче. В новых исправлю.

[@ДмитрийПень]

Thanks you, very good content!

[@darinashin9579]

При команде npm start, во время открытия приложения, терминал выдает npm : The term 'npm' is not recognized as the name of a cmdlet, function, script file, or operable program. Кто может подсказать, как решить вопрос?

[@WebCademy]

А node JS установлен? Попробуйте после его установки перезапустить систему. Работаете от аккаунта админа или с ограниченными правами?

[@WebCademy]

Посмотрите первый ответ stackoverflow.com/questions/20992723/npm-is-not-recognized-as-internal-or-external-command-operable-program-or-bat

[@МахабатБактыбеккызы-т7д]

ну ты малчик гигант

[@ЯўгенГурыновіч]

А как же выложить сайт на реакте для всеобщего обозрения???

[@maksimangerman6238]

Ищем бесплатный хостинг и деплоим)

[@Beksdom_YT_TT]

Например GitHub,

[@Паша-ы9й8щ]

GitHub подойдёт?

[@ЯўгенГурыновіч]

@@Паша-ы9й8щ допустим я сделал сайт для барбершопа, то выставить его на гите с доменными именем гита

[@dimendroider7550]

​@@Паша-ы9й8щ на GitHub Pages в принципе можно выкладывать готовую сборку, грубо говоря только готовый html, css, js. Но сайт лучше деплоить на какой-либо бесплатный хостинг например Vercel

[@smotritelyoutube]

Пушка-бомба

[@dina8700]

Спасибо за ваши уроки, они прекрасны и по содержанию, и по подаче! По данному уроку возник вопрос, будет ли работать трюк с local storage на мобильных устройствах? И вообще возможно ли реализовать подстройку под системную тему пользователя без local storage?

[@WebCademy]

@@dina8700 Спасибо) На мобилках работать будет. local storage здесь нужен только чтобы запомнить выбор пользователя. Можно и без него обойтись и по умолчанию включать системную тему.

[@shinilla]

подскажите ,а откуда брать описание проектов 1:14:22

[@077qoj]

Спасибо!

[@dimkanevidimka]

Подскажите, пожалуйста, название темы в VSC.

[@justkrem7764]

Если есть возможность ответить автору или кто делал проект по данному уроку, как правильно выкладывать его на gitPage или хостинг, я то знаю как это делается с обычными верстками, Gulp-сборками, но с этим возникли нюансы, выложить его то смог - но открывается он почему-то с пустой страницы и при перезагрузки страницы появляется ошибка 404! Что-то с путям наверное, но не пойму как правильно сделать. P/S Уже разобрался

[@andrewreich5902]

Привет, у меня та же проблема. Подскажи пожалуйста в чем проблема была?😢

[@sirdi1318]

Всем привет! Ребят тоже проблема с выкладкой проекта в гит. При первом переходе по ссылке, основная часть сайта белая (пока не выберешь любую из вкладок) но если обновить страницу с любой из вкладок, то вылетает ошибка 404.

[@Андрей-ф5м9л]

@@sirdi1318 аналогичная проблема. Получилось исправить????

[@gidden90]

@@sirdi1318 , привет, как исправил данную проблему? там ошибка в консоле что то в Localstorage пишет

[@gidden90]

привет, подскажи в чем дело было и как разобрался?

[@КамильКиров-щ9у]

Обьясните пожалуйста как работает isActive на смене классов при переходе по другим ссылкам, это встроенный метод у React или что?

[@Пользователь-ю3ч5м]

у меня меняется только 1 раз раз темная и один раз светлая тема. с чем это связано?

[@cedrum8757]

Юрий подскажите пожалуйста по переносу строку кода, у вас код к примеру тэги li идут в одну строку, а у меня форматирует их с переносом, я пытался настраивать претьер на большую ширину строки но это не сработало. Как сделать чтобы не было лишних переносов ?

[@svloex]

если установить create-react-app глобально, то пакеты будут той версии, которую мы установили при create-react-app и через некоторое время при запуске create-react-app у нас будут не свежие пакеты а те что когда то мы сохранили глобально ?

[@aleksandrprokudin4715]

Юрий, огромное спасибо за работу! такой вопрос: светлая и темная темы не работают на странице Хоум. Где искать ошибку?

[@aleksandrprokudin4715]

Ошибся, все работает, сорри)

[@WebCademy]

@@aleksandrprokudin4715 Уже хотел, что надо смотреть в консоли, есть ли ошибки там. Но вы уже написали что все в порядке. 👍