Как создать реф в React?

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

👉 @sWebDev

13.8 billion years ago

Проект анимированного земного шара, выполненный на Three.js.

👉 @sWebDev

Strapi

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

👉 @sWebDev

Контекст React

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

const MyContext = React.createContext(defaultValue);
Создаёт объект Context. При рендере компонента, который подписан на этот объект, React получит текущее значение контекста из ближайшего подходящего Provider в дереве компонентов.

Аргумент defaultValue используется, если для компонента нет подходящего Provider выше в дереве. Если передать undefined в значении Provider, то компоненты, использующие этот контекст, не будут использовать defaultValue.

👉 @sWebDev

The Impossible Lightbulb w/ GSAP

Забавная анимация, выполненная при помощи GSAP.js.

👉 @sWebDev

Fastify

Фреймворк для работы с Node.js. Основной задачей является производительность. Разработчики утверждают, что он способен обрабатывать до 60 000 запросов в секунду. Основные преимущества: удобная обработка синхронных и асинхронных ошибок, валидация входных параметров, расширяемость. Подробный обзор по ссылке.

👉 @sWebDev

⭐ refine Open Source Hackathon ⭐

Build a refine project like CRUD app, admin panel, internal tool, forms, storefront, dashboard, library, data provider, auth provider, live provider, etc.

Win $1500 in prizes and also special swag kits from the sponsors!

For more detail: https://dub.sh/refine-hackathon

Что такое состояние React

В данной статье раскроем формальную сторону вопроса «что такое состояние» для лучшего понимания фундаментальных основ надёжности любого клиентского приложения. Хочется уже поставить точки в некоторых вопросах терминологии, чтобы чётче отвечать на вопросы «что, когда и зачем брать» при выборе библиотек и технологий для клиентского веб-приложения.

👉 @sWebDev

Bun

Bun — это современная среда выполнения JS типа Node.js или Deno со встроенной поддержкой JSX и TypeScript. Она разрабатывалась с акцентом на трех вещах:
быстрый запуск;
высокая производительность;
самодостаточность.
По ссылке знакомимся с Bun. Обратите внимание, что пока это экспериментальная штуковина, поэтому использовать ее для разработки производственных приложений не рекомендуется.

👉 @sWebDev

Interactive particles text create with three.js

Анимированный текст, выполненный на Three.js.

👉 @sWebDev

Управление состоянием в React приложениях

Не секрет, что построить полноценный стор на react context достаточно тяжело, а оптимизировать его ещё тяжелее. Это не всегда так, вариант простой и быстрой настройки в статье по ссылке.

👉 @sWebDev

Как использовать механизм двустороннего связывания в Angular?

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

👉 @sWebDev

Displacement Map Transition

Анимированная смена изображений при скролле. Выполнено с применением библиотеки Three.js.

👉 @sWebDev

Фрагменты React

Возврат нескольких элементов из компонента является распространённой практикой в React. Используя <React.Fragment>...</React.Fragment>, можно добавить родительский тег к элементам JSX без добавления дополнительного узла к DOM.

    render() {
    return (
        <React.Fragment>
        <ChildA />
        <ChildB />
        <ChildC />
        </React.Fragment>
    );
    }

👉 @sWebDev

Как создать бота Discord с Node.js, Discord.js и OpenAI GPT-3

В данном руководстве мы создадим умного бота Discord, который сможет отвечать на сложные вопросы и выполнять требуемые задания. Для этой цели воспользуемся Node.js, Discord.js и OpenAI API для GPT-3, одной из самых крупных и умных обученных нейронных сетей.

👉 @sWebDev

Ellipsis.js

Ellipsis.js — это мини-библиотека для обработки многострочного многоточия. Используя эту библиотеку вы можете настроить обрезание текста в вашем веб-приложении.

👉 @sWebDev

Typing text transition

Анимация появления текста, выполненная на GSAP.js.

👉 @sWebDev

Interactive particles

Интерактивная сцена, выполненная с помощью библиотеки Three.js.

👉 @sWebDev