Реализация аудио в React-сайтах

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

https://blog.openreplay.com/implementing-audio-in-react-websites/

✍️ @React_lib

RSC From Scratch. Часть 1: Серверные компоненты

В этом техническом погружении мы с нуля реализуем очень упрощенную версию React Server Components (RSC).
Это глубокое погружение будет опубликовано в нескольких частях:


Это глубокое погружение не объясняет преимущества React Server Components, как реализовать приложение с использованием RSC или как реализовать фреймворк с их использованием. Вместо этого он проведет вас через процесс их самостоятельного "изобретения" с нуля.

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

🚧 Это глубокое погружение не предназначено для ознакомления с тем, как использовать серверные компоненты. Мы работаем над документированием серверных компонентов на сайте React. Пока же, если ваш фреймворк поддерживает Server Components, обратитесь к его документации.

😳 По педагогическим соображениям наша реализация будет значительно менее эффективной, чем реальная, используемая в React.
Мы будем указывать в тексте будущие возможности оптимизации, но концептуальная ясность будет для нас приоритетнее эффективности.

https://github.com/reactwg/server-components/discussions/5

✍️ @React_lib

Лучшие библиотеки анимации для React🎉

Сегодня пользовательские интерфейсы Web-приложений имеют множество элементов, которые делают их привлекательными для пользователей. Разработчикам приходится искать новые способы реализации пользовательских интерфейсов с анимацией и переходами, чтобы соответствовать этим современным требованиям.

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

https://dev.to/arafat4693/best-animation-libraries-for-react-156n

✍️ @React_lib

Полное введение в библиотеку React

Библиотека React: что это такое, как начать работу, каковы ее преимущества и как получить максимальную отдачу от этой библиотеки JavaScript.

https://www.codemotion.com/magazine/languages/a-complete-introduction-to-the-react-library/

✍️ @React_lib

Demystifying React Hooks: Использование, примеры и распространенные ошибки

React - это библиотека JavaScript, используемая для построения пользовательских интерфейсов. В React хуки - это функции, позволяющие использовать состояние и другие возможности React в функциональных компонентах.

Здесь перечислены все крючки, доступные в React в настоящее время:

useState()
useEffect()
useContext()
useReducer()
useCallback()
useMemo()
useRef()
useImperativeHandle()
useLayoutEffect()
useDebugValue()

https://hackernoon.com/demystifying-react-hooks-usage-examples-and-common-mistakes

✍️ @React_lib

Hyper Fetch

⚡ Фреймворк для получения и обмена данными в реальном времени.

https://hyperfetch.bettertyped.com/

✍️ @React_lib

Пять лучших библиотек управления состояниями в React

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

https://blog.openreplay.com/top-five-lightweight-state-management-libraries-for-react/

✍️ @React_lib

Оптимизация производительности React - memoization demystified

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

В этом блоге мы рассмотрим, как мемоизация компонентов и правильное разделение кода помогают выжать максимум из приложения. Мы предполагаем, что вы имеете общее представление о том, как работают useCallback, useMemo и React.memo. Если это так, то давайте сразу перейдем к делу.

https://www.bigbinary.com/blog/react-performance-optimization-memoization-demystified

✍️ @React_lib

Ускорение разработки на React с помощью Refine

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

https://blog.openreplay.com/speed-up-react-development-with-refine/

✍️ @React_lib

5 библиотек React для повышения уровня ваших проектов

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

https://livecycle.io/blogs/react-libraries/

✍️ @React_lib

React Programming: The Big Nerd Ranch Guide
Автор: Loren Klingman (2023)

Используйте React для написания надежного, декларативного кода, создания корзин и других функций электронной коммерции, оптимизации производительности, а также для получения опыта компонентного и сквозного тестирования. Попутно вы научитесь использовать такие инструменты, как Create React App, функциональные компоненты, хуки, ESLint, React Router, вебсокеты, библиотека React Testing Library и Cypress.

✍️ @React_lib

Руководство по созданию анимационного сайта на основе React 3D с ThreeJS

Узнайте, как создать 3D-анимацию в React, используя такие технологии, как WebGi (на базе Three.js) и GSAP. Сначала мы научимся находить 3D-модели и отображать их на своем сайте с помощью WebGi. Затем с помощью React и GSAP мы создадим 3D-анимацию этой модели. Далее мы узнаем, как оптимизировать 3D-анимацию в React для мобильных устройств. Наконец, мы создадим сайт для последующей публикации.

