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

Я слишком остро реагирую? Или React слишком остро реагирует?

Когда я только начинал заниматься веб-разработкой, это было в основном с Python/Django. Все рендерилось на стороне сервера, и я ни разу не задумывался о "производительности рендеринга". Спустя 10 лет, когда компьютеры стали по крайней мере в два раза быстрее, производительность рендеринга стала более важной проблемой, чем когда-либо. Одностраничные приложения (SPA) и фронтенд-библиотеки, такие как React, поощряют и позволяют создавать высокодинамичные веб-страницы. К сожалению, по моему опыту, рекомендуемый по умолчанию способ написания кода React на самом деле не очень хорошо поддерживает высокодинамичные страницы.

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

https://devtails.xyz/@adam/am-i-overreacting-or-is-react-over-reacting

✍️ @React_lib