Сайт портфолио на React JS урок для новичков. Базовый вводный курс в React для начинающих
Vložit
- čas přidán 20. 06. 2024
- Создание многостраничного сайта на React JS. Подробный урок с объяснениями для новичков. ↓↓↓ Файлы к уроку и тайм-коды ниже в описании ↓↓↓
Создаем сайт Портфолио на React JS. Как установить react, создать приложение create react app, как очистить проект от ненужных файлов. Несколько страниц с использованием React Router Dom. Properties пользовательские свойства (просы / props) в React компонентах. Состояние в компонентах, хуки useState, useEffect. Написание своего хука useLocalStorage. Темная тема для сайта. Базовый курс по основам React для новичков.
Материалы к уроку: webcademy.ru/blog/952/
Первая часть с версткой: • HTML CSS адаптивная ве...
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Бесплатный курс "Создай свой первый сайт на HTML5 и CSS3"
От установки редактора, до публикации в сети.
👉 Получить уроки, конспекты, макет и код из уроков: webcademy.ru/htmlsite/
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Курс по созданию и верстке сайтов: webcademy.ru/htmlstart/
Обучение с наставником, 3 месяца, результат, гарантия.
Научим создавать веб-сайты и зарабатывать на этом.
Старт обучения: 01 Июля 2024 года.
💻 Курс "Frontend разработчик. JavaScript + React": webcademy.ru/jscourse/
Обучение с наставником, 3 месяца, результат, гарантия.
Старт обучения: 08 Июля 2024 года.
💻 Курс "Разработка сайтов на PHP + MySQL":
webcademy.ru/phpcourse/
Создание сайтов с системой управления.
Присоединиться к курсу можно прямо сейчас.
🏁 Обучение с нуля
💁♂️ Обучение с наставником
🎯 Доведение с нуля до результата
🏢 Помощь с трудоустройством
💵 Поможем взять первый заказ на фрилансе
💳 возможна рассрочка
💳 если курс не понравится, вернём деньги в первую неделю
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💈 Сайт школы ВебКадеми: webcademy.ru/
💈 Вступайте в группу Вконтакте: webcademy
💈 Подписывайтесь на Telegram: t.me/webcademynews
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Тайм-коды и код к уроку
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Материалы к уроку: webcademy.ru/blog/952/
00:00 Обзор проекта
00:50 Обзор готовой верстки
03:32 Установка Node JS
05:13 Установка create-react-app
08:34 Создание react приложения
10:20 Запуск react приложения
11:45 Изучение JS. Информация о курсе
12:24 Файлы стартового CRA приложения
17:42 Что такое компонент, на примере компонента App
23:25 Удаляем ненужные файлы из приложения
26:35 Перенос верстки главной страницы
37:25 Создание отдельных компонентов
38:05 Компонент Navbar
43:18 Компонент Header
50:00 Компонент Footer
52:35 Компонент Home для главной страницы
0:56:55 Страница с проектами
1:01:50 Страница с контактами
1:03:40 Правка sticky footer
1:07:29 Карточка с проектом. Отдельный компонент
1:11:29 Данные по проектам в отдельном файле
1:16:31 Подключаем файл с данными по проектам
1:21:32 Свойства компонента. Передача и использование
1:24:02 Вывод всех проектов через map
1:26:11 Recancellation алгоритм
1:29:39 Страница для отдельного проекта
1:33:11 Компонент для кнопки GitHub
1:36:45 Многостраничность для сайта
1:37:30 Установка react-router-dom
1:38:55 Исправление ошибок
1:40:33 Подключение роутера, маршруты для страниц
1:44:57 Добавление ссылок на страницы в Navbar. NavLink
1:48:50 Выделение активной ссылки
1:52:00 ScrollToTop при переходе между страницами
1:54:55 Параметры в роутере. Страницы для проектов
2:04:14 Ссылки на страницы с проектами
2:08:54 Отдельный компонент для кнопки с ночной темой
2:13:55 Отслеживание клика по кнопке
2:16:14 Состояние для темной темы
2:19:05 Изменение состояния
2:20:50 Изменение состояния на противоположенное
2:23:00 Добавление класса к body и кнопке. Хук useEffect
2:27:40 useRef для работы с кнопкой
2:32:26 Работа с localStorage. Кастомный хук useLocalStorage
2:41:15 Определение системных настроек темной темы
2:47:26 Прослушка изменения системных настроек с темой
2:50:20 Итог по функционалу кнопки btnDarkMode
2:51:50 Избавляемся от useRef в btnDarkMode
2:55:00 Фикс замечаний в консоли
2:56:10 Финал
О, круто. Давно хотел изучить React. Жги, Юра!
Юрий, спасибо Вам огромное за такой контент!!! Для новичков как раз то что нужно!!!!
Спасибо! это первое видео по которому я изучаю React! Именно его мне посоветовали для старта! 🤘
Спасибо огромное за урок! Всё очень понятно и доступно для новичка.
Спасибо за урок. Как всегда, все максимально понятно!
Юрий вообще МОЛОДЕЦ!!! Учу React по его урокам. Все доходчиво. Спасибо огромное!!!
Юрий, спасибо, очень полезный урок для начинающих изучать React!
только с твоими уроками я начал понимать JS , лучший!!!
Юрий смотрю ваши уроки давно, объясняете очень хорошо. Практика на высоте, спасибо мастер Шифу!
Новый уровень. Поздравляю!
классный подход и подача материала + готовый проект для разбора. спасибо!!
Большое спасибо! Благодаря вам перенес на реакт свой сайт портфолио и дополнил его функциональность!
Юрий , выражаю Вам огромную благодарность 😁
Спасибо, это видео буквально спасло меня от депрессии)) когда я застопорилась на некоторых моментах.
Очень полезный урок по Реакту. Грамотно и понятно все показано и рассказано. Спасибо!
Спасибо большое! Очень рад, что просмотрел этот урок!
Пушка-гонка, Юрий! Давай вот такого побольше и почаще! Погнали заделаем сервис по билетам, отелям, бронированию машин на React+Redux+TS будет бомба!
Отличное обьяснение для новичка, автору спасибо!
Впервые за три года изучения нашел видео ролик, в котором все подробно и понятно описано. С помощью вашего видео я понял что такое React. Надеюсь в будущем увидеть еще ваши видео по React разработки!
Спасибо! Почти всё понял несмотря на то, что не смотрел предыдущий урок)
Должно быть пушка, щас заценим 👍
Юра, спасибо огромное! Классно обьясняешь..давайте еще что-то по реакту на часов 5-6) по-жа-луй-ста) сам же видишь такого рода видосы популярны...как например JS за 6 часов..такие видосы помогут раскрутке канала..
Самый лучший канал на русском ютубе по таким роликам,очень хорошо объясняете,спасибо большое
Спасибо Вам большое! Огромный труд!
Спасибо за видео! Так классно объясняете! Все понятно!
Спасибо Огромное за такой Видеоурок, нашел ответы на многие свои вопросы 👍👍👍
Спасибо вам огромное!
Мне понравилось как вы объясняете. Чоң рахмат!
Редко такое, чтобы я по своей воле писал комментарий, да еще и положительный. Тот случай когда неудержаться) С первых минут поставил лойз и далее не был разочарован. Посмотрел полностью как фильм) Первое знакомство и с React и с каналом ВебКадеми. Супер подача для чайников, все понятно. Надеюсь в будущем будет больше ваших туториалов с таким внятным донесением информации 👍🏼
Спасибо вам за этот урок теперь я понял как нужно переносить вёрстку и работать с ней в react.
Юрий, вы человечище! Спасибо большое все понятно и красиво, один из лучших контентов в ютубе на тему фронта)
Спасибо, осталось добавить тайм коды и будет вообще 🔥
Очень классный урок, все очень понятно, вы ооооооочень круто объясняете, спасибо вам, продллжайте снимать React.
офигенный урок по Реакту, впервые все так прозрачно и понятно) Спасибо огромное, теперь бы еще получать данные из бд, а не переменной будет вообще пожар)
Отличный видеоурок спасибо огромное!
Cпасибо, Юрий! Крутой контент!
Нельзя такое видео оставить без комментария. Спасибо огромное за такой подробный урок.
Руки еще не дошли до react, видео очень клёвое. Суть одна это веб компоненты)
спасибо большое, много полезной инфы, которая пригодится в будущем
Супер!!! Все доступно и понятно , спасибо!!!
Спасибо большое за полезный урок 💕
Жесть конечно, вы просто невероятный человек, спасибо вам большое ! На одном дыхании повторил весь урок. Вы познакомили меня с реактом с нуля)
Спасибо большое за урок! Все понятно и просто )
Юра, спасибо огромное! Классно обьясняешь..давайте еще что-то по реакту на часов 5-6).Отличный урок хотя бы смог запустить и многое понять!
Так...В целом видео очень хорошее и дает представление новичку как можно перейти на реакт. Главное повторять за автором шаг за шагом и внимательно слушать что он говорит. Ну, а если такой подход к разработке зайдет, то можно и глубже в реакт погружаться. Если несколько советов из личного опыта касательно этого видео:
- не используйте CRA, В рамках одного видео, для понимания, да, можно. Если погружаться дальше в разработку, то используйте Vite(к примеру). CRA больше не поддерживается, у него нет обновлений, а значит и могут быть проблему с установкой новых модулей и уязвимостью.
- импортирование функции работает и когда файл с ней закрыт. Главное чтобы экспорт был прописан, а откуда ее взять vscode сам знает. К тому же не обязательно перед использованием фукнции или хука, его импортировать руками. Можно просто начать писать useState к примеру и после введения use, IDE уже сама вам начнет предлагать варианты импорта
- это называется реакт фрагмент и если говорить простым языком, то он дает понять компилятору реакта, что разметка которую вы в него помещаете, будет являться частью какого-то другого блока. Это очень удобно при разработке универсальных компонентов или частей интерфейса
- browserRouter лучше использовать в корневом файле, т.е main.js. Если у вас в приложении будет несколько Routes, то не придется browserRouter прописывать для каждого. К примеру эту ситуация может возникнуть когда у вас есть шапка, навигационное меню в личном кабинете или на выдаче товаров. Нужно стараться избегать дублирования кода....ну а если как в примере, то можно и так как показано делать. В документации кстати указаны оба варианта, значит можно
- для реакта лучше использовать css модули, они позволяют более гибко жонглировать стилями и не создавать лишних переменных, но это опять же...ситуативно.
Спасибо за информацию. Приятно видеть такие советы когда ты новичок
Спасибо!Крутой видос!Это мой первый опыт с React!Но мне уже нравиться!Благодаря таким видео желание продолжать учиться не пропадает а наоборот растет!Спасибо большое!Очень хотелось бы увидеть у вас курс по React!Ещё раз огромное спасибо за то что обучаете людей!
Спасибо за комментарий!) Да, надо подумать над мини курсом по React на канал.
Спасибо большое за ваш труд, безумно полезно. Вы супер пупер)
спасибо Юрий за урок!)
Просто и доходчиво. Так и надо! Лайк
Маестро благодарю! Классно объясняешь..давайте еще что-то по REACT на часов 5-6 please сам же видишь такого рода уроки популярны...как например JS за 6 часов..такие уроки помогут раскрутке канала..
очень ценный урок, спасибо тебе бро
Благодарочка от души за такую понятную подачу материала!👍👍👍 Я после платных курсов по фронтенд, наконец-то доделал резюме, вспомнил реакт😄🤝
Благодарен вам за ваш труд
Спасибо! Было интересно!)))
Лучший, объясняй так по подробнее дальше
оооо! вот это - то что нужно!!!
Спасибо за контент!
Спасибо, грамотно и понятно!
Юрий, спасибо за годный контент) Из пожеланий хотелось бы, чтобы в проекты на React вы добавляли и typescript. Так как без typescript сейчас в работе никуда. Он везде требуется.
Круто!!! Спасибо!!!
Спасибо Огромное!!Класс
Thank you very much. GREAT JOB!
Отличный урок
спасибо за уроки 😉
Спасибо большое за ролик 👍👍👍, было бы круто если показали как работает реакт с бэкендом
Спасибо! Полезный урок! Просьба сделать урок по Next.js
Очень крутой контент для новичка!!! Еще было бы интересно как реализовать на реакт модальные окна (с разными вариантами: вызов формы связи, открытие картинок в отдельной модалке, и модалка в нутри модалки), так же интересно было бы посмотреть реализацию форм связи, и третья идея для урока это добавление стилей через "modul" (думаю поняли о чем я...... когда реакт автоматом генерирует уникальные стили). Спасибо за видео!!!
Думается написать свое можно)
Видео годное. По поводу файловой структуры - имхо можно было бы использовать модульный css в файлах компонентов, чтобы компонент был независимым и никакой другой разработчик случайно не переопределил стили этого компонента и не сломал дизайн. Но эти решения для больших проектов, где пилят несколько девелоперов.
Все дело в уникальности названий классов, потому что правила для класса с тем же именем, следующие ниже в общем css, переопределят верхние правила - и все поломается.
Спасибо! Надеюсь ролик не удалите, т.к. планирую к нему обращаться еще не раз ))
Ролик будет на канале 👍
Пушка-бомба
Thanks you, very good content!
Смотрю ваши уроки с удовольствием, объясняете очень хорошо. Огромное спасибо! (Ссылка на сайт школы битая ....)
Замечательные уроки, курсы, прям вот получаю удовольствие от разработки. Единственно хотелось бы попросить, ну будущее при монтаже видео уменьшать звук включения заставки ВебАкадеми на оранжевом фоне. Когда смотришь в наушниках это прям врезается на фоне голоса Юры. Пожалейте слух своих подписчиков =)
Спасибо, приму к сведению.
Спасибо!
Єдине відео, де все чітко зрозуміло.
Жаль что я не к вам в школу пошел)уже бы выучил и разобрал все)
Жаль) Приходите к нам.
Спасибо! Кстати, на винде видео были гораздо плавнее и смотрибельнее)
Не сразу заметил. Но недавно заморочился по этому поводу. Это настройки качества записи. Сейчас подкрутил, чтобы цвета были поярче. В новых исправлю.
ну ты малчик гигант
У вас есть видео 2 летней давности про работу с формами урок номер 15,так вот самое интересное для меня было бы автоматизировать эту форму через джанго, чтобы она стала рабочей, искал этот урок у вас, но его нету
Спс за урок! Думал что все же сделаешь в конце кнопку загрузки файла CV (хотя уже сам сделал, минутное дело оказалось).
P/S
А я вот все никак не мог привыкнуть к твоему стилю некотрых названий, я про повторяющийся project.js и style.css
Ну то такое поменял под себя чтобы не путаться.
Подскажите, как вы сделали кнопку загрузки СV? Как раз пытаюсь сделать ее и никак не получается :(
У кого-то получилось? А то я тоже не могу разобраться
@@maryouchie ток увидел, да там же просто линк на тег a повесить нужно! Я cv разместил на гугл диске и вписал линк уже на версию загрузки(как такой делается можно нагуглить)
@@luchi_m ответил комментом выше
Большое спасибо! Почему у вас нету доступа к вашим платным курсам из Кыргызстана? На анкете в вашем сайте не могу указать номер Кыргызстана. Хотел бы купить у вас полноценный курс по фронтэнд.
если установить create-react-app глобально, то пакеты будут той версии, которую мы установили при create-react-app
и через некоторое время при запуске create-react-app у нас будут не свежие пакеты а те что когда то мы сохранили глобально ?
привет ) а Вы не праниуете создать прект на redux , RTK ?
спасибо большое
30 лет назад придумали инсталяторы и батники .
Но до сих пор юзаем командную строку полчаса для установки программ:)
Привет,а как можно ли объединить ключи в объектах(есть 5 вариантов ответов на вопрос,человек нажимает на любой из них и каждый ключ увеличивает свое значение на 1)(есть допустим ключи a,b,c,d,e и вот человек нажал на любой ответ и счетчик во всех ключах перешел от 0 до 1)?
Обьясните пожалуйста как работает isActive на смене классов при переходе по другим ссылкам, это встроенный метод у React или что?
Азан на заднем фоне? Где дислоцируешься?)
держи комент брат
👍🏻
Спасибо за урок! Какая у вас тема в vscode?
Ayu
подскажите ,а откуда брать описание проектов 1:14:22
Кто-нибудь может подсказать как присваивается isActive? Что-то не получается разобраться
Юрий, огромное спасибо за работу! такой вопрос: светлая и темная темы не работают на странице Хоум. Где искать ошибку?
Ошибся, все работает, сорри)
@@aleksandrprokudin4715 Уже хотел, что надо смотреть в консоли, есть ли ошибки там. Но вы уже написали что все в порядке. 👍
Подскажите пожалуйста как вы сделали большие отступы на боковой панели vs code?
Никак. Если только специально в дебри настроек не лезть, не знаю если ли там такой конфиг.
Привет Юрий скажи пожалуйста может ли искусственный интеллект заменить веб-разработчика?
Ага скайнет программа называется)
@@131ZIL ты серьёзно?
На текущий момент нет. Пока таких решений нет. И не предвидится, тем более если говорить о корпоративной IT разработке.
@@WebCademy Хорошо спасибо
Сделайте видео этого проекта с Vite
у меня меняется только 1 раз раз темная и один раз светлая тема. с чем это связано?
слетают стили css в navbar немогу понять почему. когда в NavLink className пишу эту функцию ({isActive}) => isActive ? activeLink : normalLink} все стили перестают роботать если убераю эту конструкцию все роюотает. 1:50:37 время видео
Было бы просто прелесно что бы вы показали как дальше npm run build и опубликовать на гит хаб а то что то он после билда не хочет работать
В след раз сделаем
Подскажите а как с сео при поиске этого сайта будет? Реакт же сразу не создает страничку и в момент рендерит. С этим как решили?
Для этого есть рендеринг на стороне сервера с помощью фреймворка Next JS
@@WebCademy ну это уже сложнее. Во 1х там на next писать нужно, а во 2х для деплоя нужен сервер. А на обычном реакте как можно позаботится о сео?
Если есть возможность ответить автору или кто делал проект по данному уроку, как правильно выкладывать его на gitPage или хостинг, я то знаю как это делается с обычными верстками, Gulp-сборками, но с этим возникли нюансы, выложить его то смог - но открывается он почему-то с пустой страницы и при перезагрузки страницы появляется ошибка 404! Что-то с путям наверное, но не пойму как правильно сделать.
P/S
Уже разобрался
Привет, у меня та же проблема. Подскажи пожалуйста в чем проблема была?😢
Всем привет! Ребят тоже проблема с выкладкой проекта в гит. При первом переходе по ссылке, основная часть сайта белая (пока не выберешь любую из вкладок) но если обновить страницу с любой из вкладок, то вылетает ошибка 404.
@@sirdi1318 аналогичная проблема. Получилось исправить????
@@sirdi1318 , привет, как исправил данную проблему? там ошибка в консоле что то в Localstorage пишет
привет, подскажи в чем дело было и как разобрался?
01:42:30 Когда вылаживаешь на хостинг проект он почему-то не загружает сразу верстку главной страницы, т.е. в приходит только , при этом локально все норм работает, переключения по пунктам тоже, в чем дело может быть подскажите плиз?!
Подскажи, ты решил данную проблему?
@@andrewreich5902 Решил. Не любой хостинг подходит.На gitPage, Netlify не работает, на versel норм. работает
@@justkrem7764 это тебе и помогло с проблемой 404? Если там другое решение, подскажи пожалуйста
@@justkrem7764 у меня всё работает, но только стоит обновить страницу, как сразу 404
@@andrewreich5902 У меня все норм работает, ошибок нет, портфолио по этой работе уже изменил под себя.