Сайт портфолио на React JS урок для новичков. Базовый вводный курс в React для начинающих
Создание многостраничного сайта на React JS. Подробный урок с объяснениями для новичков. ↓↓↓ Файлы к уроку и тайм-коды ниже в описании ↓↓↓
Создаем сайт Портфолио на React JS. Как установить react, создать приложение create react app, как очистить проект от ненужных файлов. Несколько страниц с использованием React Router Dom. Properties пользовательские свойства (просы / props) в React компонентах. Состояние в компонентах, хуки useState, useEffect. Написание своего хука useLocalStorage. Темная тема для сайта. Базовый курс по основам React для новичков.
Материалы к уроку:
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Курс “JS Frontend разработчик React“:
Обучение с наставником, 3 месяца, результат, гарантия.
Старт курса: 12 Декабря 2022 года
💻 Курс “Профессия HTML верстальщик“:
Обучение с наставником, 3 месяца, результат, гарантия.
Старт курса: 21 Ноября 2022 года
🏁 Обучение с нуля
💁♂️ Обучение с наставником
🎯 Доведение с нуля до результата
🏢 Помощь с трудоустройством
💵 Поможем взять первый заказ на фрилансе
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Бесплатный курс по верстке сайтов:
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Сайт школы ВебКадеми:
Вконтакте:
Telegram канал:
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Тайм-коды и код к уроку
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Материалы к уроку:
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
2: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 Финал
134 views
179
47
6 months ago 00:00:34 1
Чем отапливают дом на Байкале
6 months ago 00:13:55 1
Хотели логотип, а получили больше. Этапы и процесс создания логотипа и логобука
6 months ago 00:06:42 1
КАК ОТКРЫТЬ КАФЕ ? инструкция по открытию !
6 months ago 01:40:38 1
Дизайн сайта в Figma. Уровень новичок.
6 months ago 00:04:15 1
Imany - Wonderful Life (Stream Jockey Rework) - LYRICS VIDEO
6 months ago 00:00:39 1
Обзор многостраничного сайта для студии по архитектурной и интерьерной 3D-визуализации
6 months ago 00:00:00 16
Mermay-фидбек! Разбираем работы участников мини-версии с Анастасией Устиновой
6 months ago 00:30:32 1
Металлоконструкции 3d в КОМПАС 3D
6 months ago 00:32:35 1
ЧТО НАВОРОТИЛ ГОРЕ-ДИЗАЙНЕР ЗА 250 ТЫС.? КАК НЕ ПОПАСТЬ К ПЛОХОМУ ДИЗАЙНЕРУ
6 months ago 00:00:21 1
Промо ролик
6 months ago 00:00:56 2
ОЧЕНЬ ЗЛОЙ FX50
6 months ago 00:03:29 1
Видеомонтаж любой сложности. Горизонтальные и вертикальные. Рилсмейкер. Монтаж подкастов. 2024.
6 months ago 00:28:59 1
10 книг, которые должен прочесть каждый *для новичков*
6 months ago 01:05:08 1
Как нарисовать сосиску в Photoshop |Туториал #tutorial #art #drawing #photoshop
6 months ago 00:19:27 2
Этапы проектирования сайта / 09 / Курс по дизайну для РУДН
6 months ago 02:56:40 1
Сайт портфолио на React JS урок для новичков. Базовый вводный курс в React для начинающих
6 months ago 00:57:42 1
ПЕРЕЕЗД В ИСПАНИЮ без денег? Из Москвы к цыганам в жуткий район!
6 months ago 00:09:23 9
Бесплатный курс по верстке. Верстка сайта на HTML и CSS. 2024. 4k
6 months ago 00:25:55 1
Sigma 70-200mm F/2.8 AF DG OS HSM Sports | Опыт использования
6 months ago 00:01:37 1
Усадьба Абрамцево — на стыке поколений
6 months ago 00:00:32 1
3 Hacks to Make Life Suck Less
6 months ago 00:08:45 1
ПАРК КРАСНОДАР 2024, Я БЫЛ В ШОКЕ КОГДА УВИДЕЛ ЭТО!!!
6 months ago 01:06:19 1
ТОП-3 ИДЕИ НА ФОНДОВОМ РЫНКЕ ДО КОНЦА 2024 ГОДА | Алексей Линецкий