CodeBase | Frontend

⚡️

componentWillUnmount

⚡️

➡️ Этот метод вызывается прямо перед удалением компонента из DOM. Это важное место для выполнения задач по очистке, таких как остановка таймеров, отписка от событий или освобождение ресурсов для предотвращения утечек памяти.

🗣 Пример кода:

jsx
import React, { Component } from 'react';

class TimerComponent extends React.Component {
  constructor() {
    super();
    this.state = {
      seconds: 0,
    };
    this.timer = null; // Инициализация таймера
  }
  // При монтировании компонента, запускаем таймер
  componentDidMount() {
    this.timer = setInterval(() => {
      this.setState({ seconds: this.state.seconds + 1 });
    }, 1000); // Обновление каждую секунду (1000 миллисекунд)
  }
  // При размонтировании компонента, очищаем таймер, чтобы избежать утечки памяти
  componentWillUnmount() {
    clearInterval(this.timer);
  }
  render() {
    return (
      <>
        <h1>Timer Component</h1>
        <p>Прошедшее время: {this.state.seconds} секунд</p>
      </>
    );
  }
}
export default TimerComponent;

⏺ TimerComponent класс инициализирует состояние seconds для отслеживания времени. В componentDidMount устанавливается таймер, а в componentWillUnmount он очищается. Таймер обновляет время каждую секунду. Компонент отображает прошедшее время. Очистка таймера в componentWillUnmount предотвращает утечки ресурсов.

CodeBase | Frontend | #react_js

Please open Telegram to view this post

VIEW IN TELEGRAM

👍5🔥3🥴1

1.34K viewsedited 05:01

CodeBase | Frontend

This media is not supported in your browser

VIEW IN TELEGRAM

⚡️

QUOKKA

⚡️

🟢 Расширение Quokka позволяет тестировать JavaScript-код, не переключаясь на консоль браузера.

🟢 Кроме того, Quokka помогает в прототипировании и работе с файлами.

🟢 В нем есть встроенные отчеты и функции форматирования вывода.

🔗

Ссылка

CodeBase | Frontend | #plugins

Please open Telegram to view this post

VIEW IN TELEGRAM

👍5🔥3❤1

1.31K views05:04

CodeBase | Frontend

🖼️

React: Базовые крючки

🖼️

const [state, setState] = useState(initialState);

➡️ Использование функции useState позволяет создать переменную state и функцию setState для управления ее значением.

Во время инициализации, state равно переданному значению initialState.

setState(newState);

➡️ Функция setState применяется для изменения значения состояния. При вызове функции с новым значением, React добавляет в очередь повторную отрисовку компонента.

При последующих обновлениях, значение state, полученное с помощью useState, отображает текущее состояние после всех обновлений.

Функциональные обновления

➡️ Если новое состояние зависит от предыдущего, можно передать функцию в setState, которая принимает предыдущее значение и возвращает новое. В примере с компонентом счетчика используются обе формы setState.

function Counter({initialCount}) {
  const [count, setCount] = useState(initialCount);
  return (
    <>
      Count: {count}
      <button onClick={() => setCount(initialCount)}>Reset</button>
      <button onClick={() => setCount(prevCount => prevCount + 1)}>+</button>
      <button onClick={() => setCount(prevCount => prevCount - 1)}>-</button>
    </>
  );
}

CodeBase | Frontend | #react

Please open Telegram to view this post

VIEW IN TELEGRAM

🔥8❤‍🔥3👍1

1.1K views05:02

CodeBase | Frontend

⚡️

fullPage.js — это JavaScript-библиотека, которая используется для создания полноэкранных прокручивающихся веб-страниц.

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

➡️

Основные возможности fullPage.js включают:

1️⃣

Полноэкранная прокрутка: Контент отображается по одному слайду на экран.

2️⃣

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

3️⃣

Мульти-секционные страницы: Возможность создания множества секций и слайдов внутри них.

4️⃣

Анимации переходов: Поддержка различных эффектов переходов между слайдами.

5️⃣

Адаптивность: Поддержка мобильных устройств и возможность адаптировать внешний вид под разные размеры экранов.

6️⃣

Совместимость: Работа с большинством современных браузеров.

➡️

Пример использования fullPage.js может выглядеть так:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.9/fullpage.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.9/fullpage.min.js"></script>
    <style>
        .section {
            text-align: center;
            font-size: 3em;
            color: #fff;
        }
        #section1 { background-color: #1BBC9B; }
        #section2 { background-color: #4BBFC3; }
        #section3 { background-color: #7BAABE; }
        #section4 { background-color: #f90; }
    </style>
