ReactJS *

React-Query - Общий обзор и мотивация к применению. Первая проба технологии для фронтенд команды компании Chibbis. Общий обзор технологии и практика внедрения.

На майской конференции React Conf 2024 команда React не только презентовала версию библиотеки React 19, но и рекомендовала использовать для старта новых JavaScript-проектов один из четырех фреймворков: Next.js, Remix, RedwoodJs или Expo. Позже аналогичная рекомендация появилась в официальной документации по React. Из этих фреймворков Next.js может похвастаться самым большим комьюнити, документацией и удобством. Если вы до сих пор его не освоили, то мы идем к вам!

Привет, Хабр! В этой статье расскажем, что такое Next.js, и покажем вам на примере небольшого pet-проекта его базовые возможности.

Всем привет! На связи руководители Frontend‑практики ГК Юзтех. В этой статье мы подводим итоги 2024 года и делимся нашими прогнозами на 2025 год. Приводим мнение трех экспертов по ключевым трендам фронтенд‑разработки и фреймворков, которые будут актуальными в следующем году.

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

Что делать? Логичное решение — максимально упростить бота и написать его на стороне фронтенда с отправкой результата на бэкенд и получением ответа одним запросом. Думаю, многие баловались или могут представить, что это несложно, но нужно писать множество конструкций и условий.

Я же предлагаю в статье посмотреть, как написать бота с помощью простого советского JavaScript‑генератора.

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

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

В этой статье я поделюсь примерами таких случаев, разделив их на категории для удобства и наглядности. Надеюсь, этот материал будет полезен!

Мир React долгое время делился на две «сферы»: серверный рендеринг (SSR) и клиентский рендеринг (CSR). Приложения обычно подгружали часть контента с сервера для быстрого старта, а затем загружали большой бандл JS для полного интерактивного опыта на клиенте. Однако это приводило к дублированию логики и дополнительной головной боли при оптимизации.

Сегодня громко обсуждаются React Server Components (RSC) — новый подход к рендерингу компонентов, при котором логика, которая не должна выполняться на клиенте, может быть полностью «вырезана» до отдачи готовой HTML-структуры. Это обещает уменьшить бандлы, улучшить производительность и упростить архитектуру.

Next.js 13 — фреймворк, который уже предлагает нативную поддержку RSC и новые возможности по маршрутизации, загрузке данных и оптимизации. Почему это важно и как начать?

React v19 теперь доступен на npm!

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

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

В этой серии статей я рассказываю о Convex — новом открытом и бесплатном решении BaaS (Backend as a Service — бэкенд как услуга), которое выглядит очень многообещающе и быстро набирает популярность среди разработчиков.

На сегодняшний день Convex предоставляет реактивную базу данных смешанного типа, механизм аутентификации/авторизации, файловое хранилище, планировщик задач и инструменты интеллектуального поиска.

Эта вторая часть серии, в которой мы поговорим об аутентификации и авторизации.

• Первая часть

Итак, в предыдущем посте мы многое разложили по полочкам и разобрали проблемы кодовой базы. Осталось есть ощущение, будто что-то еще не так. Хочется чего-то более элегантного.

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

Большинство нормально структурированных приложений придерживается ее высокоуровнево, но на деле она вас не особо ограничивает. Есть много сходств со стандартной MVC-архитектурой:

Я вас понимаю. Да – еще один. Но давайте посмотрим, вдруг правда?

Давайте определимся с тем, что такое удобно. Конечно, у нас разные представления об удобстве, поэтому я опишу свои с примерами из api react:

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

Но в основном сначала получается та самая картина с балконом.

Typescript - сложный язык, но большинству разработчиков не нужно знать все его тонкости, чтобы быть эффективными в своей работе.

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

Основные принципы, которые мы здесь используем:

Типизируйте входные данные, предсказывай результат

Минимизируйте шум в кодовой базе

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

Начнем с небольшой истории. Как-то раз я с размахом накинулся на проект — в духе нынешних фреймворков всё было обложено компонентами, декларативный стиль царил, все шло идеально… ну почти. Дошел я, значит, до нужды контролировать DOM-узлы напрямую. И что вы думаете? Прямого доступа нет, React закрыл от меня этот мир, сидит и ухмыляется: мол, мы тут за производительность боремся, зачем тебе что-то трогать руками?

Но мы не из тех, кто сдаётся, верно? React предлагает своё решение — рефы, и именно о них сегодня пойдет речь.

Рассмотрим распространенные ошибки которые допускают разработчики при работе с tailwind и пути их решения.

Для работы с проектами существует куча редакторов кода и IDE (VSCode, NeoVim, SublimeText, WebStorm и т.д.). В данный момент наиболее популярны VSCode и Webstorm и у каждого есть свои плюсы и минусы. Webstorm является примером прекрасного IDE от компании JetBrains, где многие вспомогательные модули идут “из коробки”. К сожалению, сейчас нет возможности легально получить доступ к этому продукту гражданам России, поэтому многим приходится искать альтернативу. Такой альтернативой вполне может стать Visual Studio Code от компании Microsoft, который имеет открытую кодовую базу, полностью бесплатный и гибко настраиваемый под ваши нужды. В данной статье мы рассмотрим пример настройки рабочего пространства VSCode для комфортной работы с нашими проектами. Я покажу вам, какими расширениями я пользуюсь для лучшего удобства и продуктивности. Эти расширения я использую давно и они хорошо зарекомендовали себя, но возможно некоторые из них могут не подойти под ваш стиль работы и написания кода. Итак, начнем!

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

Всем привет. В этом материале я расскажу как создавал беспслатный сервис оптимизации изображений FlashImg.ru

Решаем проблему с тестирование элемента что он виден пользователю или не виден.

Данное решение для reactjs проекта написано, но также работает и для других фреймворков, с которыми работает jest-dom

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

Привет, меня зовут Дмитрий, я Middle-React-разработчик с замашками сеньора, поднимающийся с самых низов без мам, пап и ипотек. В последнее время я частенько вижу ситуацию: при использовании MobX в больших проектах у людей появляются сложности с количеством перерисовок или наоборот не обновлением данных со стора. Также могут проявляться проблемы с производительностью в том числе и из-за этого. Я решил поделиться отладочными инструментами MobX, ведь это может кому пригодиться.