useSyncExternalStore - The underrated React API

https://thisweekinreact.com/articles/useSyncExternalStore-the-underrated-react-api

✍️ @React_lib

React.js: Документальный фильм

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

А что если мы скажем вам, что первое знакомство React с публичной сферой было совсем не гламурным? Документальный фильм React.js: The Documentary расскажет вам полную историю ранних дней React, сосредоточившись на преданной группе разработчиков, которые помогли вывести его на мировую арену. Эту историю рассказывает звездный состав разработчиков, таких как Том Оккино, Кристофер Чедо, Пит Хант, Себастьян Маркбоге, Дэн Абрамов и многие другие.

Загляните на сайт cult.honeypot.io, где собраны нерассказанные истории разработчиков, связанные с открытым исходным кодом, карьерой и другими интересными вещами, которыми занимаются разработчики.

Honeypot - это платформа для трудоустройства разработчиков, цель которой - обеспечить разработчиков отличной работой. Хотите увидеть, что мы собой представляем? Посетите сайт honeypot.io, чтобы найти работу по душе.

источник

✍️ @React_lib

Как уменьшить размер компонента 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