React компонент – это один из основных элементов, из которых состоят приложения или сайты на React ⚛

Компонентом может быть как самостоятельная страница сайта, так и какая-нибудь встроенная в страницу сайта функция, допустим, если речь идет о сайте на React 🧩

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

👉 На скрине простой пример компонента на Реакт:
➖ в самом вверху подключаются библиотеки и заголовочные файлы
➖ после объявления компонента добавляются функции
➖ а после ключевого слова return прописывается внешний вид компонента на HTML

Какая работа среди этих 8 вам нравится больше? С точки зрения дизайна 🎨

Проголосуйте в следующем посте 👇

В JavaScript есть достаточное разнообразие циклов. Рассмотрим цикл do...while 🟨

do...while – это цикл, который сначала выполняет блок кода, а затем проверяет условие продолжения выполнения 🔂

Цикл гарантирует, что блок кода выполнится по крайней мере один раз, даже если условие не будет соблюдено ⚠

На скрине пример использования цикла: после запуска будет проведено 5 итераций, на каждой итерации значение переменной i увеличивается на единицу, затем проверяется условие в блоке while "i < 5". Если условие выполняется - цикл будет продолжать повторять выполнение, пока i не станет больше 5 или не будет равно 5 👁‍🗨

Благодаря методу replace можно заменять слова или символы в строке 🎭

➖ первым аргументом, передаваемым методу указываем слово или символ, которое нужно заменить
➖ вторым - слово или символ, на которое нужно заменить

По умолчанию метод найдет первое совпадение и заменит его, но если нужно заменить все совпадения - можно использовать глобальный флаг /g. Также методу можно передавать аргументы в виде функций 👁‍🗨

Небольшая история разделения псевдоклассов и псевдоэлементов 📘

В CSS2 все псевдоклассы и псевдоэлементы записывались с одним двоеточием 👉 :hover, :before, :after

В CSS3 решили разделить:
👉 : — для псевдоклассов (например, :hover, :nth-child)
👉 :: — для псевдоэлементов (например, ::before, ::after)

Но некоторые псевдоклассы, такие как ::selection, хотя и имеют двойные двоеточия, не являются полноценными псевдоэлементами — это исключение из правила ⚠

в случае с ::selection – это особый случай, ::selection отвечает за "интерактивную часть элемента", а не отдельный DOM-элемент, как у настоящих псевдоэлементов 👁‍🗨

for...in и for...of — это два разных типа циклов в JavaScript, и они используются для разных целей 🟨

➖ for...in используется для перебора свойств объектов
➖ for...of используется для перебора значений объектов, которые являются итерабельными (например массивы, строки, коллекции и так далее)

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

const person = { name: 'John', age: 30, job: 'developer' };
for (let key in person) {
  console.log(`${key}: ${person[key]}`);
}

const fruits = ['apple', 'banana', 'orange'];
for (let fruit of fruits) {
  console.log(fruit);
}

Пост для новичков канала 🖖

В сентябре мы написали сайт-визитку на ReactJS. Кому интересно — приглашаем к просмотру ⚛️

Плейлист с частями доступен на нашем ютуб канале 🪪

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

Подробности в первой части — анонс макета и подготовка среды 👈 жми, чтобы посмотреть.

На финальный результат можно взглянуть в 20-й части 👈

Метасимвол — это один из типов символов, которые в сумме помогают формировать более точные регулярные выражения для поиска групп символов или паттернов в строках 🔍

В видео мы рассмотрели 2 метасимвола, которые присутствуют в регулярном выражении для поиска слов, начинающихся с буквы "a" *⃣

👉 А именно:
➖ \b - метасимвол, указывающий на то, что мы ищем букву в начале слова
➖ \w+ - метасимвол, требующий показать найденные слова, в которых присутствует искомая буква, целиком

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

let str = "ah sh*t, here we go again..."

// ✦ Регулярное выражение
let regexp = /\ba\w+/g;

// "/" - символ, в который оборачиваются выражения
// "\b" - метасимвол, указывающий на то, что мы ищем букву в начале слова
// "a" - первая буква слов, которые мы ищем
// "\w+" - метасимвол, требующий показать найденные слова, в которых присутствует искомая буква, целиком
// "/g" - глобальный поиск (флаг)

console.log(str.match(regexp));

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

👉 Как проверить, является ли число конечным в JavaScript? Или оно бесконечное? ♾

В JavaScript проверить, является ли число конечным, можно с помощью встроенной функции isFinite()

isFinite() автоматически преобразует аргумент в число, если это возможно. В отличие от метода объекта Number.isFinite() 👁‍🗨

C помощью HTML-тега span можно стилизовать определенный текст или слово в предложении не задев стиль остального текста предложения 🟧

span — это HTML-тег, используемый для определения инлайнового элемента, который может содержать текст или другие встроенные элементы 🎞