</head>
<body>
    <div id="fullpage">
        <div class="section" id="section1">Section 1</div>
        <div class="section" id="section2">Section 2</div>
        <div class="section" id="section3">Section 3</div>
        <div class="section" id="section4">Section 4</div>
    </div>

    <script>
        new fullpage('#fullpage', {
            // Опции конфигурации
            autoScrolling: true,
            navigation: true,
            navigationPosition: 'right',
        });
    </script>
</body>
</html>

🟡 Этот пример создаст веб-страницу с четырьмя полноэкранными секциями, которые можно прокручивать.

🟡 Библиотека fullPage.js широко используется для создания эффектных и интерактивных одностраничных веб-сайтов.

CodeBase | Frontend | #js_lib

Please open Telegram to view this post

VIEW IN TELEGRAM

❤‍🔥8👍3🔥3❤1🖕1

1.25K views05:03

CodeBase | Frontend

⚡️

Howler.js — это JavaScript-библиотека для работы с аудио в веб-приложениях. Она обеспечивает удобный API для воспроизведения звуков, что позволяет разработчикам легко добавлять аудиоэффекты и музыкальные фоны на свои веб-страницы.

🟣 Howler.js поддерживает все современные форматы аудио и предоставляет дополнительные возможности для управления звуками.

➡️

Основные возможности:

1️⃣

Кроссбраузерная поддержка: Работает в большинстве современных браузеров, обеспечивая совместимость с различными аудиоформатами (MP3, OGG, WAV, AAC и другими).

2️⃣

Управление звуками: Воспроизведение, пауза, остановка, изменение громкости, регулировка скорости воспроизведения.

3️⃣

Поддержка спрайтов: Возможность создания аудиоспрайтов, что позволяет хранить несколько звуков в одном файле и воспроизводить их по частям.

4️⃣

Буферизация: Автоматическая загрузка и кэширование аудиофайлов для плавного воспроизведения.

5️⃣

События: Поддержка событий, таких как начало воспроизведения, завершение, пауза и другие.

6️⃣

Простая интеграция: Легкий API, который позволяет быстро интегрировать аудио в веб-приложения.

➡️

Пример использования:

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.3/howler.min.js"></script>
</head>
<body>
    <button onclick="playSound()">Play Sound</button>
    <button onclick="pauseSound()">Pause Sound</button>
    <button onclick="stopSound()">Stop Sound</button>

    <script>
        // Создание объекта Howl для управления звуком
        var sound = new Howl({
            src: ['path/to/sound.mp3', 'path/to/sound.ogg'],
            volume: 0.5,
            onplay: function() {
                console.log('Sound is playing');
            },
            onend: function() {
                console.log('Sound has ended');
            }
        });

        // Функции управления звуком
        function playSound() {
            sound.play();
        }

        function pauseSound() {
            sound.pause();
        }

        function stopSound() {
            sound.stop();
        }
    </script>
</body>
</html>

🟣 Этот пример демонстрирует, как создать аудиообъект с помощью howler.js и управлять воспроизведением звука через кнопки.

🟣 Howler.js является мощным инструментом для добавления аудио в веб-приложения, предлагая множество функций для гибкого и удобного управления звуками.

CodeBase | Frontend | #js

Please open Telegram to view this post

VIEW IN TELEGRAM

👍5❤2🔥1

1.32K viewsedited 05:02

CodeBase | Frontend

⚡️

Tamagui - это программное обеспечение с текстовым графическим пользовательским интерфейсом (TUI) для управления устройствами через командную строку, облегчая взаимодействие пользователя с техническими устройствами.

➡️

Для установки используйте:

npm install tamagui @tamagui/config

➡️

Включает в себя три компонента:

🟢

@tamagui/core — является библиотекой стилей, расширяющей API стилей React Native с множеством функций из CSS без внешних зависимостей, кроме React.

🟢

@tamagui/static — компилятор, который оптимизирует производительность.

🟢

@tamagui — обширный универсальный набор компонентов.

🖥 GitHub
💩 Доки

CodeBase | Frontend | #react

Please open Telegram to view this post

VIEW IN TELEGRAM

🔥5

1.12K views05:02

CodeBase | Frontend

⚡️

Pixi.js — это мощная библиотека для рендеринга 2D-графики в браузере.

