Bereshpolov

Перед созданием приложения React важно избегать нескольких антипаттернов при написании React. В этой статье мы рассмотрим некоторые из этих антипаттернов в React и обсудим, как писать лучший код. Без лишних слов, давайте начнем. Одна из распространенных ошибок, которую допускают новые разработчики React, — это prop drilling. Это процесс передачи props из родительского компонента в его дочерний компонент. Давайте рассмотрим этот пример: Здесь вы можете видеть, что функция приращения передается вниз через несколько слоев компонентов только для того, чтобы быть использованной в компоненте Child...

В жизненном цикле компонента React компонент перерисовывается при обновлении. Это происходит, если обнаружены различия (т. н. difs) между виртуальным DOM React и DOM в браузере, в этом случае компоненты, содержащие difs (и любые дочерние компоненты этих компонентов), перерисовываются в браузере. Если эта концепция вам незнакома или вы хотите освежить в памяти функциональность виртуального DOM React, ознакомьтесь с этой темой отдельно. Хотя эта функциональность является частью того, что делает React...

Сегодня я объясню, как создать собственный React Hook для модального компонента. Модальные компоненты довольно проблемны из-за проблем с доступностью и структурой в React. Модальные элементы имеют наложение на экране, которое имеет более высокий визуальный приоритет, чем все остальные элементы. Если бы мы использовали z-index, он должен был бы быть самым высоким. Однако это плохая практика, поскольку он глубоко вложен, а родительские элементы, находящиеся высоко в дереве, имеют приоритет CSS. Начнем с создания модального компонента React, который будет использовать пользовательский useModal...

React Redux — это официальный слой привязок React UI для Redux, который в настоящее время очень популярен. Он позволяет вашим компонентам React считывать данные из хранилища Redux и отправлять действия в хранилище для обновления состояния. И если вы знакомы с React Redux, вы столкнетесь с путаницей при выборе между connect и useSelector для получения значений из хранилища, и они могут иметь одинаковые результаты. Чтобы было ясно, connect — это компонент высокого порядка, useSelector — это хук. Использование useSelector может сократить шаблонный код и встроить эту логику в сами компоненты...

React имеет много функций, которые постоянно обновляются или создаются время от времени. Это библиотека JavaScript с открытым исходным кодом для создания пользовательских интерфейсов, и вы можете понять, почему она так популярна. Я даже использую ее ежедневно в своих проектах, и когда я думаю, что я понял все, что касается React, я быстро обнаруживаю, что мне еще многому нужно научиться. Что приводит меня к React Hooks. React Hooks был представлен еще в 2018 году на конференции React. Как способ использовать состояние и другие эффекты без необходимости определять класс JavaScript...

Если вы начнете использовать React-Hooks, вашему компоненту в какой-то момент может понадобиться метод жизненного цикла. И вот тогда вы начнете использовать useEffect() (он же Effect Hook). И тут — бум! Вы столкнулись с поведением бесконечного цикла и понятия не имеете, почему, черт возьми, это происходит. Если это произойдет, эта статья объяснит, почему и как это можно предотвратить. Приведенный ниже фрагмент кода является примером использования Effect Hook, но он имеет поведение бесконечного цикла...

Недавно я работал над проектом, который потребовал от меня научиться использовать хук useContext в React. До сих пор я использовал хук useState и передавал props для обмена переменными между компонентами. Посмотрев пару видео, прочитав пару статей и использовав хук в своем приложении, я могу честно сказать, что я фанат. Мой код стал чище и практичнее. Я чувствовал, что это долгий и сложный путь. Поэтому я хочу поделиться с вами тем, как и когда вы будете использовать этот хук useContext — это React...

Java эволюционировала. Экосистема стала зрелой. Библиотеки проверены в бою. И теперь современные функции Java, такие как записи, HttpClient, новые методы String и Optional, делают написание чистого, лаконичного кода проще, чем когда-либо, — без необходимости делать все самостоятельно. В этой статье расскажу Вам 15 вещей, которые вам следует прекратить разрабатывать с нуля, — и какие современные инструменты и библиотеки Java следует использовать вместо этого. Если вы все еще создаете JSON с помощью конкатенации строк, остановитесь сейчас...

Введение В распределенной архитектуре микросервисов обеспечение согласованности данных между несколькими сервисами является одной из самых больших проблем. Шаблон Saga — это шаблон проектирования, используемый для управления распределенными транзакциями в микросервисах, гарантирующий конечную согласованность между различными сервисами. В этом руководстве шаблон Saga будет разобран простым и понятным способом с использованием реальных примеров и полностью рабочей реализации с Spring Boot, Kafka, MySQL и логикой компенсации...

Spring Boot аннотации — это не просто синтаксический сахар, это основа того, как все работает под капотом. Независимо от того, создаете ли вы монолит, микросервис или полноценное облачное приложение, аннотации Spring контролируют все: от конфигурации и внедрения зависимостей до API REST, планирования и безопасности. Но вот правда, о которой вам никто не скажет: «Существуют сотни аннотаций, но только несколько из них действительно создают или разрушают дизайн, масштабируемость и удобство обслуживания вашего приложения»...

Java разработчики часто создают утилитарные классы, типа ValidationUtil, StringUtil или DateUtil - заполненные статическими методами. Это быстрый способ, но: В Java 8 пришло более элегантное лучшее решение: функциональные интерфейсы и лямбда-выражения. Такой подход делает ваш код более гибким, тестируемым и современным. В этой статье вы увидите, как заменить статические утилитарные классы функциональными интерфейсами — используя полный, реальный рабочий пример. Шаблон обычного утилитарного класса...

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