⚛️ Совет по 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

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