Использование useState() для создания динамического состояния

Хук useState() используется для создания статического состояния, которое не меняется во время работы компонента. Однако его также можно использовать для создания динамического состояния, которое может изменяться в зависимости от внешних факторов.

Пример:

  function DynamicState() {
  const [state, setState] = useState(0);

  useEffect(() => {
    // Получаем данные из внешнего источника
    const data = fetch("https://example.com/data").then(response => response.json());

    // Обновляем состояние с помощью данных из внешнего источника
    setState(data.state);
  }, []);

  return (
    <div>
    <p>Текущее состояние: {state}</p>
    </div>
  );
  }

В этом примере мы используем хук useEffect() для получения данных из внешнего источника. Затем мы используем эти данные для обновления состояния компонента с помощью хука useState().

👉 @sWebDev

5-Way Gradient Generator

Интерактивный пятисторонний градиент на Vue.js.

👉 @sWebDev

React: разрабатываем кастомный useEffect

В данной статье вы найдете туториал по разработке кастомного хука, функционал которого будет аналогичен функционалу встроенного хука useEffect, за исключением того, что наш useEffect будет повторно выполняться только при изменении его зависимостей любого типа (неважно, примитивы это или объекты).

👉 @sWebDev

GraphQL.js

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

👉 @sWebDev

Реклама. ООО "Яндекс" ИНН 7736207543 Erid LdtCKfwJx

🔥 Разыгрываем Станцию Дуо Макс! Это первая колонка Яндекса с камерой и сенсорным экраном — флагман новой линейки устройств.

Что делать? Подпишитесь на телеграм-каналы @yandex и @techno_yandex, а потом нажмите кнопку «Участвовать» под этим постом. 15 декабря в 13:00 бот рандомно выберет победителя из числа участников.

▶️ А как производят и тестируют умные устройства Яндекса на заводе в Гуанчжоу, смотрите в мини-сериале YaC 2023 — на Кинопоиске и YouTube.

GSAP ScrollTrigger

Анимации на основе положения прокрутки на GSAP.js.

👉 @sWebDev

Улучшение DX с помощью новой трансформации значений входных свойств @Input в Angular

Статья рассказывает о новой функции Angular 17, которая позволяет трансформировать значения входных свойств компонентов.

В Angular 16 и более ранних версиях значения входных свойств компонентов просто копируются из шаблона в компонент. Это может привести к проблемам, если значение свойства необходимо преобразовать перед использованием. Например, если входное свойство должно быть строкой, но пользователь вводит число, то значение будет преобразовано в строку автоматически, но может быть неверным.

Angular 17 добавляет возможность преобразования значений входных свойств с помощью декоратора @Input(). Для этого необходимо передать декоратору функцию, которая будет выполнять преобразование.

👉 @sWebDev

Haunted.js

Haunted.js - библиотека JavaScript, которая предоставляет API для создания интерактивных пользовательских интерфейсов (UI) с использованием Web Components. Она основана на API React Hooks, что делает ее простой в использовании и эффективной.

👉 @sWebDev

Text scroll and hover effect with GSAP and clip

Анимированный скролл на GSAP.JS.

👉 @sWebDev

React: реализация якорей

Какой из следующих методов можно использовать для реализации якоря в React?

👉 @sWebDev

WebAssembly: короткий обзор ассемблера для фронтенда

В последнее время фронтенд все больше и больше обрастает новыми технологиями, одна из них — WebAssembly. На ней можно написать полноценное web‑приложение и почти все на что способна ваша фантазия. В статье мы рассмотрим, что такое WebAssembly, как работает и с чем её едят.

👉 @sWebDev

Настройка ссылки, возвращаемой компонентом при использовании хука useRef()

Хук React, который позволяет настроить ссылку, возвращаемую компонентом при использовании хука useRef().

При использовании useRef() по умолчанию ссылка возвращает экземпляр компонента, к которому она прикреплена. Однако иногда требуется вернуть другой объект или функцию. Для этого можно использовать useImperativeHandle().

Например, следующий код создает компонент, который возвращает кнопку с настраиваемой функцией фокусировки:

function FancyButton(props, ref) {
  const buttonRef = useRef();

  useImperativeHandle(ref, () => ({
    focus() {
      buttonRef.current.focus();
    },
  }));

  return (
    <button ref={ref}>
      Fancy Button
    </button>
  );
}

👉 @sWebDev

Happy New Year 2023

Анимированная новогодняя открытка на Anime.js.

👉 @sWebDev

Современный подход к созданию Angular-приложений

Статья о современном подходе к разработке на Angular с использованием Bit.io, что позволяет разработчикам централизованно хранить компоненты и в следствии упрощает их совместное использование и разработку.

👉 @sWebDev

Spectral.js

Spectral.js — это библиотека смешивания цветов, которая учитывает свойства света.

Если вы смешиваете два цвета с помощью простых значений RGB, вы можете получить некрасивые промежуточные цвета.

👉 @sWebDev

Confetti Cannon

Анимация движения и падения конфетти на Greensock.js.

👉 @sWebDev

Частично управляемые компоненты React: шаблон проектирования для предоставления пользователю контроля над состоянием компонента

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

👉 @sWebDev

Anime.js V3 logo animation

Анимация логотипа на Anime.js.

👉 @sWebDev