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

[@kanadqaspb1467]

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

[@arhfallen6792]

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

[@vladyslavpastushenko4871]

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

[@evdokimova-olga]

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

[@tamerlanabdibek8237]

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

[@WebCademy]

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

[@VideosFromNorway]

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

[@WebCademy]

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

[@evgeniilewicki5874]

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

[@othersidesss1]

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

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

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

[@Ilgiz1973]

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

[@Danze_lite]

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

[@christianspace9700]

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

[@DenisK-to8lf]

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

[@arturdauzvardas3112]

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

[@typicalperson6135]

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

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

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

[@DmitryKuznetsov-d7w]

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

[@leonpiter]

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

[@Sacar666]

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

[@Polpa-r9u]

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

[@kova_hi5605]

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

[@Edgar-pu1lc]

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

[@maksimangerman6238]

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

[@web-constcode6252]

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

[@ocheretnyi]

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

[@VictorSitro]

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

[@LuckyBoy-id1xr]

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

[@aktotuttttt]

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

[@benchik100]

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

[@OlegGuitar]

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

[@Danze_lite]

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

[@GrigoriyTv]

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

[@daniyar2975]

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

[@sdasdxsaxsa]

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

[@alexx_2023]

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

[@vaspurakavdalian1133]

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

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

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

[@ВладиславСоломаха]

Юрий, спасибо Вам огромное за такой контент!!! Для новичков как раз то что нужно!!!!

[@raminramazanov4355]

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

[@UchimVmeste.]

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

[@lexusgt]

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

[@WebCademy]

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

[@UchimVmeste.]

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

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

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

[@nikomunikabelen8540]

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

[@mikzibrov]

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

[@WebCademy]

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

[@olgak.1823]

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

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

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

[@Amberstargazerofearth]

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

[@useruseroff6605]

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

[@MrTopolevsky]

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

[@kristenaidan4567]

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

[@denhost5033]

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

[@servera-center]

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

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

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

[@Imnefrr]

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

[@WebCademy]

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

[@volodymyrkomunitsky567]

Thank you very much. GREAT JOB!

[@web_codz]

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

[@Max-tepl]

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

[@hozaeva_shorts]

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

[@LeraGo-t3z]

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

[@tatsianavaleri]

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

[@luchi_m]

Спасибо огромное за такой урок! Очень полезные и приятные видео) Сейчас много изменений из-за новой версии React Router DOM(v6) так что вот еще один из вариантов реализовать прокрутку при переходе на другую страницу import { useEffect } from "react"; import { useLocation } from "react-router-dom"; export default function ScrollToTop() { const { pathname } = useLocation(); useEffect(() => { // "document.documentElement.scrollTo" is the magic for React Router Dom v6 document.documentElement.scrollTo({ top: 0, left: 0, behavior: "instant", // Optional if you want to skip the scrolling animation }); }, [pathname]); return null; }

[@HyndoDristalix14]

Дякую

[@mikzibrov]

Круто. Опробовал. Работает =)

[@simpleview1433]

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

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

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

[@ridge_crm]

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

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

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

[@erkanat_iman]

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

[@oksara33]

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

[@Duh280]

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

[@MrGreenman02]

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

[@nikolajlesnikov6381]

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

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

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

[@Noname__name]

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

[@WebCademy]

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

[@LookovVR]

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

[@WebCademy]

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

[@ismo2286]

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

[@dina8700]

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

[@WebCademy]

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

[@pavelillich7612]

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

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

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

[@Grigoren_com]

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

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

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

[@justkrem7764]

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

[@maryouchie]

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

[@luchi_m]

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

[@justkrem7764]

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

[@justkrem7764]

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

[@ivanello74]

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

[@lilrock6734]

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

[@3dportableinc64]

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

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

Thanks you, very good content!

[@smotritelyoutube]

Пушка-бомба

[@Izobeat-t7f]

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

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

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

[@dimkanevidimka]

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

[@yaroslavmuss]

Спасибо за урок! Какая у вас тема в vscode?

[@WebCademy]

Ayu

[@mushroom2267]

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

[@haibova_irisha]

привет ) а Вы не праниуете создать прект на redux , RTK ? спасибо большое

[@reactdeveloper2961]

Спасибо!

[@aleksandrprokudin4715]

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

[@aleksandrprokudin4715]

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

[@WebCademy]

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

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

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

[@АлиР-з1к]

Азан на заднем фоне? Где дислоцируешься?)

[@УланБаястанович]

Большое спасибо! Почему у вас нету доступа к вашим платным курсам из Кыргызстана? На анкете в вашем сайте не могу указать номер Кыргызстана. Хотел бы купить у вас полноценный курс по фронтэнд.

[@svloex]

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

[@cedrum8757]

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

[@olegonkos]

можете пожалуйста объяснить зачем переносить проект на React JS? Какие выгоды? Можно ведь Свёрстанный сайт натянуть на CMS. Для чего нам React JS?

[@WebCademy]

React это библиотека для frontend разработки. Если сайт отдает данные по API то мы можем получить их через JS и вставить в разметку. Например WordPress имеет API и можно делать на нем сайты не в шаблонах с PHP кодом, а сделать frontend приложение и получать данные по API.

[@ВасилийДимитров-с9с]

Привет,а как можно ли объединить ключи в объектах(есть 5 вариантов ответов на вопрос,человек нажимает на любой из них и каждый ключ увеличивает свое значение на 1)(есть допустим ключи a,b,c,d,e и вот человек нажал на любой ответ и счетчик во всех ключах перешел от 0 до 1)?

[@АнатолийПай-о3т]

Подскажите пожалуйста как вы сделали большие отступы на боковой панели vs code?

[@WebCademy]

Никак. Если только специально в дебри настроек не лезть, не знаю если ли там такой конфиг.

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

держи комент брат