⌨️ (0:00:00) Intro
⌨️ (0:01:27) Project setup
⌨️ (0:07:12) Building website navigation
⌨️ (0:15:02) Building jumbotron
⌨️ (0:21:42) Building sound section
⌨️ (0:29:27) Building display section
⌨️ (0:33:27) How to find and load 3D models
⌨️ (0:36:55) Building WebGi viewer component
⌨️ (0:53:17) Animating 3D model with GSAP scroll animation
⌨️ (1:13:42) Implementing 3D model preview mode
⌨️ (1:32:27) Optimizing 3D animation for mobile phones
⌨️ (1:43:31) Building production-ready website and uploading
⌨️ (1:45:07) Outro

источник

✍️ @React_lib

React with TypeScript

Возможности TypeScript и опыт разработчиков отлично сочетаются с React, но начало работы может оказаться запутанным.

Как лучше всего типизировать реквизиты компонентов? Что это за странные ошибки useRef?
Именно для этого и предназначен данный учебник по React с TypeScript!
Начиная с самого начала внедрения поддержки TS в проект React, вы вскоре научитесь правильно вводить хуки и осваивать компоненты. Вы узнаете все, что нужно для продуктивной работы с React и TypeScript.

Темы учебника включают:

Чтение определений типов React для отладки ошибок и обеспечения правильного использования
Определение реквизитов для пользовательских компонентов и компонентов функций React.FC.
Использование умозаключений TypeScript в своей работе
Поддержка дочерних компонентов
Типизация и переопределение обработчиков событий
Использование ComponentProps для извлечения свойств из импортированных компонентов или элементов HTML DOM
Понимание API и типизация useState, useCallback, useEffect и других крючков React Hooks. К концу семинара вы будете уверенно использовать React с TypeScript в своих собственных проектах!

https://www.totaltypescript.com/tutorials/react-with-typescript


✍️ @React_lib

React: как сделать динамический суффикс в <input />, который будет двигаться вместе с набранным текстом

Задача
Необходимо сделать input с помощью React, в котором, после текста отображается какое то значение. Будем называть это значение суффиксом.

Условия
Cуффикс не должен подмешиваться к самому значению инпута, т.e. чтобы мы на каждый change эвент не брали строку и не отделяли этот суффикс, а потом все снова складывали

Суффикс во время ввода должен всегда быть виден

Суффикс может быть другим react элементом (например картинкой, или текстом)

Если мы передадим во время работы приложения новое значение пропа суффикса -- он должен нормально перерендериться, инпут не должен сломаться

Суффикс нельзя выделить, скопировать, как либо с ним провзаимодействовать. Он не должен перекрывать поле инпута

Поведение инпута никак не должно отличаться от обычного

https://habr.com/ru/articles/743768/

✍️ @React_lib

Телепортация в React: Позиционирование, стекирование контекста и порталы

Рассмотрим, как работает CSS-позиционирование, что такое контекст стекирования, как избавиться от overflow:hidden с помощью CSS, почему мы не можем сделать все с помощью CSS и нуждаемся в порталах, как работают порталы

https://www.developerway.com/posts/positioning-and-portals-in-react


✍️ @React_lib

Переход от useState к useReducer в React Hooks

useState и useReducer - это хуки React, позволяющие управлять состоянием компонентов. useState - это более простой хук, позволяющий управлять одним фрагментом состояния, в то время как useReducer - более мощный и позволяет управлять более сложными состояниями, которые могут иметь несколько значений и требуют более сложных обновлений.

https://hackernoon.com/migrating-from-usestate-to-usereducer-in-react-hooks

✍️ @React_lib

Создание лучшего и более быстрого представления кода

Новая версия GitHub Code View предоставляет пользователям множество новых возможностей для улучшения качества чтения и изучения кода, и мы преодолели ряд уникальных технических препятствий, чтобы предоставить эти возможности без ущерба для производительности.

https://github.blog/2023-06-21-crafting-a-better-faster-code-view/

✍️ @React_lib

Лучший путь обучения React с помощью серверных компонентов

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

https://scastiel.dev/better-learning-path-react

✍️ @React_lib

Как работает функция useState() внутри React?

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

https://jser.dev/2023-06-19-how-does-usestate-work/

✍️ @React_lib

Как повторно использовать и совместно использовать компоненты React в 2023 году: Пошаговое руководство

Узнайте, насколько простым может быть совместное использование кода с помощью интуитивно понятного подхода Bit к многократно используемым компонентам React.

https://itnext.io/how-to-reuse-and-share-react-components-in-2023-a-step-by-step-guide-85642e543afa

✍️ @React_lib