Начал наполнять плейлист по разработке сайта-визитки на ReactJS на моём ютуб канале. Это серия частей, где я поэтапно показываю как разрабатываю одностраничный сайт-визитку используя NodeJS и библиотеку React ⚛️

Также в рамках этих частей мы рассматриваем интересные моменты html верстки 🟧, стилизации и создании некоторых анимаций CSS 🟦

Кому интересно - милости прошу. Первая часть уже опубликована — анонс макета и подготовка среды 👈 жми, чтобы посмотреть.

Планирую публиковать новые части каждых 2 дня. Буду благодарен, если поддержите видео лайком и напишите свое мнение в комментарии под видео 💬

Делюсь интересной анимацией hover наведения на кнопку 🟦

Во-первых, понадобится прописать стиль для кнопки до hover наведения (класс .btn) 🔳

Затем в псевдоэлементе ::after для кнопки прописать наполнение, отображающееся после того как мы наведем курсор на кнопку и закончится анимация ⬜️

Анимация заключается в смене значения в свойстве scale 🔄

Ещё понадобятся конструкции :hover::after и :focus-visible::after, в которых мы указали конечное значение для свойства scale, применяющееся по окончанию анимации 👁‍🗨

Код из гифки:

.btn {
  cursor: pointer;
  border: 1px solid #b685ff;
  background-color: #141117;
  color: white;
  padding: .6em 1em;
  border-radius: 9px;
  position: relative;
  isolation: isolate;
}

.btn::after {
  content: '';
  position: absolute;
  z-index: -1;
  background: #b685ff;
  inset: 0;
  scale: .0 1;
  border-radius: 7.5px;
  transition: scale 600ms;
}

.btn:hover::after,
.btn:focus-visible::after {
  scale: 1 1;
}

Вторая часть по разработке сайта-визитки на ReactJS уже на ютуб канале — создание и обзор Реакт проекта 👈 жми, чтобы посмотреть 🔴

В ней мы рассмотрели как создать React проект, запустить его и из чего он состоит ⚛️

В следующей части уже приступим к написанию кода. Буду благодарен, если поддержите видео лайком 👍

Опубликовал третью часть по разработке сайта-визитки на ReactJS на ютуб канал — создание и обзор Реакт проекта 👈 жми, чтобы посмотреть 🔴

В ней мы приступили к написанию кода, а именно написали и стилизовали header блок, в котором есть меню с разделами, кнопка для открытия модального окна, кнопки соц. сетей и ползунок смены темы 🟧

В четвертой части рассмотрим как создать модальное окно, которое будет всплывать по нажатию на кнопку. Буду благодарен, если поддержите видео лайком 👍

Рассмотрим тип объекта Function в JavaScript ⚜️

Function – это тип объекта, который используется для определения и вызова функций 💡

Определить функцию можно с помощью выражения и с помощью конструктора (примеры на скрине) 👁‍🗨

👉 Некоторые тонкости типа объектов Function:
➖ функции могут принимать аргументы и их параметры через список аргументов
➖ функции можно вызвать с помощью оператора вызова
➖ объект Function позволяет использовать замыкание для сохранения доступа к переменным с более высокого уровня

Код со скрина:

// Создание функции выражением
const greeting = function(name) {
  return `Привет, ${name}!`;
};

// Пример вызова функции
console.log('Функция greeting:', greeting('Codorum'));


// Создание функции c помощью конструктора Function
const math = new Function('a', 'b', 'return a + b;');

// Вызов функции
console.log('Функция math:', math(3, 5));

Загрузил четвертую часть по разработке сайта-визитки на ReactJS на ютуб канал — написание модального окна 👈 жми, чтобы посмотреть 🔴

В этой части рассмотрели как создать модальное окно, которое всплывает поверх страницы по нажатию на кнопку. Использовали сразу 3 хука: useState, useEffect и useCallback. Создали плавную анимацию открытия и закрытия окна, соответствующие функции и использовали props ⚛️

Буду благодарен, если поддержите видео лайком 👍

Пятая часть по разработке сайта-визитки на ReactJS уже на ютуб канале — написание приветственного блока 👈 жми, чтобы посмотреть 🔴

