ReactJS *

Создаем React Native проект на Expo 52 с Tamagui с нуля. В этой статье я поэтапно показываю что я сделал.

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

Трудно представить код современного React-приложения без таких функций как useState, useEffect, useRef и так далее.

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

Создание кастом-хуков это прекрасная возможность выделить часто переиспользуемый код в отдельные сущности.

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

Ниже мы рассмотрим примеры некоторых из них.  

Исправить опечатку в документации занимало 5 минут компиляции. Страницы с картинками загружались медленно.

Я считаю, чтобы посмотреть документацию не нужен JavaScript. Расскажу как переехал с docusaurus + react на starlight + astro и оптимизировал сайт под экологию.

В данной статье я хочу затронуть такую интересную тему, как обновление бандла Capacitor-приложений (CodePush, live update и т.д).

Сталкивались ли Вы когда-нибудь с ситуацией, когда необходимо незначительно обновить мобильное приложение, написанное на Capacitor?

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

А если нужно сделать релизы во всех популярных магазинах? Google Play, RuStore, AppGallery и, конечно же, самые нерасторопные из существующих — App Store. Выпуск во всех интересующих магазинах может занять значительное время. Вы, конечно, можете автоматизировать этот процесс при помощи различных инструментов, но, так или иначе, это занимает время на одобрение модераторами.

Привет, Хабр. Я Сергей, фронтенд-разработчик в Clevertec. И сегодня поделюсь опытом использования обновленной 7-й версии React Router. Расскажу, как мы реорганизовали структуру роутинга. Покажу, как избавились от лишних «букав кода», улучшили производительность приложения, создали навигацию по страницам и еще много полезного.

IDE упрощают рефакторинг, но при работе с большими или распределёнными кодовыми базами, особенно без полного контроля над ними, часто требуется помощь codemods. Используя абстрактные синтаксические деревья (AST), codemods автоматизируют изменения кода с высокой точностью и минимальными усилиями, что особенно полезно при критических изменениях в API.

В статье мы рассмотрим, как codemods решают задачи удаления feature toggles и рефакторинга сложных компонентов React, а также узнаем про типичные подводные камни и как их избежать в крупных проектах.

Как всего одна небольшая React-задача помогает глубже понять уровень кандидата на собеседовании? Разбираем нюансы работы с хуками, асинхронностью, состоянием гонки и сайд-эффектами. На первый взгляд задача кажется простой - всего лишь компонент, загружающий данные по username. Но в процессе решения выявляются ключевые моменты: правильно ли кандидат управляет состоянием, учитывает ли смену пропсов, обрабатывает ошибки и предотвращает race conditions. Этот вопрос помогает не просто проверить знания, а увидеть, как кандидат рассуждает и принимает технические решения.

Управление состоянием в React — один из самых важных моментов при разработке приложений. Многие начинают с useState и useReducer, но со временем понимают, что для глобального состояния нужно что-то более мощное. Здесь хорошо подойдут Redux, MobX, Recoil и, конечно, Zustand.

Zustand (читается «цуштанд», в переводе с немецкого — «состояние») — это простая и мощная библиотека для управления состоянием в React, которая решает проблемы существующих решений.

Всем привет! Меня зовут Владимир и работаю джуниор фронтенд разработчиком в одной из лучших компаний :-)

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

Всем привет! Сейчас без live-coding'a никуда: на собеседованиях часто дают одну-две задачки, которые нужно решить за определённое время. Сами задачи могут быть несложными (не супер-пупер алгоритмическими), но новички могут переволноваться и не справиться с ними.

Поэтому в этой статье я хотел бы описать типовые задачи, которые встречаются в этой секции на позицию frontend или backend разработчика (если бэк на JS). Это поможет вам получить общее представление о том, что может ждать вас.

Привет, Хабр! 

Сегодня поговорим о блокировке документов при совместной работе — задаче, которая на первый взгляд кажется простой, но таит в себе множество подводных камней. В этой статье я расскажу о нашем опыте реализации такого механизма в одном из проектов. Мы рассмотрим, с какими проблемами столкнулись, какие решения пробовали и к какому итогу пришли. 

