👁‍🗨 CODORUM

useMemo – это React хук, который используется для мемоизации (сохранения) результатов обработки значений функциями ⏺ Хук useMemo помнит результаты вычислений и возвращает их при следующих вызовах, если вводные данные ранее обрабатывались функцией 🧠 Это делает его эффективным помощником в оптимизации проекта 👁‍🗨 Код из видео:

import React, { useMemo, useState } from 'react';

const Component = () => {
  const [count, setCount] = useState(0);
  const [inputValue, setInputValue] = useState(0);

  const square = useMemo(() => {
    return count ** 2;
  }, [count]);

  const handleInputChange = (event) => {
    setInputValue(event.target.value);
  };

  const handleCalculate = () => {
    setCount(parseInt(inputValue));
  };

  return (
    <div>
      <p>Введите число:</p>
      <input type="number" value={inputValue} onChange={handleInputChange}/>
      <button onClick={handleCalculate}>Узнать квадрат числа</button>
      <p>Квадрат числа {count} = {square}</p>
    </div>
  );
};

export default Component;

join – метод, позволяющий объединить элементы массива в один ряд. Метод join можно использовать для создания текстового представления массива, соединенного нашим собственным разделителем 🤝 В видео я показал как можно объединить не только элементы массива в одну строку с помощью метода join, но и как можно объединить свойства объекта 👁‍🗨 Для этого нужно заранее выполнить деструктуризацию его свойств и в качестве элементов массива подставить переменные, полученные в следствии деструктуризации 📤 Код из видео:

// ✦ Oбъединение элементов массива
let words = ["Codorum", "-", "пишу", "на", "js",];
let sentence = words.join(" ");

console.log("sentence =", sentence);

// ✦ Oбъединение свойств объекта
let passwordElements = { block_1: '1SF2', block_2: '3S2G', block_3: 'SK1F' };
let { block_1, block_2, block_3 } = passwordElements;
//    block_1 = "1SF2", block_2 = "3S2G", block_3 = "SK1F"

let passwordMap = [block_1, block_2, block_3];
let password = passwordMap.join("-");

console.log("password =", password);

Использование метода reduce открывает возможность выполнения сложных операций с элементами массива и сведения его до какого-то единого результата 🌀 На видео пример применения метода для нахождения максимального значения в массиве: ➖ есть массив numbers с элементами ➖ я создал новую переменную maxNumber ➖ через равно указал название массива с элементами и метод reduce ➖ в скобках указал условие по отбору числа max (accumulator - аккумулятор) – это значение самого большого элемента на каждой итерации ℹ️ num (currentValue - текущий элемент массива) – это значение, представляющее элемент массива, который сравнивается с самым большим элементом на момент какой-то итерации ℹ️ В ходе выполнения кода будет произведено 4 итерации, на каждой из которых будет выполнено сравнение каждого элемента массива 👁‍🗨 Код из видео:

let numbers = [2, 8, 9, 6];

let maxNumber = numbers.reduce((max, num) => (num > max ? num : max), numbers[0]);

console.log("Максимальное значение =", maxNumber);

Почти 23% аудитории нашего канала – дамы 🌸 Поэтому хочу от имени мужчин канала (думаю они будут только за) поздравить Вас – наших прекрасных дам с 8 марта 💐 Вы для нас как ясный лучик солнца в сумрачный день 🔆 Оставайтесь такими же прекрасными во всех отношениях! Помните, что мы вас ценим и любим 💜

at-правилa (At-rules) – это CSS правила, определяющие специальные инструкции для обработки стилей, производят изменения в различных аспектах CSS или вводят определенные функциональности 🛃 В данном видео я показал, как реализовать анимацию переливания градиента фона текста в CSS, задав правило поведения свойства background-position в @keyframes и задав определенное значение в свойстве animation класса текста 👁‍🗨 Код из видео:

