👁‍🗨 CODORUM — пишу на JavaScript

Условный рендеринг (conditional rendering) – это отображение компонентов или контента в зависимости от определенных условий или состояний 💎 Реализовать это отображение можно с помощью различных способов, таких как: ➖ применение оператора "if/else" ➖ использование тернарного оператора "? :" ➖ использование метода render в классовых компонентах ➖ использование метода return в функциональных компонентах В видео мы рассмотрели пример отображения разного текста в зависимости от значения состояния "isLoggedIn", которое регулируется кнопкой 👁‍🗨 Код из видео:

import React, { useState } from 'react';

const Component = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  const handleLoginClick = () => {
    setIsLoggedIn(prevState => !prevState);
  };

  return (
    <div>
      <h1>{isLoggedIn ? 'Вы успешно авторизованы' : 'Пожалуйста, авторизуйтесь'}</h1>
      <button onClick={handleLoginClick}>
        {isLoggedIn ? 'Выйти' : 'Войти'}
      </button>
    </div>
  );
};

export default Component;

Async await – это функция JavaScript, позволяющая писать асинхронный код с чистой и понятной синтаксической структурой. Слово async определяет асинхронную функцию, а слово await указывает на ожидание выполнения асинхронной операции 🔀 В видео мы рассмотрели пример с функцией async await по вычислению количества процентов числа "b" от числа "a". Часть функции percentFromNum (await) вычислила процент от числа "a", а основная часть функции calculate (async) умножила результат полученный с функции percentFromNum на число "b" 👁‍🗨 Код из видео:

function percentFromNum(a) {
  return new Promise
  (resolve => {
  resolve(100/a); // 2
  });
}

async function calculate(a, b) {
  console.log("вычисляем сколько % составляет число", b, "от числа", a) // 1
  let res = await percentFromNum(a);
  let percent = res * b; // 3
  console.log("число", b, "составляет", percent + "% от числа", a); // 4
}

calculate(500, 70);

setTimeout – метод, с помощью которого можно создать задержку выполнения функции на указанное время в милисекундах ⏲ При работе с методом важно правильно определять уровни Scope (зоны видимости) 👇 Если метод лежит на глобальном Scope уровне, то время задержки для выполнения функции начинает отсчет после запуска кода ℹ️ А если метод лежит, к примеру, на дочернем Scopе уровне глобального Scope уровня, то время задержки для выполнения функции начинает отсчет после запуска функции, которая лежит на глобальном Scope уровне ℹ️ 1-й код из видео:

// Функция 1 (выполняется сразу после запуска кода)
console.log("1 функция выполнилась");

// Функция 2 (выполняется через 1 секунду после запуска кода) 
setTimeout(() => {
  console.log("2 функция выполнилась");
}, 1000);

// Функция 3 (выполняется через 2 секунды после запуска кода) 
setTimeout(() => {
  console.log("3 функция выполнилась");
}, 2000);

Сегодня хочу поделится с вами как сделать меню из блоков с помощью html элемента <input> 📑 Для этого мне также понадобился хук useState, так как я пишу в React ⚛️ А также в видео я показал как стилизовал блок и класс input с его псевдоклассом :checked + класс label 👁‍🗨 Основная часть кода из видео:

// ✦ index.js
import React, { useState } from 'react';

const Component = () => {
    const [selected, setSelect] = useState('');

    const ChangeSelect = (event) => {
      setSelect(event.target.value);
    };

    return (
      <div className='main'>
        <input type="radio" id="b1" value="b1"
        checked={selected === 'b1'} onChange={ChangeSelect}/>
        <label htmlFor="b1" className='block'>1 блок</label>

        <input type="radio" id="b2" value="b2"
        checked={selected === 'b2'} onChange={ChangeSelect}/>
        <label htmlFor="b2" className='block'>2 блок</label>
      </div>
    );
};

export default Component;

Cookie – это небольшой фрагмент данных, который хранит веб-сайт на компьютере пользователя 🍪 Cookie используются для сохранения информации о пользователе и его взаимодействии с сайтом 🗄 В видео мы рассмотрели пример создания cookie на странице компонента React ⚛️ В конце видео показал где хранятся cookie страницы в браузере 👁‍🗨 Код из видео:

import React from 'react';

class CookieExample extends React.Component {
  componentDidMount() {
    // Cookie
    this.createCookie('username', 'codorum', 1);
    // '1' - это количество дней, на которое мы сохраняем cookie
  }

  createCookie(name, value, days) {
    const expires = new Date(new Date().getTime() + days * 24 * 60 * 60 * 1000).toUTCString();
    document.cookie = `${name}=${value}; expires=${expires}; path=/`;
  }

  render() {
    return (
      <div>
        <h1>Cтраница</h1>
      </div>
    );
  }
}

export default CookieExample;

С помощью метода every можно проверить удовлетворяет ли каждый элемент массива какому-то условию ⏺ Основная и по сути единственная функция метода every – проверка элементов массива на определенное условие, но метод можно комбинировать с другими методами, такими как map, filter или reduce, чтобы добиться какого-то определенного результата 🔽 Метод возвращает true, если условие выполняется для всех элементов массива, и false, если напротив 👁‍🗨 Код со скрина:

let numbers = [6, 13, 20, 21, 23, 27, 30, 8, 12, 14];

// проверка, все ли элементы больше чем 5
let OverThan5 = numbers.every(num => num > 5);

console.log("Все элементы массива numbers больше пяти:", OverThan5);

Связка метода map с методами toUpperCase и toLowerCase позволяет легко переводить слова предложения в верхний или нижний регистр 🔃 Для этого достаточно объявить новые переменные и через знак равно указать массив с предложениями или словами, которые мы хотим перевести в верхний или нижний регистр 👁‍🗨 Далее указать метод map и в скобках указать, что для слов мы хотим применить метод toUpperCase или toLowerCase ✔️ map – метод позволяющий изменять массив, получая в качестве результата новый массив с изменёнными элементами первоначального массива 🗺 Код из гифки:

let sentence1 = ["Codorum - пишу на JavaScript"];
// перевод слов в верхний регистр
let sentenceUpperCase = sentence1.map(word => word.toUpperCase());

console.log('sentenceUpperCase =', sentenceUpperCase);


let sentence2 = ["ВТОРОЕ ПРЕДЛОЖЕНИЕ"];
// перевод слов в нижний регистр
let sentenceLowerCase = sentence2.map(word => word.toLowerCase());

console.log('sentenceLowerCase =', sentenceLowerCase);

attr функция – это функция, позволяющая использовать значения атрибутов HTML-элементов в качестве значений свойств в CSS 🎏 Функция позволяет динамически использовать значения атрибутов для отображения текста, URL или других значений, определенных в HTML, непосредственно в свойствах CSS 🔷 В видео я показал, как передать переменную count из React компонента в псевдоэлемент ::before 👁‍🗨 Код из видео:

// ✦ index.js

import React from 'react';
  
const Component = () => {
  
  let count = 3;

  return (
    <div>
      <button count={count}>Кнопка</button>
    </div>
  );
};
  
export default Component;

// ✦ index.css

button {
  position: relative;
}

button::before {
  content: attr(count);
  position: absolute;
  top: -0.75em;
  right: -0.75em;
  width: 1.5em;
  height: 1.5em;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background-color: #f74a67;
  color: white;
}

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
};