Уже почти два года я не писал приложения на традиционном React стэке. Решил попробовать использовать современные практики: сделал небольшой ленгдинг с формой. И получил JS файл 500 килобайт!

Мне нужен swiper для плавной анимации переключения между "нативными" окнами. Но один swiper весит 80 килобайт. В связи с этим решил провести сравнение и найти хороший аналог.

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

Используя CopilotKit, LangGraph и Google Maps API, мы создадим приложение, которое не только действует по сценариям, но и предлагает решения. Мы изучим, как реализовать human‑in‑the‑loop, чтобы пользователь мог одобрять или отклонять действия агента.

Приятного прочтения (‑:

При разработке у нас зачастую возникает необходимость прямого взаимодействия с DOM-элементами. Для такого случая React предоставляет нам механизм рефов (refs), который позволяет получать доступ к элементам после того, как они зарендерятся. Чаще всего используются обычные объектные рефы через useRef (обзовём их так), но также существует другой подход — callback refs. Этот метод даёт нам дополнительную гибкость и контроль над жизненным циклом элементов, позволяя выполнять необходимые нам специфические действия в точные моменты привязки и отвязки элементов. В этой статье я хочу объяснить, что такое callback refs, как они работают, показать проблемы при их использовании и примеры их использования.

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

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

Я занимаюсь фронтенд разработкой на React последние 6 лет (в роли full-stack разработчика). Я знал и слышал, что существуют хуки useCallback и useMemo, которые нужны для оптимизации рендеринга. При этом про их использование я слышал только в теории или на собеседованиях.

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

Привет, друзья!

В праздники я провел небольшое исследование представленных сегодня на рынке бесплатных инструментов с участием "искусственного интеллекта" для помощи в веб-разработке, результатами которого хочу с вами поделиться, авось кому-нибудь пригодится.

Обратите внимание, что я акцентировал внимание на бесплатных решениях для написания кода клиентской части веб-приложений.

Список протестированных инструментов:

• Сodeium
• Devv_
• V0
• ChatGPT
• GPT4All
• Cursor
• OpenHands
• Aider
• Cody
• Tabnine
• Mutable
• Pieces
• Codex

Далее я подробнее расскажу о первых трех (Codeium, Devv, V0) и немного о двух следующих за ними (ChatGPT, GPT4All) решениях из представленных в списке, как наиболее "выдающихся" с моей точки зрения. Остальные сервисы (начиная с cursor и ниже) в той или иной степени похожи на codeium и `devv`, но показывают более плохие результаты генерации кода по запросу, исправления ошибок и документирования кода, а также менее удобны в использовании и иногда требуют дополнительных настроек, например, указания ключа OpenAI, установки лишних инструментов (тулкитов), являются условно бесплатными и т.п.

Книга «React 19. Разработка веб‑приложений на JavaScript» — тот нечастый случай, когда пособие по самым последним средствам разработки выходит на русском языке параллельно с англоязычными изданиями. Обычно российские издательства берут в перевод лицензионную книгу и только через год она выходит на русском языке. Но не в этом случае. Книга Владимира Дронова — это новейшее руководство по React 19, начиная с базовых концепций и заканчивая продвинутыми инструментами, такими как Redux, Formik и анимации. Отдельное внимание уделено практическому применению библиотеки, включая разработку полноценного веб-приложения с использованием Firebase.

Недавно, работая с компонентом ввода номера телефона в форме регистрации, я столкнулся с весьма неочевидной особенностью работы различных обработчиков событий. Связано это непосредственно с onChange, onPaste и onInput. Мне пришлось провести достаточно глубокий ресерч, чтобы разобраться в особенностях, которые я встретил. Начнем по порядку.

Всем привет! Я джуниор фронтенд разработчик. И на примере одной кнопки хотел бы рассказать как иногда применение библиотек в проекте - это излишества, которые стоит избегать.

Давай начнем по порядку. Проект написан на NextJs, TS, TailwindCSS. И есть на сайте анимационная кнопка, которые при скролле красиво появляется и при клике открывает модалку.