Использование шаблонов проектирования группы GoF в React

В этой статье поговорим о том, как написать в React многократно используемый код, используя три шаблона проектирования группы Gang-of-Four.

Rus https://habr.com/ru/company/rshb/blog/680770/

Eng https://blog.bitsrc.io/using-gof-design-patterns-with-react-c334f3ea3147

✍️ @React_lib

React with TypeScript. Бесплатный курс от Matt Pocock.

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

Как лучше всего типизировать реквизиты компонентов? Что это за странные ошибки useRef?

Именно для этого и предназначен данный учебник по React с TypeScript!

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

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

✍️ @React_lib

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