Совет

Проблема: Если в приложении React используются providers, то может потребоваться повторить их конфигурацию в нескольких местах:

1. The app's root
2. Storybook
3. Tests

Решение: Создадим компонент AppProviders. Тогда мы сможем использовать его в нескольких местах.

✍️ @React_lib

React 18 Design Patterns and Best Practices: Design, build, and deploy production-ready web applications with ease and create powerful user experiences, 4th Edition
Автор: Carlos Santana Roldan (2023)

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

✍️ @React_lib

Понимание компонентов React Server

Изучите основы React Server Components, чтобы лучше понять, зачем (и когда) их внедрять.

https://vercel.com/blog/understanding-react-server-components

✍️ @React_lib

Частично управляемые компоненты: Декларативный паттерн проектирования в React

В React принято различать Controlled и Uncontrolled компоненты. Но реальный мир не такой уж черно-белый...

Вкратце:
Uncontrolled компоненты управляют изменениями внутри себя, внутренне.
Controlled компоненты управляют своими изменениями извне, изнутри.
Недавно я стал автором React-компонента с древовидным представлением под названием react-arborist. После работы над таким сложным компонентом я почувствовал отсутствие необходимой концепции в нашем React-сообществе.

https://www.jameskerr.blog/posts/partially-controlled-react-components/

✍️ @React_lib

Использование спрайтовых иконок svg в React

Существует множество способов использовать svg-иконки в приложениях React. Самый интуитивный, но и самый худший - это писать код svg непосредственно в компоненте в виде JSX.

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

https://www.jacobparis.com/content/svg-icons

✍️ @React_lib

Все хуки и концепты React в одной статье

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

Мы используем React для создания переиспользуемых компонентов, которые могут логично использоваться для создания UI. Создание компонентов в React также просто, как и создание функций 🤩 .

Для примера 👇🏻, ниже показан простой react компонент, в который мы отправляем данные как аргумент, который можно легко указать внутри функции.

function Component(props){
return <h1>{props.text}</h1>
}

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

original https://dev.to/nyctonio/all-react-hooks-and-concepts-in-a-single-post-1daf

✍️ @React_lib

Infinite scroll (бесконечный скролл) +Virtualization (виртуализация) на примере ReactJS+ RTK Query

На сегодняшний день любое уважающее себя предприятие, будь то магазин строительных товаров или компания по предоставлению услуг в сфере бизнеса, все они стремятся «выложить» свои товары и услуги в интернет. Это и понятно – мы живем в век бурно развивающихся технологий и доступ в интернет имеет более 65% населения мира (около 5.3 млрд. человек), а к 2025 году это число увеличится до 6.54 млрд. (внушительно, не правда ли?). Так, о чем я, всех их нужно обслуживать, всем им нужно предлагать услуги, товары и т.д. Как говорится: «На вкус и цвет – товарища нет» и правда сколько людей – столько мнений, а в нашем случае товаров и услуг. На фоне этого возникает резонный вопрос: «А как все это отобразить у меня на сайте, чтобы пользователь не ждал до следующего года загрузки страницы сайта, когда к тому времени успеют появиться еще товары, которые необходимо будет подгрузить?». При такой картине мира и самых оптимистичных прогнозах о темпах появления новых вещей, мы имеем неосторожность войти в некую рекурсию.

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

✍️ @React_lib

TypeScript Handbook для React Developers – Создаем безопасное приложение Todo

К концу этого урока вы будете хорошо разбираться в TypeScript и будете готовы разрабатывать безопасные приложения React. Итак, без лишних слов приступим!

https://www.freecodecamp.org/news/typescript-tutorial-for-react-developers/

✍️ @React_lib

Awesome React

Коллекция удивительных вещей, связанных с экосистемой React

React General Resources
React Tutorials
React Development Tools
React Frameworks
React Component Libraries
React State Management and Data Fetching
React Styling
React Routing
React Libraries
React Testing
React Awesome Components
React Components Sandboxes
React Forms
React Tables and Grids
React Maps
React Charts
React Renderers
React Internationalization
React Graphics and Animations
React Integration
React Real Apps
React Native General Resources
React Native Navigation
React Native Awesome Components
React Native Libraries

https://github.com/enaqx/awesome-react