🔵 Она позволяет разработчикам создавать сложные и производительные анимации и интерактивные приложения с использованием HTML5 и WebGL.

🔵 Pixi.js поддерживает как WebGL, так и Canvas, что позволяет ей работать на разных устройствах и браузерах, обеспечивая высокую производительность.

➡️

Основные особенности Pixi.js:

1️⃣

Высокая производительность: Использование WebGL для рендеринга обеспечивает быстрое и плавное отображение графики.

2️⃣

Кросс-браузерная поддержка: Поддерживает различные браузеры и устройства, автоматически переключаясь на Canvas, если WebGL недоступен.

3️⃣

Легкость использования: Предоставляет удобный и понятный API для работы с графикой и анимацией.

4️⃣

Поддержка различных форматов: Работает с изображениями, спрайтами, текстом, видео и другими форматами мультимедиа.

5️⃣

Расширяемость: Имеет множество плагинов и дополнений, которые расширяют функционал библиотеки.

➡️

Пример простого использования Pixi.js:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pixi.js Example</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/6.5.8/pixi.min.js"></script>
</head>
<body>
  <script>
    // Создаем приложение Pixi
    let app = new PIXI.Application({
      width: 800, 
      height: 600,                       
      backgroundColor: 0x1099bb
    });
    document.body.appendChild(app.view);

    // Загружаем изображение и создаем спрайт
    PIXI.Loader.shared.add('example.png').load((loader, resources) => {
      let sprite = new PIXI.Sprite(resources['example.png'].texture);

      // Центрируем спрайт
      sprite.x = app.view.width / 2;
      sprite.y = app.view.height / 2;
      sprite.anchor.set(0.5);

      // Добавляем спрайт в сцену
      app.stage.addChild(sprite);
    });
  </script>
</body>
</html>

👀 В этом примере создается простое приложение Pixi.js, которое загружает изображение example.png и отображает его в центре экрана.

CodeBase | Frontend | #js_lib

Please open Telegram to view this post

VIEW IN TELEGRAM

🔥6👍2❤‍🔥1❤1

1.11K views05:02

CodeBase | Frontend

⚡️

useLayoutEffect — это хук в React, который позволяет выполнять побочные эффекты синхронно после того, как все изменения DOM были внесены, но до того, как браузер обновит экран.

🔵 Это делает его полезным для операций, которые должны произойти до того, как пользователь увидит изменения.

▶️

Сравнение с

 useEffect

Основное различие между useEffect и useLayoutEffect заключается во времени их выполнения:

🔘

useEffect выполняется асинхронно после рендеринга и после того, как браузер обновил экран.

🔘

useLayoutEffect выполняется синхронно сразу после всех изменений в DOM, но до того, как браузер нарисует экран.

▶️

Когда использовать

 useLayoutEffect

Использование useLayoutEffect целесообразно в случаях, когда нужно:

🔘 Измерить размеры или позицию DOM-элементов до того, как браузер отрисует изменения.
🔘 Выполнить какие-либо операции, которые могут повлиять на верстку или стиль, и эти изменения должны быть учтены до отображения на экране.

▶️

Пример использования

 useLayoutEffect

Рассмотрим пример, где мы хотим измерить ширину элемента div сразу после его рендеринга и отобразить эту ширину в элементе:

import React, { useLayoutEffect, useRef, useState } from 'react';

function MeasureDiv() {
  const divRef = useRef(null);
  const [width, setWidth] = useState(0);

  useLayoutEffect(() => {
    if (divRef.current) {
      setWidth(divRef.current.offsetWidth);
    }
  }, []);

  return (
    <div>
      <div ref={divRef} style={{ width: '50%' }}>
        Resize the window to change my width
      </div>
      <p>Div width: {width}px</p>
    </div>
  );
}

export default MeasureDiv;

⚠️

В этом примере:

🔘 Мы используем useRef для получения ссылки на элемент div.
🔘 С помощью useLayoutEffect мы измеряем ширину элемента после его рендеринга, но до того, как браузер обновит экран.
🔘 Ширина сохраняется в состоянии с помощью useState и отображается в абзаце.

Этот подход гарантирует, что ширина элемента будет измерена до того, как пользователь увидит изменения на экране, что может быть критично для некоторых приложений, например, для анимаций или точных расчётов верстки.

▶️

Важные моменты

