Лучший путь обучения React с серверными компонентами

Мне всегда нравилось делиться своими знаниями. Когда я люблю язык, библиотеку или фреймворк, я больше, чем исследую каждую мельчайшую деталь, я думаю о том, как я могу помочь людям изучить их и полюбить их так же сильно, как и я. https://scastiel.dev/better-learning-path-react

Создание фильтра поиска в реальном времени в React: пошаговое руководство

1. Введение
2. Требования
3. Шаг 1. Настройка проекта
4. Шаг 2. Создание входных данных
5. Шаг 3. Визуализация списка элементов
6. Шаг 4. Создание функции фильтрации
7. Шаг 5. Получение элементов из API и их фильтрация
8. Шаг 6: Небольшой рефакторинг (Бонус)
8.1. Компонент ItemList
8.2. Входной компонент
8.3. Вызов API
9. Заключение

https://dev.to/alais29/building-a-real-time-search-filter-in-react-a-step-by-step-guide-3lmm

Как повторно использовать и делиться компонентами React в 2023 году: пошаговое руководство

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

https://itnext.io/how-to-reuse-and-share-react-components-in-2023-a-step-by-step-guide-85642e543afa

Телепортация в 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/