Как стать автором
Поиск
Написать публикацию
Обновить
15.21

ReactJS *

JavaScript-библиотека для создания интерфейсов

Сначала показывать
Порог рейтинга
Уровень сложности

Почему ты не должен использовать onChange в React

Уровень сложностиСредний
Время на прочтение4 мин
Количество просмотров9.1K

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

Читать далее

Как на примере одной кнопки можно улучшить Frontend часть проекта

Уровень сложностиСредний
Время на прочтение6 мин
Количество просмотров5.1K

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

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

Читать далее

Локализуем React (NextJS, TypeScript) сайт на несколько языков с помощью i18next

Уровень сложностиСредний
Время на прочтение6 мин
Количество просмотров6.4K

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

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

Читать далее

Перенос JWT-токенов в куки: Django REST + React

Уровень сложностиПростой
Время на прочтение8 мин
Количество просмотров2.7K

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

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

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

Читать далее

React Context

Уровень сложностиПростой
Время на прочтение3 мин
Количество просмотров6.6K

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

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

Читать далее

React на сервере — это не PHP

Уровень сложностиПростой
Время на прочтение4 мин
Количество просмотров4.6K

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

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

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

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

Читать далее

Опыт первого знакомства с Next.js

Уровень сложностиСредний
Время на прочтение7 мин
Количество просмотров4.4K

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

Читать далее

Omatsuri: бесплатный инструмент с открытым исходным кодом для упрощения фронтенд-разработки

Уровень сложностиПростой
Время на прочтение2 мин
Количество просмотров5.1K

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

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

Читать далее

TanStack Router: современный и типобезопасный роутер для React

Уровень сложностиСредний
Время на прочтение11 мин
Количество просмотров5.1K

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

Читать далее

Взгляд с другой стороны на useMemo, useCallback и React.memo в React: когда их стоит использовать

Уровень сложностиСредний
Время на прочтение8 мин
Количество просмотров7.6K

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

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

Читать далее

Руководство по Convex. Часть 3

Уровень сложностиСредний
Время на прочтение33 мин
Количество просмотров1.2K


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


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


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


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


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


Читать дальше →

Эффективный процесс разработки на основе Feature-Sliced Design: наш опыт

Уровень сложностиПростой
Время на прочтение10 мин
Количество просмотров5.2K

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

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

Читать далее

Оптимизация React-приложений: Используем useTransition, useDeferredValue и useOptimistic для плавного UI

Уровень сложностиСредний
Время на прочтение8 мин
Количество просмотров14K

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

Читать далее

Ближайшие события

Архитектура фронтенд-приложений на React. (Нам не нужен FSD)

Уровень сложностиСредний
Время на прочтение9 мин
Количество просмотров23K

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

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

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

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

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

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

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

Содержание:

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

Читать далее

Как мы писали капчу с нуля, добавляли инклюзию, и причём тут легаси-код

Уровень сложностиПростой
Время на прочтение8 мин
Количество просмотров2.4K

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

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

Читать далее

Уходит ли React от SPA?

Уровень сложностиПростой
Время на прочтение2 мин
Количество просмотров6.9K

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

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

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

Читать далее

useActionState: новый герой в мире React

Уровень сложностиСредний
Время на прочтение7 мин
Количество просмотров9.9K

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

Читать далее

Как я разрабатываю конвертер в 2024 (Frontend часть)

Уровень сложностиПростой
Время на прочтение3 мин
Количество просмотров4.6K

Всем привет!

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

Читать далее

Vite 6.0: Новые возможности и будущее веб-разработки

Уровень сложностиСредний
Время на прочтение5 мин
Количество просмотров14K

26 ноября 2024 года вышла новая мажорная версия инструмента для сборки приложений Vite. Это событие особенно примечательно тем, что это первый релиз после анонса VoidZero, где Even You представил грядущее направление развития основных продуктов.

Далее мы рассмотрим ключевые моменты этого обновления.

Читать далее

Как мы мигрируем с JQuery на React

Уровень сложностиСредний
Время на прочтение10 мин
Количество просмотров5K

Вокруг все говорят о серверных компонентах реакта, о серверном рендеринге, и разных новшествах в мире фронтенде. Как будто JQuery в один миг взял и исчез. Несмотря ни на что он всё ещё остаётся самой популярной библиотекой 😅.

Сегодня я вам расскажу, как мы постепенно мигрируем с JQuery на React.

Читать далее

Вклад авторов