🔘 Поскольку useLayoutEffect блокирует обновление экрана до завершения эффекта, использование его для длительных операций может привести к задержкам и ухудшению производительности.

🔘 Поэтому рекомендуется использовать useLayoutEffect только тогда, когда это действительно необходимо, а для всех остальных побочных эффектов использовать

 useEffect.

CodeBase | Frontend | #react_hook

Please open Telegram to view this post

VIEW IN TELEGRAM

🔥5❤1

1.06K views09:01

CodeBase | Frontend

👩‍💻

Расширение VS Code: Bookmarks

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

➡️

Ссылка на плагин

CodeBase | Frontend | #плагин

Please open Telegram to view this post

VIEW IN TELEGRAM

❤8

1.17K views05:02

CodeBase | Frontend

⚡️

Memos - это открытый сервис для создания заметок, который обеспечивает конфиденциальность.

🔵 Реализован с использованием технологий React и Go, позволяя удобно записывать свои мысли.

😀

Для быстрого запуска с помощью Docker:

docker run -d \
  --init \
  --name memos \
  --publish 5230:5230 \
  --volume ~/.memos/:/var/opt/memos \
  neosmemo/memos:stable

CodeBase | Frontend | #react

Please open Telegram to view this post

VIEW IN TELEGRAM

🔥1

1.17K views05:02

CodeBase | Frontend

⚡️

AFISHA

⚡️

🔵

Сложность: Легкая

🔵

Страницы: Одностраничный

🔵

Язык: русский

🔗

Ссылка на макет

Please open Telegram to view this post

VIEW IN TELEGRAM

🔥2

1.16K views05:02

CodeBase | Frontend

⚡️

Cleave.js - это JavaScript библиотека, которая применяется преимущественно для форматирования вводимого текста, обеспечивая плавную работу.

🔵 Она легка в использовании и проста в освоении.

🔗

Документация

CodeBase | Frontend | #js

Please open Telegram to view this post

VIEW IN TELEGRAM

🔥6👍4

1.09K views05:06

CodeBase | Frontend

⚡️

Dismantle.js — это библиотека для анализа и модификации исполняемого JavaScript-кода.

🟢 Она предоставляет инструменты для работы с абстрактными синтаксическими деревьями (AST), позволяя разработчикам исследовать и изменять структуру и поведение кода.

➡️

Основные возможности включают:

1️⃣

Разбор кода: Преобразование JavaScript-кода в синтаксическое дерево.

2️⃣

Анализ кода: Изучение элементов кода, таких как переменные, функции и выражения.

3️⃣

Манипуляция кодом: Изменение синтаксического дерева для рефакторинга или оптимизации.

4️⃣

Генерация кода: Преобразование измененного синтаксического дерева обратно в код.

👀 Эта библиотека полезна для создания инструментов разработки, таких как линтеры, форматеры и транспайлеры.

🔗

Установка

CodeBase | Frontend | #js

Please open Telegram to view this post

VIEW IN TELEGRAM

🔥3

1.12K views05:01

CodeBase | Frontend

⚡️

Как отобразить сообщение, если JavaScript отключен?

⚡️

🟢 Большинство веб-страниц используют JavaScript, но при его отключении сайт может стать недоступным.

🟢 Некоторые пользователи отключают JavaScript ради безопасности, поэтому важно, чтобы ваша страница работала без него. Проверки должны выполняться на стороне клиента и сервера.

🟢 Если контент не работает без JavaScript, нужно показывать сообщение об ошибке.

1️⃣ Использование HTML тега <noscript>

🔵 Тег <noscript> отображает альтернативный контент в браузерах без поддержки скриптов или с отключенным JavaScript.

➡️ Пример:

<noscript>
Видео не может проигрываться, так как JavaScript отключен.
</noscript>

➡️ Полный пример:

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
  </head>
  <body>
    <h1>Пример тега noscript</h1>
    <noscript>
      <h2>JavaScript отключен в вашем веб-браузере. Некоторые функции не будут работать.</h2>
      <style type="text/css">
        #main-content { display: none; }
      </style>
    </noscript>
    <div id="main-content">
      <h2>JavaScript включен!</h2>
    </div>
  </body>
</html>

2️⃣ Использование метода meta refresh

🟣 Для отображения контента при отключенном JavaScript можно перенаправить пользователя на страницу с сообщением об этом. Метод meta refresh использует тег <meta> с атрибутом http-equiv="refresh" и атрибутом content, указывающим интервал времени до перенаправления.

