Типы React в TypeScript

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

Я расскажу о некоторых часто используемых типах для React, чтобы в будущем мы с вами больше не паниковали.

https://jser.dev/2023-05-31-react-types-in-typescript/

✍️ @React_lib

Самоучитель по React для начинающих ⚛️

00:00:00 introduction
00:01:41 installation
00:02:48 new project
00:05:00 how to restart dev server
00:05:36 project folder explanation
00:08:13 App component
00:09:14 new Header component
00:13:30 new Footer component
00:16:32 new Food component
00:19:22 conclusion

источник

✍️ @React_lib

React reconciliation: как это работает и почему это должно нас волновать

Каждый раз, когда мне кажется, что я знаю все о том, как React рендерит компоненты, Вселенная находит способ удивить меня. Такая невинная вещь, как простое утверждение if, может полностью перевернуть ваше сознание. Так случилось и в эту субботу, когда я случайно просматривал документацию по React, чтобы отложить то, что я должен был сделать в соответствии со списком дел на выходные, висящим у меня на стене. Очередной момент "подождите, это не может быть правильным" привел к тому, что еще один план на выходные исчез в пустоте, а за ним последовало еще одно глубокое исследование и статья. Кому вообще нужны эти ToDo? Они же не были важными, верно?

https://dev.to/adevnadia/react-reconciliation-how-it-works-and-why-should-we-care-417e

✍️ @React_lib

Экосистема React в 2023 году

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

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

https://www.builder.io/blog/react-js-in-2023

✍️ @React_lib

Построение анимированной выдвижной панели вкладок с помощью React и Tailwind CSS

В этом руководстве мы рассмотрим, как создать интерактивную выдвижную панель вкладок с помощью React.js и Tailwind CSS. Мы рассмотрим основы настройки структуры вкладок, добавления интерактивности с помощью React и оформления вкладок для создания элегантного отзывчивого дизайна. Если вы новичок в React или хотите расширить свой набор инструментов для работы с внешним миром, эта статья предлагает практическое погружение в создание динамических компонентов пользовательского интерфейса.

let allTabs = [
{
id: "home",
name: "Home",
},
{
id: "blog",
name: "Blog",
},
{
id: "projects",
name: "Projects",
},
{
id: "arts",
name: "Arts",
},
];

export const SlidingTabBar = () => {
const tabsRef = useRef<(HTMLElement | null)[]>([]);
const [activeTabIndex, setActiveTabIndex] = useState<number | null>(null);
const [tabUnderlineWidth, setTabUnderlineWidth] = useState(0);
const [tabUnderlineLeft, setTabUnderlineLeft] = useState(0);

useEffect(() => {
if (activeTabIndex === null) {
return;
}

const setTabPosition = () => {
const currentTab = tabsRef.current[activeTabIndex] as HTMLElement;
setTabUnderlineLeft(currentTab?.offsetLeft ?? 0);
setTabUnderlineWidth(currentTab?.clientWidth ?? 0);
};

setTabPosition();
}, [activeTabIndex]);

return (
<div className="flew-row relative mx-auto flex h-12 rounded-3xl border border-black/40 bg-neutral-800 px-2 backdrop-blur-sm">
<span
className="absolute bottom-0 top-0 -z-10 flex overflow-hidden rounded-3xl py-2 transition-all duration-300"
style={{ left: tabUnderlineLeft, width: tabUnderlineWidth }}
>
<span className="h-full w-full rounded-3xl bg-gray-200/30" />
</span>
{allTabs.map((tab, index) => {
const isActive = activeTabIndex === index;

return (
<button
key={index}
ref={(el) => (tabsRef.current[index] = el)}
className={`${
isActive ? `` : `hover:text-neutral-300`
} my-auto cursor-pointer select-none rounded-full px-4 text-center font-light text-white`}
onClick={() => setActiveTabIndex(index)}
>
{tab.name}
</button>
);
})}
</div>
);
};


https://www.julienthibeaut.xyz/blog/build-animated-sliding-tab-bar-with-react-tailwind-css

✍️ @React_lib

Аутентификация JWT в React с помощью react-router

В этой статье мы рассмотрим бесшовную интеграцию JWT-аутентификации с React и react-router. Мы также узнаем, как работать с публичными маршрутами, защищать аутентифицированные маршруты и использовать библиотеку axios для выполнения API-запросов с маркером аутентификации.

https://dev.to/sanjayttg/jwt-authentication-in-react-with-react-router-1d03

✍️ @React_lib

Реализация аудио в 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.iss.onemo. Если это так, то давайте сразу перейдем к делу.

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