ReactJS *

С момента своего первого релиза в 2015 году Redux использовался и продолжает использоваться на множестве клиентских приложений. Несмотря на все достоинства, которые предоставляет данное решение (предсказуемое управление состоянием, удобная отладка с помощью Redux DevTools и др.), некоторые разработчики сетуют на излишнее количество “шаблонного кода” при реализации даже самого просто функционала и предпочитают альтернативные инструменты для управления состоянием в клиентских приложениях.  

Чтобы избежать чрезмерного количества кода при работе с Redux, разработчики применяли различные соглашения (например, ducks-modular-redux), а также создавали свои решения, представляющие собой абстрактный слой над Redux’ом (например, redux-crud, свои оболочки над библиотекой и прочее).   

В конце концов, авторы Redux выпустили свое решение под названием Redux Toolkit, позволяющее минимизировать описанные выше проблемы и которое было тепло встречено разработчиками. Также в состав данной библиотеки было включено решение под названием RTK Query, которое призвано упростить работу с API, а также с кэшированием данных.  

Получение данных с сервера и последующая их визуализация – типовые задачи веб-приложений. Как правило, веб-приложения также вносят изменения в эти данные, отправляют измененные данные на сервер, хранят закэшированные данные на клиенте и при необходимости обновляют их. Помимо этого, они также выполняют множество других задач, например:  

Пишем typescript кастомное модальное окно для React приложения.

А также запилим удобный портал, кратко обсудим смысловое отличие модалки от других видов всплывающих окон и конечно же покроем всё тестами на Jest.

Написание нативных Swift модулей для React Native на примере Yandex Mapkit или коротко о том, куда потратить пару часов свободного времени, если ты React Native разработчик.

Сегодня я бы хотел рассказать о библиотеке redux-saga. Она уже достаточно давно используется во frontend-программировании, но не является интуитивно понятной, что может помешать начинающим разработчикам освоить её быстро и начать применять в своих проектах. В данной статье я максимально просто постараюсь объяснить максимально основные принципы этой технологии и некоторые полезные возможности. Намеренно отказываюсь от сравнительного анализа в пользу одних либо других технологий, т.к. выбор — это личное дело каждого, но чтобы его сделать, необходимо обладать определёнными знаниями.

В статье используются специализированные термины, поэтому предполагается, что вы имеете общее представление о React, Redux, генераторах и итераторах из ES6.

Из официальной документации следует, что redux-saga — это библиотека, которая ориентирована на упрощение и улучшение работы с сайд-эффектами (side-effects, любыми взаимодействиями с внешней средой, например, запрос на сервер) и облегчение их тестирования. В redux сага — это middleware (слой, работающий с момента диспатча (dispatch) экшена (action) и до обработки его редьюсером (reducer)), который может запускаться, останавливаться и отменяться из основного приложения с помощью обычных действий redux. Библиотека использует такое понятие ES6 как генераторы (Generators), и благодаря этому наши асинхронные потоки выглядят как обычный синхронный код.

Пишем минималистичный кастомный RadioGroup компонент для React приложения и парочку unit тестов на Jest.

Вы используете TypeScript, но впадаете в ступор перед, когда видите типы в сторонних библиотеках? Generics, generic constraint, infer, rest infer, conditional и recursive types, satisfies вызывают головную боль? Мы постараемся снизить градус сложности и напишем типы для роутинга в React приложении. Данный материал будет полезен как фронтендерам, так и бекендерам.

В данной статье описан простой пример написания docker-compose.yml файла на примере контейнеризации приложения с использованием Spring Boot на бэкенде, React на фронте, PostgreSQL в качестве базы данных и pgAdmin - для просмотра данных в базе.

Пишем минималистичный кастомный select компонент для React приложения. Покрываем всё тестами на Jest.

Пишем на typescript простой, переиспользуемый пагинатор для React приложения. Покрываем его тестам на Jest.

Хорошо, react. Как много мы используем всего, потому что так исторически сложилось: пишем функции задом наперед (сначала объяви, потом вызывай). Оборачиваем все в стрелочные функции и константы с ними, когда достаточно именованной функции. Этот список можно хорошенько продолжить.

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

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

В рамках своей работы, я не раз сталкивался с проблемой, что нужно отслеживать изменение в LocalStorage в совершенно независимых компонентах.

Были попытки отслеживания изменений через "window.addEventListener", но и тут меня ждала неудача, так как в этом случае отслеживание будет происходить только в другой вкладке браузера и тем самым я дошел до создания своего хука, назвал его - useLocalStorageEffect. Далее уже будем говорить о нем.

Я давно пишу код, а React использую более пяти лет.

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

К реализации этих идей я приступил около трех лет назад. Сначала проверил концепцию, потом решил оформить всё в виде библиотеки.

А о том, что из этого вышло, я бы хотел рассказать в этой статье.

localStorage для авторизации в React приложении.

Пишем drag-and-drop загрузчик файлов для React приложения с помощью Context, подхода Compound components и нескольких кастомных хуков

Прикручиваем react-dnd за 5 минут

Пишем систему валидации форм для React приложений

Современные технологии – это истинное благо для любого бизнеса. Но точно так же они могут стать самым настоящим проклятьем. Только представьте. Вы захотели создать собственное мобильное приложение. Идея уже есть, спонсоры найдены, и, казалось бы, выпускай себе приложение и покоряй им мир стандартными «Efficiency, Resilience and Innovation • Trust • Human-Centered approach • Passion • Excellence». Но в действительности все оказывается куда сложнее. Вы приходите к специалистам и не понимаете, кого слушать. Одни наперебой убеждают вас, что приложение стоит сделать на технологии React Native, а другие упорно доказывают, что нет лучшего решения, чем разработка на Swift/Kotlin. Звучит знакомо? Тогда эта статья точно вам поможет.

Как можно использовать github pages для своих fullstack pet проектов с бэкендом на статических файлах)

Данный гайд описывает один из возможных подходов к организации фичи темизации приложения.