Шаблоны проектирования React

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

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

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

Presentational & Container Component
Higher Order Components
Render Props
Compound Components
Hooks

https://dev.to/anuradha9712/react-design-patterns-2acc

✍️ @React_lib

⚛️ Совет по React

Отложите создание non-primitive значений, если вы используете их в массиве зависимостей

✍️ @React_lib

⚛️ Когда разделять JSX на новые компоненты? Когда создавать пользовательские хуки? Как абстрагировать уровень данных от представления?

✍️ @React_lib

Как React 18 повышает производительность приложений

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

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

https://vercel.com/blog/how-react-18-improves-application-performance

✍️ @React_lib

❌ Избегайте использования useState() для сложного управления состояниями в React

✅ Вместо этого используйте useReducer

✍️ @React_lib

Совет

Проблема: Если в приложении 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