React 19 больше не будет поддерживать fetch() 🌶🌶🌶

Вам придется использовать React.cache(), чтобы избежать дублирования запросов fetch().

https://github.com/facebook/react/pull/28896

✍️ @React_lib

React 19: forwardRef → ref

✍️ @React_lib

Авторизация в React - базовые сведения

Вэтой статье я хочу рассказать об архитектуре приложения, реализующего функцию аутентификации и авторизации. Статья построена на минималистичном примере. Тут главное понять концепцию. Сделав это, приложение можно дополнить новым функционалом и включить в любое своё приложение.

https://danshin.ms/simple-login-react-app/

✍️ @React_lib

⚛️ Как использовать композицию в React для создания расширяемых компонентов?

✍️ @React_lib

⚛️ Вместо того чтобы смешивать бизнес-логику в компонентах React, мне нравится создавать небольшие и предсказуемые абстракции reducer с помощью useReducer

✍️ @React_lib

⚛️ useEffect против useLayoutEffect

useEffect: асинхронный и не задерживает отрисовку DOM в браузере.

useLayoutEffect: синхронный, и он задерживает отрисовку DOM для браузера. Он выполняет свой код непосредственно перед отрисовкой в браузере.

✍️ @React_lib

Совет по React💡

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

✍️ @React_lib

Как использовать пользовательский хук для обработки состояний массива в компонентах 💡

✍️ @React_lib

Переход на React

В Daily Dev рассказали, как мигрировали с Preact на React, стремясь решить проблемы разработки и повысить производительность. Переход, осуществленный в ходе командного хакатона, потребовал значительного планирования, тестирования и корректировки кодовой базы. Этот переход обеспечил лучшую совместимость с Next.js, улучшил опыт разработки и подготовил платформу к будущим технологическим достижениям.

https://daily.dev/blog/moving-back-to-react

✍️ @React_lib

Создание и отправка электронных писем с помощью React

Коллекция высококачественных нестилевых компонентов для создания красивых электронных писем с использованием React и TypeScript. Благодаря поддержке темного режима он снижает сложность создания отзывчивых писем. Кроме того, он позаботится о несоответствиях между Gmail, Outlook и другими почтовыми клиентами.

https://github.com/resendlabs/react-email

✍️ @React_lib

⚛️ Как типизировать общие компоненты в React с помощью TypeScript

✍️ @React_lib

⚛️ React 19 будет поставляться с хуком useOptimistic(): сделайте вид, что все пойдет как надо... если не пойдет.

✍️ @React_lib

Как я уменьшил размер образа Docker с 1,43 ГБ до 22,4 МБ

Если вы занимаетесь веб-разработкой, то, вероятно, уже знаете об идее контейнеризации и о том, как это здорово и все такое.

Но при работе с Docker размер образа вызывает серьезные опасения. Зачастую он превышает 1,43 ГБ только для шаблонного проекта, который мы получаем из create-react-app.

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

Трюки будут показаны для ReactJS, но они применимы к любому NodeJS-приложению.

https://dev.to/mohammadfaisal/how-i-reduced-docker-image-size-from-143-gb-to-224-mb-53nc

✍️ @React_lib

⚛️ При изучении React мне больше всего пришлось столкнуться с проблемой разделения задач.

Вот пример того, как можно отделить бизнес-логику от пользовательского интерфейса в React

✍️ @React_lib

⚛️ Совет по React💡

Как сделать интерактивные HTML-узлы доступными для родительских компонентов с помощью хука useImperativeHandle.

✍️ @React_lib

Master React in 5 Days: Become a React Expert in Under a Week
Автор: Eric Sarrion (2023)

Погрузитесь в ускоренный метод обучения, который позволит вам добиться гигантских успехов. Главы тщательно продуманы, чтобы научить вас основным понятиям React, таким как компоненты, реквизиты, состояние, события, жизненный цикл и хуки, не тратя время на сложные объяснения. Благодаря ясному и доступному стилю изложения вы сможете погрузиться в тонкости React с первой страницы. Примеры кода сопровождаются подробными пояснениями, что позволяет быстро разобраться в тонкостях этой технологии. Вы будете создавать приложения на основе React, закрепляя полученные знания и навыки.

✍️ @React_lib

⚛️ Напишите лучшее и безопасное условие с помощью сопоставления паттернов

✍️ @React_lib

Как работает React

Это глубокое погружение во внутреннее устройство react с целью объяснить, какие концепции были заложены в то, чтобы сделать react тем инструментом, который вы используете уже несколько лет.

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

Цель этого проекта - объяснить, как все это создается, какие концепции используются и какие важные «пути кода» следует упомянуть.

https://incepter.github.io/how-react-works/docs/intro/

✍️ @React_lib

⚛️ Совет по React + JavaScript: guard clauses и early return

- Делает код более читабельным
- Позволяет избежать вложенных операторов if
- Создает natural flow

✍️ @React_lib