В которой мы написали второй блок, состоящий из двух частей: блок текста, контейнер с анимированной иллюстрацией. В блоке текста выделили некоторые слова цветом, создали анимацию движения градиента. А также разобрали как создать анимированную иллюстрацию состоящую из нескольких слоев в качестве png изображений, которые накладываются друг на друга 🟦

Буду благодарен, если поддержите видео лайком 👍

Преимущества React в написании сайта ⚛️

Использование Реакт для создания сайта может иметь несколько преимуществ по сравнению с обычным использованием HTML, CSS и JavaScript 👁‍🗨

👉 Такие как:
➖ Компонентный подход, благодаря которому снижается количество дублированного кода и упрощается поддержка
➖ Возможность не перезагружать страницу при переходах и обновлениях информации
➖ Легкая интеграция с динамическими элементами
➖ Простая масштабируемость проекта (добавление новых компонентов без необходимости перестраивать всю архитектуру)
➖ Благодаря использованию виртуального DOM, Реакт минимизирует количество операций с реальным DOM, что делает его более производительным
➖ Большое сообщество и экосистема

Опубликовал шестую часть по разработке сайта-визитки на ReactJS на ютуб канале — написание блока услуг 👈 жми, чтобы посмотреть 🔴

Разобрали 2 нюанса: как компенсировать margin отступы для конкретного блока, заданные в глобальном классе body, как создать плашки для тегов/текста, ширина которых регулируется шириной текста 🟦

Буду благодарен, если поддержите видео лайком 👍

Загрузил седьмую часть по разработке сайта-визитки на ReactJS на ютуб канал — написание блока портфолио 👈 жми, чтобы посмотреть 🔴

👁‍🗨 Основное, что мы рассмотрели в этой части:
➖ как создать беспрерывно движущуюся карусель из изображений
➖ как создать фильтр с категориями, который регулирует отображение разных компонентов в блоке
➖ открытие изображений на весь экран (подобно модальному окну)
➖ как создать кнопку расширяющую блок (добавляет ряды работ из портфолио)

Буду благодарен, если поддержите видео лайком 👍

Классы в JavaScript могут быть определены в стандартном виде и в расширенном виде. Класс с расширением – это класс, который при объявлении наследует какой-то другой класс с помощью ключевого слова extends 👯‍♀️

Можно наследовать как какой-то встроенный тип класса, так и конкретный объявленный класс 🤝

👉 На скрине продемонстрировано:
➖ наследование стандартного класса Array классом MyArray, вследствие чего класс MyArray может иметь перечесть элементов
➖ наследование кастомного класса Animal классом Dog. Теперь класс Dog также имеет конструктор со свойством объекта "this.name", как класс Animal

Код со скрина:

// Наследование типа класса (типы встроенных классов: Array, Date, String...)

class MyArray extends Array {
  constructor(...elements) {
      super(...elements);
  }

  getFirst() {
      return this[0];
  }
}



// Наследование конкретного класса созданного нами

class Animal {
  constructor(name) {
      this.name = name;
  }
}

class Dog extends Animal {}

Восьмая часть по разработке сайта-визитки на ReactJS уже на ютуб канале — написание блока отзывов 👈 жми, чтобы посмотреть 🔴

В ней мы создали слайдер-карусель отзывов с функциями перелистывания без использования дополнительных библиотек и т. п. Разобрали создание иллюзии бесконечности слайдера, написали компонент шаблон для карточки отзыва принимающий пропсы с данными для отзыва с главного компонента Main. Использовали хуки useEffect и useRef ⚛️

Буду благодарен, если поддержите видео лайком 👍

Опубликовал девятую часть по разработке сайта-визитки на ReactJS на ютуб канале — написание блока гарантий и подвала 👈 жми, чтобы посмотреть 🔴

В этой части кратко разобрали как создать список используя html теги "ol" и "li" и добавить к пунктам списка собственные иконки изображения в качестве маркеров вместо стандартной нумерации. Также стилизовали сам список и написали футер блок 🟦

Буду благодарен, если поддержите видео лайком 👍

В CSS есть удобная функция clamp, которая ограничивает значение между минимальным и максимальным значениями. Её можно использовать вместо привычных свойств min-width, width и max-width например 🙌

В случае с классом container со скрина функция устанавливает значение ширины и высоты для элемента в диапазоне от 200px до 600px по ширине и от 100px до 300px по высоте, где 400px по ширине и 200px по высоте являются желаемыми значениями, но они могут адаптироваться в пределах этих минимальных и максимальных значений ⭕️