✍️ @React_lib

Как загрузить файл в React

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

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

https://pragmaticpineapple.com/how-to-upload-file-in-react/

✍️ @React_lib

Девять порочных практик React. Разбираем частые ошибки

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

Rus https://habr.com/ru/companies/ncloudtech/articles/685400/

Eng https://cult.honeypot.io/reads/bad-react-habits-to-kick/

✍️ @React_lib

❌ Избегайте смешивания бизнес-логики с компонентами React.

Вместо этого создавайте слои абстракции, которые взаимодействуют с ними.

✍️ @React_lib

Ответы в блоге: Мой опыт перехода пакетов на ESM

Последние 8 с лишним лет экосистема JS медленно переходила к использованию ES-модулей ("ESM") в качестве стандартного подхода для публикации и использования JS-кода. Подобно переходу Python 2->3, это было невероятно сложно и болезненно.

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

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

https://blog.isquaredsoftware.com/2023/08/esm-modernization-lessons/

✍️ @React_lib

Построение системы дизайна с помощью веб-компонентов React

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

https://www.voorhoede.nl/en/blog/building-design-system-react-web-components/

✍️ @React_lib

Что такое react-afc

react-afc - библиотека для более простого (чем в простом react) уменьшения количества ненужных ререндеров дочерних компонентов.

Задачи и применение
В обычном react функциональный компонент вызывается каждый раз когда изменяется его состояние или пропсы, что вызывает повторное создание всех callback'ов и переменных.
Так как передаваемые данные из предыдущего и текущего рендера не равны, это порождает ререндер дочерних компонентов.

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

✍️ @React_lib

8 лучших практик проектирования компонентов React.js

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

https://dev.to/blossom/8-best-practices-for-reactjs-component-design-4jn5

✍️ @React_lib

Используйте createStateContext для совместного использования хука useState

Несмотря на то, что многие превозносят UseContext в React как решение для управления состоянием, на самом деле он не имеет никакого отношения к управлению состоянием.

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

import React, { useContext } from "react"
export function createStateContext<T>() {
const StateContext = React.createContext<
| undefined
| Readonly<[T, React.Dispatch<React.SetStateAction<T>>]>
>(undefined)
function useStateContext() {
const tuple = useContext(StateContext)
if (tuple === undefined) {
throw new Error(
`use${StateContext.displayName} must be used within a ${StateContext.displayName}Provider`,
)
}
return tuple
}
return [StateContext, useStateContext] as const
}


https://www.jacobparis.com/content/use-state-context

✍️ @React_lib

React Suspense в трех различных архитектурах

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

Client-side rendering: Показывайте фаллбэк во время загрузки React.lazy; декларативно обрабатывайте состояния загрузки/ошибок при получении данных с помощью suspense-совместимого фреймворка.

Server-side rendering: Все вышеперечисленное + серверные компоненты, обернутые в <Suspense />, выборочно гидрируются на клиенте.

Server components: Все вышеперечисленное + асинхронные серверные компоненты, обернутые в <Suspense />, передаются клиенту поэтапно: сначала это fallback, затем - финальный контент.

А теперь более глубокое погружение!

https://elanmed.dev/blog/suspense-in-different-architectures

✍️ @React_lib

React Quickly, 2nd Edition
Автор: Azat Mardan (2023)

Это практическое руководство по React для веб-разработчиков. Опираясь на более чем 100 тщательно подобранных и четко объясненных примеров, вы научитесь разрабатывать на React, используя уже имеющиеся у вас навыки работы с JavaScript и веб-разработки. Полностью переработанное второе издание содержит множество новых тем, включая главы, посвященные функциональным компонентам, генерации статических сайтов и CSS в JS. Кроме того, вам понравятся новые примеры проектов - от интерактивного меню до книжного интернет-магазина! Все примеры соответствуют лучшим практикам веб-доступности, чтобы сделать ваши приложения открытыми для всех.

✍️ @React_lib

⚛️ Я просмотрел бесчисленное количество PRs, и я вижу эту ошибку в React снова и снова.

❌ Объект ref не уведомляет об изменении значения ref в useEffect.

✅ Вместо этого используйте функцию обратного вызова ref, чтобы всегда получать последнее значение ref.

✍️ @React_lib