Телепортация в React: позиционирование, контекст стекирования и порталы

Изучаем, как работает позиционирование CSS, что такое Stacking Context, как избежать переполнения: скрытого с помощью CSS, почему мы не можем делать все с помощью CSS и нуждаемся в порталах, как работают порталы.

https://www.developerway.com/posts/positioning-and-portals-in-react

Я хотел поделиться с вами некоторыми мыслями о классной библиотеке под названием Preact. Основная цель этой статьи — дать вам дружественное введение в Preact, которое может оказаться полезным, если вы уже знакомы с React.

https://hackernoon.com/why-react-developers-love-preact

Сила виртуального DOM в React: подробное объяснение


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

https://www.syncfusion.com/blogs/post/react-virtual-dom.aspx

3+1 распространенные ошибки React, которые приводят к ненужным повторным рендерам

Хотя мы часто используем синтаксис функций и компонентов в наших ежедневных процедурах кодирования, полностью ли мы осознаем, как они манипулируют DOM и сколько раз они повторно рендерятся? Давайте погрузимся в эффективное использование функций запоминания, среди других методов.

Помните, что универсального решения не существует, поэтому тщательное планирование и оценка имеют решающее значение. Всегда спрашивайте себя: будет ли мой компонент повторно запускать, повторно отображать или повторно инициализировать эту функцию при каждом обновлении реквизита? Или каждый раз, когда он вызывается?

https://medium.com/@rickmint/3-1-react-common-mistakes-that-triggers-unnecessary-re-renders-72d1e993d7bf

Справочник по TypeScript для разработчиков React — Как создать приложение Todo с типобезопасностью

Если вы разработчик React и хотите изучить TypeScript или усовершенствовать свои навыки с его помощью, это руководство именно для вас. Я проведу вас через использование TypeScript в приложении React, создав классическое приложение todo.

Я собираюсь рассказать обо всем, что вам нужно знать, чтобы начать работу с TypeScript в качестве разработчика React. Вы узнаете, как обрабатывать состояние и реквизиты со строгой типизацией, как создавать компоненты React с помощью TypeScript, как использовать TypeScript с React Hooks и как использовать TypeScript с Context API.

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

https://www.freecodecamp.org/news/typescript-tutorial-for-react-developers/

Осваивайте принципы SOLID как свои пять пальцев всего за 8 минут!

В этом блоге я продемонстрирую реализацию принципов SOLID в приложении React. К концу этой статьи вы полностью усвоите принципы SOLID. https://hackernoon.com/mastering-solid-principles-like-the-back-of-your-hand-in-just-8-minutes?source=rss

5 самых известных угроз безопасности React и способы их решения

Как одна из самых популярных библиотек JavaScript, React стала отраслевым стандартом для разработки одностраничных и мобильных приложений, а лично мне больше всего нравится библиотека программирования. Он такой простой, но сложный, легкий в освоении и структурированный: неудивительно, что везде появляются, как грибы, приложения React.
Однако, как и любая другая технология, она не застрахована от потенциальных уязвимостей системы безопасности; знание их позволит вам быть готовым и не допустить, чтобы один или несколько из них повлияли на вашу работу и веб-сайт.

https://medium.com/@rickmint/5-most-famous-react-security-threats-and-how-to-solve-them-%EF%B8%8F-79871e774f7f

Как загрузить файл в React

Мы расскажем, как загрузить один файл, загрузить несколько файлов и посмотрим, как вы можете использовать стороннюю библиотеку, которая сделает всю тяжелую работу за вас. Но сначала давайте погрузимся в загрузку одного файла в React с помощью fetch. https://pragmaticpineapple.com/how-to-upload-file-in-react/

Как React 18 повышает производительность приложений

https://vercel.com/blog/how-react-18-improves-application-performance

Prismane / Создавайте отличные приложения, сверхбыстро 107+ React компонентов 484+ готовых тем 20+ хуков React https://www.prismane.io/

Как React 18 улучшает производительность приложения.

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

Начнем с повторения основ "долгих (долго выполняющихся) задач" (long tasks) и соответствующих метрик производительности.

Читать дальше →https://habr.com/ru/articles/749866/

Вы когда-нибудь хотели создать свою собственную диаграмму для Интернета?

Эта галерея, основанная на сотнях примеров графиков, знакомит вас с основными концепциями визуализации данных с помощью React и D3.js. Он также предоставляет готовые к использованию шаблоны для более быстрого начала работы.

Прекратите использовать готовые компоненты для визуализации данных → единственным ограничением вашего творчества станет воображение .

https://www.react-graph-gallery.com/

[Перевод] Ускорить таблицу на React в 1 000 раз, изменив лишь одну строку.

JP Camara, главный инженер Wealthbox, в своём блоге поделился интересным опытом ускорения TanStack Table — новой версии React-библиотеки для создания функциональных таблиц — аж до 10 мс. Делимся с вами переводом его статьи.

Читать далееhttps://habr.com/ru/companies/netologyru/articles/750246/

Как добавить уведомления о публикациях в реальном времени в ваши приложения React

Вы должны знать React и Firebase, чтобы приступить к вещам, описанным ниже.

Однако это также может быть реализовано в других базах данных, таких как SQL или NoSQL. https://www.freecodecamp.org/news/how-to-add-post-notifications-to-your-react-applications/

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

Модальные элементы — это части приложения, которые отображаются в виде наложения на веб-странице и отображают дополнительную информацию, запрашивают ввод данных пользователем или выполняют определенные действия. Прочитав эту статью, вы узнаете, как использовать React для создания настраиваемого компонента многократного использования, который вы можете добавить в свою библиотеку компонентов. https://blog.openreplay.com/creating-easy-custom-modals-with-react/