React-компоненты на сервере: плюсы, минусы и подводные камни

В статье автор делится своим опытом использования React Server Components (RSC) в Next.js. Он рассматривает плюсы и минусы использования RSC, а также дает рекомендации по их применению.

👉 @sWebDev

Объединение рефов в React

Функция useForkRef() позволяет объединить два или более рефов в один. Принимает в качестве аргументов один или несколько рефов. В качестве результата функция возвращает функцию-реф, которая привязывает к себе все переданные рефы.

Пример useForkRef():

function App() {
  const [inputRef, inputRef2] = useForkRef(input);

  inputRef.current.addEventListener("change", handleChange);
  inputRef2.current.addEventListener("change", handleOtherChange);

  return (
    <input ref={input} />
  );
}

В этом примере мы используем функцию useForkRef() для создания двух отдельных обработчиков событий для одного и того же элемента DOM. Первый обработчик будет вызывать функцию handleChange(), а второй - функцию handleOtherChange().

👉 @sWebDev

Анимация на Anime.js

Абстрактная трехмерная анимация на Anime.js.

👉 @sWebDev

28 продвинутых функций Next.js, которые должен знать каждый

В статье рассматриваются некоторые продвинутые функции Next.JS, например, легкое удаление свойств JSX или проверка типов для файла next.config.js.

👉 @sWebDev

Symbiote.js 2.0

Это новая версия популярной фронтенд-библиотеки для создания веб-компонентов и приложений.

Symbiote.js отличается от других популярных библиотек тем, что она не пытается заменить собой веб-платформу или создать новый синтаксис. Вместо этого, она расширяет стандартные браузерные API, позволяя создавать гибкие и расширяемые решения.

👉 @sWebDev

Highway race

Пример реализации игры на Three.js.

👉 @sWebDev

Будущее React.use и React.useMemo: мощная альтернатива контекстным селекторам

Контекстные селекторы - это способ получения доступа к данным из контекста React. Они могут помочь предотвратить ненужные рендеры, но имеют ряд недостатков.

👉 @sWebDev

Реально ли IT-специалисту переехать в Великобританию без предложения о работе, без высшего образования и без знания английского языка? Ответ: да! Рассказываем, как это сделать.

Виза Global Talent дала возможность более 8000 IT-специалистам переехать в Британию в 2022 году. Она выдаётся на срок до 5 лет, по ней можно работать в любой компании, фрилансить, открывать собственный бизнес и даже претендовать на паспорт!

Чтобы получить эту визу, не обязательно иметь высшее образование, не нужно знать язык на высоком уровне, а заявку можно подать из любой страны. И, пожалуй, самое главное – не нужно обладать каким-то исключительным талантом! Почти все IT-специалисты могут претендовать на эту визу.

Подписывайтесь на наш Telegram-канал, где мы даём массу полезной информации о релокации: https://t.iss.one/movetalent

Пишите нам в WhatsApp: +44 7496 949122 или в Telegram: @relocode_dm. Мы проводим бесплатные консультации, на которых поможем разобрать ваш кейс и подобрать наиболее подходящий способ релокации.

Circular terrain Generator

Инструмент, который позволяет создавать круговые трехмерные ландшафты на Three.js.

👉 @sWebDev

Knex.js

Knex.js - это библиотека для работы с базами данных с открытым исходным кодом, которая упрощает разработку приложений, взаимодействующих с базами данных. Knex.js поддерживает различные типы баз данных, включая PostgreSQL, MySQL, SQL Server, SQLite и Oracle.

👉 @sWebDev

Работа с функцией reactive() Vue

Какое назначение у функции reactive() в Vue.js?

👉 @sWebDev

React Suspense в трех различных архитектурах

В статье рассказывается о том, как использовать React Suspense в трех различных архитектурах: клиентской, серверной и серверно-компонентной.

👉 @sWebDev

Как работать с промисами на стороне клиента

В React 19 был добавлен новый хук use(Promise), который упрощает работу с промисами в клиентских компонентах. Этот хук позволяет получить значение из промиса, не используя дополнительные хуки, такие как useState или useEffect.

Синтаксис:
const [value, loading, error] = use(promise);

Параметры:
promise - промис, значение которого необходимо получить.

Возвращаемое значение:
value - значение, полученное из обещания.
loading - флаг, указывающий, что обещание еще не выполнено.
error - ошибка, возникшая при выполнении обещания.

Пример:

import { use } from "react";

function MessageComponent({ messagePromise }) {
  const [message, loading, error] = use(messagePromise);

  if (loading) {
    return <div>Loading...</div>;
  } else if (error) {
    return <div>Error: {error.message}</div>;
  } else {
    return <div>{message}</div>;
  }
}

👉 @sWebDev

Slider

Анимированное слайд-шоу на Anime.js.

👉 @sWebDev

Использование createStateContext для совместного использования хука useState

Статья рассказывает о том, как использовать контекст React для совместного использования состояния между компонентами.

Контекст React часто ошибочно считается решением для управления состоянием. На самом деле контекст предназначен для внедрения зависимостей. Вы предоставляете значение обертке компонента, а затем любой дочерний компонент может использовать это значение с помощью хука useContext.

👉 @sWebDev