ReactJS *

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

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

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

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

• С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. И есть на сайте анимационная кнопка, которые при скролле красиво появляется и при клике открывает модалку.

У меня появилась задача в проекте: перевести личный кабинет пользователя на русский и английский языки (в перспективе и на другие языки). При этом, определять язык пользователя при первом заходе в ЛК и запоминать язык при перезагрузке страницы. Разумеется, всё это с типизацией файлов с переводами (чтобы нельзя было забыть добавить любое из полей).

Как я это делал — расскажу в статье.

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

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

Статья будет полезна тем, кто хочет разобраться в реализации авторизации с JWT-токенами в куки с помощью Django REST Framework.

Всем привет! Меня зовут Андрей, я Frontend разработчик. На данный момент работаю на фрилансе. Имею достаточно хороший опыт работы с React.

Хочу рассказать, что такое React Context и как это можно использовать в проектах.
Попробую всё рассказать как можно проще.

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

Некоторое время назад наткнулся на интересную статью в блоге Кристофера Артмана, которой он сравнивает до чего эволюционировал Реакт в наше время и задается вопросом, о том, не вернулись ли мы в отправную точку, и Реакт на сервере - это старый добрый PHP.

Кроме самой статьи мне интересно было почитать комментарии к ней. И там довольно большое количество людей не согласилось с автором.

Под катом Вы найдете вольный перевод (или даже рерайт) этой статьи, а с оригиналом можно ознакомится по ссылке.

Хочу поделиться своим опытом первого знакомства с фреймворком Next.js.
Я понимаю, что потратил не очень много времени и скорее всего многие вопросы, описанные в статье уже кем-то решены. Но ценность данной статьи именно в том, что это первые впечатления.

С Новым годом, друзья! 

Сегодня мы поговорим об одном из интересных инструментов для разработчиков. Omatsuri — это открытая платформа, состоящая из 12 удобных утилит для повседневных задач разработчика. Сайт omatsuri.app выполнен в минималистичном стиле и предлагает интуитивно понятный интерфейс. Это инструмент, который явно создан «с душой» для тех, кто ценит функциональность и простоту.

Если вы пишете на React и любите TypeScript, вам стоит обратить внимание на TanStack Router - современный, гибкий и полностью типобезопасный роутер. В статье разбираю его ключевые возможности (loaders, кэширование, работу с query-параметрами, SSR) и сравниваем с другими популярными решениями.

Оптимизация производительности React приложений — важная часть разработки, особенно когда речь идет о сложных интерфейсах. В основном разработчики лишь краем уха слышат о необходимости использования хуков useMemo, useCallback и React.memo для оптимизации кода. Но если бездумно использовать их, то можно даже навредить вашему приложению

В этой статье я попытаюсь разобрать, когда действительно стоит использовать useMemo, useCallback и React.memo, а когда их использование излишне. Мы изучим каждый из хуков, их влияние на рендеринг компонентов в React, а также рассмотрим практические примеры с подробными объяснениями работы каждого из хуков.

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

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

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

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

В конце мы также рассмотрим расширенный пример использования Convex для разработки полноценного веб-приложения.

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

Привет! Я – Егор, фронтенд-разработчик в Чиббис. Наша команда разработала новый личный кабинет для партнеров – b2b-приложение с нуля, используя Feature-Sliced Design. В статье я делюсь нашим опытом: от выбора стека технологий до построения процесса разработки, который помог нам за 5,5 месяцев превратить пустую папку в рабочий продукт. Мы разберем итерации, FSD-макеты, этапы создания разделов и расскажем, как удалось сократить время разработки и тестирования.

Вас ждет готовый шаблон процесса, который вы сможете применить в своих проектах.

Сделайте интерфейс React-приложения более отзывчивым и плавным с помощью хуков useTransition, useDeferredValue и useOptimistic. Управляйте приоритетами рендеринга, избегайте подвисаний при работе с большими данными и реализуйте оптимистичные обновления для мгновенной реакции интерфейса. Практические примеры и полезные советы ждут вас! 🚀

Всем привет, меня зовут Павел Рожков, я lead фронтенда в компании Doubletapp. Мы занимаемся заказной разработкой, и в нашей работе над React-проектами важную роль играет наш архитектурный гайдлайн, который мы постоянно совершенствуем. Это свод договоренностей о том, каким образом будет организован код в нашем проекте.

Гайдлайн помогает нам:

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

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

• Поддерживать старые проекты, т.к. они написаны по тем же принципам. 

• Поднять качество кода: работать на проекте становится удобнее и можно сосредоточиться на важных вещах.

• Онбордить новых членов команды благодаря готовой документации.

Содержание:

• Почему бы нам просто не взять FSD?
• Шаблон проекта с архитектурой
• Структура кода приложения
• Заключение

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

Меня зовут Завен Агаджанян, я веб‑разработчик экосистемных продуктов VK ID и в этой статье расскажу, как мы писали капчу с нуля и что из этого вышло.

В последнее время большинство громких новостей в экосистеме React связаны с Server Components, Server Actions и в целом с Server Side Rendering и Next.js.

И вот вопрос, который беспокоил меня лично — что будет с уже созданными за последние 10 лет Single Page Applications на React? Неужели пора о них забыть? Действительно ли команда разработчиков React теперь занимается развитием только лишь SSR, или всё же в мире SPA тоже происходят обновления и они тоже развиваются?

Я решил взглянуть на список изменений в React 19 через призму применимости этих изменений к SPA. Вот что я отметил.

Привет, React-энтузиаст! Случалось ли тебе писать логику для форм, где нужно не только обработать кучу полей, но и синхронизировать их с асинхронными действиями (запросы, загрузка данных, показ успеха или ошибок)? Если да, то, возможно, ты уже слышал об экспериментальном хуке useFormState в React. Однако на смену ему пришёл более мощный инструмент - useActionState. В статье обсуждается, почему прежний подход ушёл на пенсию, чем хорош новый, и как он может упростить жизнь каждому фронтенд-разработчику.

Всем привет!

Меня зовут Руслан и я fullstack разработчик, я работаю над заказами и разрабатываю свои digital продукты. На данный момент я разрабатываю конвертер файлов, например картинок, png в webp, jpg в png и так далее. Итак, я решил поделиться этапами своей разработки, рассказать о своем опыте и показать, как шаг за шагом создаются собственные продукты. Именно в данной статье я буду писать только про frontend часть,  так как, к разработке бэкенда еще не приступил.