➡️ Установив интервал в 0, можно мгновенно перенаправить пользователя:

<noscript>
  <meta http-equiv="refresh" content="0;URL=ShowErrorPage.html">
</noscript>

🟣 Если JavaScript отключен, браузер перенаправит пользователя на "ShowErrorPage.html" с предупреждающим сообщением.

CodeBase | Frontend | #js

Please open Telegram to view this post

VIEW IN TELEGRAM

👍10❤‍🔥1👎1

1.11K views05:02

CodeBase | Frontend

⚡️

ESLintESLint

⚡️

➡️ ESLint обеспечивает проверку кода на наличие синтаксических ошибок и предлагает варианты исправлений.

➡️ Хотя в VS Code есть встроенная система IntelliSense для отображения подсказок, ESLint становится более удобным выбором, особенно если требуются различные настройки для JSX, обычного JavaScript или среды Node.js.

➡️ Линтер также может интегрироваться в систему проверки кода, позволяя убедиться в правильности кода перед отправкой файлов в репозиторий.

🔗

Документация

CodeBase | Frontend | #plugin

Please open Telegram to view this post

VIEW IN TELEGRAM

👍6❤3

981 views05:39

CodeBase | Frontend

⚡️

Ключевое слово this

⚡️

В

JavaScript ссылается на контекст выполнения текущей функции или объекта. Его значение определяется тем, как была вызвана функция, а не тем, где она была объявлена.

➡️

Основные правила определения значения this:

1️⃣

Глобальный контекст (контекст выполнения скрипта): вне какой-либо функции this ссылается на глобальный объект (в браузерах это window, в Node.js — `global`).

console.log(this); // window (в браузере)

2️⃣

Внутри функции: если функция вызывается в глобальном контексте, this также будет ссылаться на глобальный объект.

function foo() {
       console.log(this); // window (в браузере)
   }
   foo();

3️⃣

Методы объекта: если функция вызвана как метод объекта, this ссылается на этот объект.

const obj = {
       method: function() {
           console.log(this); // obj
       }
   };
   obj.method();

4️⃣

Конструкторы: при вызове функции как конструктора с помощью new, this ссылается на новый экземпляр объекта.

function Person(name) {
       this.name = name;
   }
   const person = new Person('John');
   console.log(person.name); // John

5️⃣

call, apply и bind: методы call, apply и bind позволяют явно задать значение

 this.

 function greet() {
       console.log(this.name);
   }
   const person = { name: 'John' };
   greet.call(person); // John

6️⃣

Стрелочные функции: у стрелочных функций нет собственного this. Они захватывают значение this из окружающего контекста на момент своего определения.

const obj = {
       method: function() {
           const arrow = () => console.log(this);
           arrow(); // obj
       }
   };
   obj.method();

👀 Значение this может быть сложным для понимания, но понимание контекста вызова функции помогает предсказать, на что будет ссылаться

 this.

CodeBase | Frontend | #js

Please open Telegram to view this post

VIEW IN TELEGRAM

👍11❤2🔥1

1.06K views05:02

CodeBase | Frontend

🐶 The Odin Project

The Odin Project - это бесплатный онлайн-курс, который поможет вам освоить все основные навыки веб-разработки, начиная с HTML и CSS, и заканчивая созданием полноценных веб-приложений.

➡️ Ссылка на проект

CodeBase | Frontend

Please open Telegram to view this post

VIEW IN TELEGRAM

👍6❤1

1.21K viewsedited 09:25

CodeBase | Frontend

⚡️ React.js Cheatsheet – сборник готового кода по множеству тем: компонентам, свойствам, хукам, работе с узлами DOM и т. д.

CodeBase | Frontend

1.17K views05:05

CodeBase | Frontend

⚡️

Задание: Создайте переключаемую боковую панель

⚡️

Периодически мы будем предлагать вам задания для выполнения и прокачки своих навыков.

➡️

Особенности:

🟢Возможность включения и отключения боковой панели

🟢Генерация пунктов меню из объекта JavaScript

➡️

Передовые функции:

🟢 Возможность перехода на различные страницы через взаимодействие с элементами

🟢 Сохранение выбранного состояния при наличии хэша в URL

➡️

В процессе вы узнаете:

🟢 Как проводить проверки

🟢 Манипуляции с классами

🟢 Динамическое отображение элементов

🟢 Использование API истории

🟢 Определение местоположения объекта

🔗

Макет

🔗

Учебник