Как уменьшить размер компонента React: 3 профессиональных приема

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

https://levelup.gitconnected.com/top-3-react-tricks-pros-like-to-use-to-reduce-the-size-of-component-980900370505

✍️ @React_lib

React рекурсивно рендерит дочерние компоненты, но есть один нюанс

https://alexsidorenko.com/blog/react-render-children-prop/

✍️ @React_lib

Использование React в приложениях Angular

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

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

https://netbasal.com/using-react-in-angular-applications-1bb907ecac91

✍️ @React_lib

React, я люблю тебя, но ты сводишь меня с ума

Ты у меня не первый. До тебя у меня были длительные отношения с jQuery, Backbone и Angular. Я знал, чего следует ожидать от фреймворка: лучший пользовательский интерфейс, продуктивность и опыт разработки, но также фрустрация от необходимости изменения способа написания кода в угоду парадигме фреймворка.

Когда я тебя встретил, я находился в длительных отношениях с Angular. Я был измотан watch и digest, не говоря уже о scope. Я искал то, что не заставляло бы меня чувствовать себя несчастным.

Rus https://habr.com/ru/companies/timeweb/articles/693072/

Eng https://marmelab.com/blog/2022/09/20/react-i-love-you.html

✍️ @React_lib

Будущее рендеринга в React

Популярность React как библиотеки для создания пользовательского интерфейса за последние несколько лет только росла и довольно быстро. На момент написания этой статьи она имеет более 14 миллионов еженедельных загрузок с npm, что, как я знаю, не является корректным показателем популярности библиотеки, но одно только расширение React Devtools chrome имеет более 3 миллионов еженедельных активных пользователей. Тем не менее, шаблоны рендеринга в React практически не менялись до появления React 18.

https://prateeksurana.me/blog/future-of-rendering-in-react/

✍️ @React_lib

useSignal() — будущее веб-фреймворков

Signal - это способ хранения состояния вашего приложения, аналогичный useState() в React. Но есть несколько ключевых отличий, которые дают Signals преимущество.

https://www.builder.io/blog/usesignal-is-the-future-of-web-frameworks

✍️ @React_lib

Как создавать собственные пользовательские React Hooks

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

https://blog.logrocket.com/create-your-own-custom-react-hooks/

✍️ @React_lib

Как избежать хитрых ловушек в асинхронных стейт менеджерах

В наши дни подход local-first к созданию веб-приложений набирает все большую популярность. Большинство таких баз данных предоставляют асинхронные API, и это существенно влияет на работу наших приложений React.

https://evilmartians.com/chronicles/how-to-avoid-tricky-async-state-manager-pitfalls-react

✍️ @React_lib

Реализация слайдера изображений и текста на React.js с вариантами оптимизации

В данной статье мы разберем задание, которое может встретиться в рамках собеседования на должность фронтенд-разработчика, а именно реализацию слайдера изображений.

https://betterprogramming.pub/implementing-image-and-text-slider-with-react-js-and-optimizations-7a16af998548

✍️ @React_lib

Понимание серверных компонентов в React 18 и Next.js 13

С выходом Next.js 13 у них появился новый каталог /app, который имеет более новые подходы к рендерингу, выборке данных, а также использует новейшие компоненты React Server Components.

https://programmingwithmosh.com/react/understanding-server-components-in-react-18-and-next-js-13/

✍️ @React_lib

Читаем исходный код – Chakra UI

Я провел более года в качестве главного инженера в одной из команд News UK по разработке платформ, где мы создавали библиотеки и инструменты для других инженеров компании. Одним из таких инструментов была фантастическая система проектирования.

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

https://alexkondov.com/reading-code-chakra-ui/

✍️ @React_lib

A cure for React useState hell?

https://dev.to/builderio/a-cure-for-react-usestate-hell-1ldi

✍️ @React_lib

5 небольших и скрытых библиотек React, которые вы уже должны использовать

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

https://javascript.plainenglish.io/5-small-and-hidden-react-libraries-you-should-already-be-using-49c8725c492f

✍️ @React_lib

Добавьте движение в свои приложения с помощью одной строки кода

AutoAnimate - это анимационная утилита с нулевой конфигурацией, которая добавляет плавные переходы в ваше веб-приложение. Вы можете использовать ее с React, Solid, Vue, Svelte или любым другим приложением JavaScript.

https://auto-animate.formkit.com/

✍️ @React_lib