React: революция использования фигурных скобочек

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

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

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

function useClient(clientId) {
const [loadedClient, setLoadedClient] = useState(null)
const [isLoading, setIsLoading] = useState(false)

useEffect(() => {
const loadClient = async () => {
try {
setIsLoading(true)
const clientData = {} // actual data loading call goes here
setLoadedClient(clientData)
}
finally {
setIsLoading(false)
}
}

loadClient()
}, [clientId])

return [loadedClient, isLoading]
}

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

✍️ @React_lib

Шпаргалка по React

https://reactcheatsheet.com/

✍️ @React_lib

Соглашения о присвоении имен в React JS

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

Именование файлов и папок - одно из самых простых действий, которые мы делаем как разработчики. Но это и одна из самых важных. Правильно названный файл или папка поможет вам и другим разработчикам быстрее найти и понять ваш код.

https://www.upbeatcode.com/react/react-naming-conventions/

✍️ @React_lib

Серверный компонент Grok React от Quizzes

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

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

https://betterprogramming.pub/grok-react-server-component-by-quizzes-df4417905bc4

✍️ @React_lib

Понимание параллелизма в React

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

https://www.bbss.dev/posts/react-concurrency/

✍️ @React_lib

Типы 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.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