.gradientText {
  background: linear-gradient(to right, #b685ff, #85ebff, #85ffde, #85aeff, #b685ff);
  background-clip: text;
  color: transparent;
  background-size: 200%;
  animation: gradientAnimation 3s linear infinite;
}

@keyframes gradientAnimation {
  0% { background-position: 200% 50%; }
  100% { background-position: 0% 50%; }
}

DOM (Document Object Model) в веб-разработке – это структура, представляющая веб-страницу в виде дерева объектов. Каждый элемент HTML, а также его свойства и связи представлены как объекты в этой модели 📑 DOM предоставляет возможность динамически манипулировать веб-страницей с помощью JavaScript 🟨 С помощью DOM можно изменять содержимое страницы, добавлять или удалять элементы, а также реагировать на события, такие как клики или наведения мыши 👁‍🗨 Взаимодействие с DOM является ключевой частью разработки веб-приложений и динамических интерфейсов, позволяющих создавать более интерактивные и усовершенствованные пользовательские взаимодействия 🖱 Код из видео:

import React, { useState } from 'react';

const Component = () => {
  const [text, setText] = useState('Codorum JS');

  const changeText = () => {
    setText('Codorum JavaScript');
  };

  return (
    <div>
      <h1>{text}</h1>
      <button onClick={changeText}>Изменить текст</button>
    </div>
  );
};

export default Component;

useReducer – это React хук, который используется для управления состоянием компонентов с помощью reducer-функции ↔️ reducer-функция – это функция, которая принимает параметры состояния компонента (state) и объект action. Объект action несет информацию про тип действия, которое нужно выполнить 👁‍🗨 Код из видео:

import React, { useReducer } from 'react';

const initialState = { count: 0 };

const reducerFunction = (state, action) => { switch (action.type) {
  case 'increment':
    return {count: state.count + 1};
  case 'decrement':
    return {count: state.count - 1};
  default:
    return state;
}};

const Component = () => {
  const [state, dispatch] = useReducer(reducerFunction, initialState)

  return (
    <div>
      <p>Счёт: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Увеличить</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Уменьшить</button>
    </div>
);};

export default Component;

Благодаря методу reduce можно легко свернуть массив в одно значение 🌀 Есть массив numbers с элементами, объявляем переменную, через равно указываем название массива и метод reduce *️⃣ Далее необходимо прописать callback-функцию со сложением двух параметров: accumulator и currentValue 🎛 accumulator – это результат выполнения итераций. На каждой итерации это значение обновляется в соответствии с логикой функции ℹ️ currentValue – это элемент массива, обрабатываемый на какой-то итерации. Для первой итерации это значение 1, для второй - 3 и так далее ℹ️ Код со скрина:

let num = [1, 3, 2, 12];

let sum = num.reduce((accumulator, currentValue) => accumulator + currentValue, 0);

console.log(sum);

Якорь – это ссылка на страницу или элемент страницы, который создается благодаря тегу <a> в HTML ⚓️ Он может иметь атрибуты, такие как href, указывающий адрес ссылки либо id элемента текущей страницы/компонента для перехода к нему ↕️ В видео я показал как можно стилизовать стандарт якоря в CSS для своего проекта 👁‍🗨 А также показал как сделать плавный скролл у себя на странице/компоненте. Для этого достаточно задать значение smooth в свойстве scroll-behavior корневого элемента html 🔸 CSS стили из видео:

html {
  scroll-behavior: smooth;
}

A {
  text-decoration: none;
}

A:visited {
  color: #f7f4ff;
}

По результатам голосования из прошлого поста сделал вывод что вам будет актуально узнавать разную полезную информацию по React ⚛️ Поэтому я регулярно буду делать посты и про React 👁‍🗨 Сегодня хотел бы рассказать вам про React хук useContext, позволяющий принимать компонентам React проекта данные из контекстов 🔁 Код из видео:

import React, { createContext, useContext } from 'react';


const Context = createContext();

// основной компонент
const MainComponent = () => {
  const number = 123;

  return (
    <Context.Provider
      value={number}>
      <ChildComponent />
    </Context.Provider>
  );
};

// подкомпонент
const ChildComponent = () => {
  const num = useContext(Context)

  return <p>{num}</p>; // num = number = 123
};

Лидером среди фреймворков JavaScript на сегодня остаётся React ⚛️ Наибольшее количество баллов по поисковым запросам с 2022 по 2023 год и наибольшее количество загрузок с 2022 по 2024 год среди представленных на инфографике фреймворков собирает по-прежнему React 📥 (за исключением взлёта интереса к Vue.js и Svelte.js в конце 2023) Статистику брал, в частности, с источника Google Trends 📊

Array.isArray – это удобный инструмент для проверки, является ли объект массивом. Метод возвращает true, если переданный объект является массивом, и false - если нет 🔬 Под объектом, в данном контексте, я подразумеваю некую переменную, которую мы хотим проверить. То есть в прямом смысле слова, а не в смысле структуры или типа данных 👁‍🗨 Код из видео:

let arr1 = [1, 2, 3];
let arr2 = "слово";

function Recovery(arr, arrName) {
  if (Array.isArray(arr)) {
    console.log(arrName, "- массив");
  } else {
    console.log(arrName, "- не массив");
  }
}

Recovery(arr1, "arr1");
Recovery(arr2, "arr2");

Как и планировал, в соответствии с контент планом для телеграм канала, буду публиковать разную полезную информацию для пока ещё фронтенд-разработчиков JavaScript, не ограничиваясь одним языком 🦾 На этот раз подготовил инфу как сделать обводку с переливанием цвета на блоке при hover наведении с помощью CSS 🔷 Основные моменты: ➖ нужно прописать 3 стиля ➖ необходимо добавить фильтр для переливания цветов ➖ важно не упустить свойства: content, position и z-index CSS стили из видео:

.card {
  display: grid;
  place-items: center;
  position: relative;
  width: 100px;
  height: 150px;
  background-color: #141117;
  border-radius: 8px;
  cursor: pointer;
} 

.card::before {
  position: absolute;
  content: '';
  width: 99px;
  height: 149px;
  background-color: #8493f2;
  border-radius: 8px;
  z-index: -1;
  transition: 0.3s;
  animation: animate 1.5s linear infinite;
}

.card:hover::before {
  width: 102px;
  height: 152px;
  border-radius: 9px;
}

@keyframes animate{
  50% {
    filter: hue-rotate(50deg)
}

Чем отличается Spread оператор от Rest оператора? ℹ️ Spread оператор развертывает массивы или объекты в другие массивы или объекты ➡️ Rest оператор это дополнительная функция в деструктуризации, выполняющая противоположную функцию оператора Spread ⬅️ Он объединяет остаточные элементы массива или свойства объекта и т д 👁‍🗨 Код с видео:

//    пример применения Spread оператора (собираем один массив из 2-х переменных и 1-го массива)
const Fring = 'Fring';
const Pinkman = 'Pinkman';
const arr1 = ['Eladio', 'Salamanсa'];

const persons = [Fring, Pinkman, ...arr1]; // собираем*



//    пример применения Rest оператора (разбираем один массив на 2 переменные и 1 массив)
const [Fring2, Pinkman2, ...arr2] = persons; // разбираем*

console.log(persons)
console.log(Fring2, Pinkman2, arr2)

Готовил видео о том как сделать анимацию появления текста при нажатии на кнопку с помощью html, CSS и JavaScript но в итоге получился рофл, который заключается в том что кнопка получилась на чистом html и css. Без добавления функции на JS. Не могу не поделится с вами 🤪 Всё что необходимо это прописать саму кнопку, текст в файле index.html и три стиля в файле index.css 📁 С кнопкой связан скрытый checkbox. При нажатии на кнопку ставится галочка в checkbox. Подробнее в видео 👁‍🗨 Код с видео:

// index.html
<label for="btn" class="btn">Кнопка</label>
<input type="checkbox" id="btn"></input>
<div class="text">привет</div>


// index.css
.text, input[type="checkbox"] {
  opacity: 0;
  margin-top: -10px;
  transition: opacity 400ms, margin-top 500ms;
  display: block;
}

input[type="checkbox"]:checked ~ .text {
  opacity: 1;
  margin-top: 10px;
}

.btn {
  padding: 6px 18px;
  background-color: #485dff;
  color: #eceeff;
  cursor: pointer;
  border-radius: 8px;
}

Методы для округления десятичных чисел в целые числа ⏺ parseInt – метод, округляющий десятичное число, отсекая все цифры после точки ✔️ Math.round – метод, округляющий десятичное число, к ближайшему целому ✔️ Оба метода округляют числа, но совершенно по-разному. Тот или иной метод можно использовать в зависимости от цели получения конечного результата 👁‍🗨 Код со скрина:

var intByParseInt = parseInt(3.5)
console.log('Число обработанное методом parseInt:', intByParseInt)

var intByMathRound = Math.round(3.5)
console.log('Число обработанное методом Math.round:', intByMathRound)

"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]}`);
}

console.log('')

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

Благодаря методу reduce можно развернуть массив с объектами (сложными элементами, которые имеют свойства вида ключ-значение) в отдельный объект и самому определить ключи для объектов (сложных элементов), доп. свойства и операции с объектами массива во время формирования объекта 🌀 Метод пригодится если массив состоит именно из объектов (сложных элементов) 👁‍🗨 В результате выполнения кода из видео мы развернули массив с объектами (сложными элементами c двумя свойствами) в объект с объектами (сложными элементами с одним свойством, но более сложным) ☑️ Код из видео это лишь пример развертывания массива в объект с помощью reduce. Я показал свой пример *️⃣ Код с видео:

const fruits = [{type: 'лимон', amount: 14},
                {type: 'манго', amount: 0},
                {type: 'груша', amount: 21}]
  
const object = fruits.reduce((acc, fruit, index) => {

    const key = `фрукт #${index + 1} - ` + fruit.type;
    acc[key] = { 'в наличии?': fruit.amount > 0 };

    return acc;
}, {});
  
console.log(object);