Код со скрина:

.container {
  width: clamp(200px, 400px, 600px);
  height: clamp(100px, 200px, 300px);
}

Загрузил десятую часть по разработке сайта-визитки на ReactJS на ютуб канал — настройка навигации по странице 👈 жми, чтобы посмотреть 🔴

В которой мы доработали header блок, настроили навигацию по странице: теперь по нажатию на разделы в меню нас плавно переносит к частям страницы, где расположены эти разделы. Также добавили кнопку в нижнем правом углу экрана, которая появляется в конце страницы и по нажатию переносит нас в начало страницы 🟧

Буду благодарен, если поддержите видео лайком 👍

С помощью метода findLast можно найти последний элемент массива удовлетворяющий определенное условие в JavaScript 🟨

Для этого достаточно задать массив, прописать метод findLast, в скобках которого указать условие для элемента 🔦

Отталкиваясь от этого условия будут поочередно перебираться все элементы с конца массива, пока не будет найден первый с конца массива элемент удовлетворяющий заданное условие 🔬

Когда такой элемент будет найден – он будет выведен в консоль, в случае кода на скрине, и поиск будет остановлен 👁‍🗨

Код со скрина:

const numbers = [1, 2, 3, 4, 5];

const lastNum = numbers.findLast(num => num % 2 === 0);

console.log("Последний парный элемент массива numbers:", lastNum);

11 часть по разработке сайта-визитки на ReactJS уже на ютуб канале — создание функции смены темы 👈 жми, чтобы посмотреть 🔴

В ней мы написали функцию смены темы в отдельном Реакт компоненте, которая регулирует тему страницы. Такой компонент похож на кастомный хук, который импортируется в разные компоненты для добавления какого-то функционала, в нашем случае - для манипулирования значением темы для смены применяемой CSS коллекции (светлой/тёмной) ⚛️

Буду благодарен, если поддержите видео лайком 👍

Опубликовал 12 часть по разработке сайта-визитки на ReactJS на ютуб канале — адаптация header блока 👈 жми, чтобы посмотреть 🔴

В этой части мы приступили к адаптации страницы под мобильные устройства 🟧

👁‍🗨 Рассмотрели как можно выполнять адаптацию без лишней монотонной работы, используя лишь:
➖ функцию по определению ширины и высоты устройства, с которого открыт сайт, с хуком useEffect
➖ одну переменную с хуком useState
➖ тернарные выражения

Буду благодарен, если поддержите видео лайком 👍

Продолжаем рубрику разборов возможных вопросов из собеседований по JavaScript 🟨

👉 Что означает глубокая (deep) и поверхностная (shallow) копия объекта?

➖ Поверхностная копия (shallow copy) создает новый объект и копирует в него лишь ссылки на вложенные объекты из оригинального объекта
➖ Глубокая копия (deep copy) создает новый объект с полностью независимыми копиями всех вложенных объектов из оригинального объекта

Глубокая копия нужна, если нужно избежать изменения в исходном объекте при изменениях в её копии. Потому как если вносить изменения во вложенные объекты в shallow копии - изменения применяются и для вложенных объектов внутри оригинального объекта, который был скопирован 👁‍🗨

Загрузил 13 часть по разработке сайта-визитки на ReactJS на ютуб канал — написание бургер меню 👈 жми, чтобы посмотреть 🔴

В которой мы создали бургер меню для мобильной версии. Отошли от концепции стандартного бургер меню, закрывающего 90% экрана по ширине при открытии и вместо этого создали удобное аккуратное выпадающее бургер-меню ⚛️

Буду благодарен, если поддержите видео лайком 👍

14 часть по разработке сайта-визитки на ReactJS уже на ютуб канале — адаптация приветственного блока 👈 жми, чтобы посмотреть 🔴

В ней мы адаптировали 2-й блок под моб. устройства, благодаря тернарному выражению и переменной isPortrait. Создали 2 варианта html-архитектуры (web & mobile) для блока, как делали ранее для header блока. В зависимости от переменной isPortrait отображаем тот или иной вариант html-архитектуры (про неё подробнее в 12 части) 📱

Буду благодарен, если поддержите видео лайком 👍