👉 В CSS можно использовать селекторы для определения стилей элементов, обернутых в span-теги:
➖ на скрине у нас есть предложение внутри блока div, обернутое в тег <p></p>
➖ внутри этого предложения часть строки, которой присвоен класс accent, обёрнута в тег <span></span>
➖ теперь эту часть строки можно индивидуально стилизовать через класс accent

При помощи Spread оператора можно легко объединить массивы или объекты в JavaScript 🤝

🪵 Для того чтобы объединить массивы, достаточно объявить новую константу и в квадратных скобках перечислить массивы, которые необходимо объединить через запятую, указав перед ними многоточия. В данном случае таким многоточием обозначается Spread оператор.

🧱 Для объединения объектов рецепт точно такой же, но вместо квадратных скобок используются фигурные скобки.

Встроенные функции (built-in functions) — это готовые функции, уже встроенные в JavaScript, которые можно использовать без дополнительного объявления. Они значительно упрощают работу, позволяя быстро выполнять распространенные задачи 🪡

Примеры:
🔸 eval() — выполняет строку как код
🔸 parseInt() — преобразует строку в целое число

В JavaScript глобальных встроенных функций – около 12. Но четко зафиксировать их часто бывает тяжело, так как:
👉 стандарт ECMAScript регулярно обновляется и в каждой новой версии могут появляться новые методы и функции;
👉 есть встроенные объекты (Math, String, Array и т. п.), содержащие много своих методов (функции), которые часто называют встроенными (но фактически они не являются глобальными встроенными функциями, позже разберем почему).

Благодаря методу startsWith можно проверить начинается ли строка с указанной буквы или символа в JavaScript 🔦

Применение метода стандартное: указываем строку и метод startsWith через точку, в скобках указываем букву, наличие которой необходимо проверить в начале строки 🔬

Важно учесть, что нужно уточнять регистр буквы, которую мы проверяем: верхний или нижний. Если буква будет правильной, но регистр будет не тот - получим значение false 👁‍🗨

Как сделать плавное поднятие блока вверх при hover наведении в CSS? 🟦

👉 Для этого нужна комбинация из всего 2-х свойств:
➖ свойство transition в классе блока с указанием значения времени, за которое будет выполнятся анимация смещения блока
➖ свойство transform в псевдоклассе hover для блока с указанием расстояния и направления смещения блока

Код из видео:

.card {
  width: 100px;
  height: 150px;
  display: grid;
  text-align: center;
  place-items: center;
  background-color: #141117;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.5s; /* время, за которое выполняется смещение */
} 

.card:hover {
  transform: translateY(-5px); /* направление и расстояние */
  box-shadow: 0px 5px 5px #14111790;
}

Рекурсия ‒ это процесс вызова функцией самой себя для решения определенной задачи или вычисления определенного значения до тех пор, пока не будет достигнуто базовое условие или сделано достаточное количество вызовов 🔁

В примере кода на скрине есть рекурсивная функция по нахождению факториала числа 🧮

И эта функция будет выполняться снова и снова пока не будет достигнуто условие в if ⛔

Каждое повторение выполнения функции уменьшает значение n, которое на третьей итерации уменьшится до единицы (до условия прекращения выполнения функции) 👁‍🗨

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

Promise – это тип объекта, который используется для работы с асинхронными операциями и представления результата их выполнения 🔀

Промисы принимают два параметра: "решение" (resolve) и "отклонение операции" (reject) 🚥

А также у Промисов есть методы: then для обработки результата resolve и catch для обработки ошибки reject 👁‍🗨

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

const LoginPromise = new Promise((resolve, reject) => {

   const password = '123';

   if (password === 'codorum') { resolve('success'); }
   else { reject('wrong password'); }
});

LoginPromise
   .then((result) => { console.log(result); })
   .catch((error) => { console.error(error); });

На собесах, в дополнение к техническим вопросам и заданию, иногда внезапно задают общие вопросы, поэтому сегодня немного расширим наш общий кругозор, вместо разбора очередного технического вопроса 🙌

👉 Каких известных людей из мира JS вы знаете?

Казалось бы вопроса проще некуда не придумать и будет очень хорошо, если мы, как минимум, будем знать самого важного человека из мира JS – самого создателя Брендана Эйха, которому, кстати, завтра (4 июля) день рождения! 🎂

Брендан Эйх – программист, создавший JavaScript в 1995 году всего за 10 дней, работая в компании Netscape. Сначала язык назывался Mocha 🥴 (кофе Моккачино/Мокко с итал. mocaccino ☕), потом LiveScript, и уже впоследствии — JavaScript 🟨

Интересно, что JavaScript задумывался как легкий язык для скриптов в браузере – и никто тогда не представлял и не ожидал, что он станет основой современной веб-разработки 👁‍🗨