Рубрика «React»
Плавность как фича: сравниваем фреймворки по анимации UI на реальных кейсах
2025-04-14 в 11:16, admin, рубрики: CSS-анимации, framer motion, gsap, React, UI, анимация, интерфейсы, плавностьCI-CD для чайников — разберитесь, и начните наконец-то автоматизировать рутину в разработке. Часть1. Введение
2025-03-31 в 7:16, admin, рубрики: backend, CD, ci, continuos integration, fullstack, gitlab, ReactВсем привет. Наверняка каждый, кто так или иначе связан с IT сферой, слышал модную аббревиатуру CI/CD. Везде мы слышим про необходимость ее использования, преимущества автоматизации процессов и т.д.
В вакансиях все чаще требуется опыт работы с одним из инструментов в этой инфраструктуре – Jenkins, Travis, AWS, Gitlab CI/CD.
Я предлагаю вам посмотреть на этот процесс, глазами простого разработчика. Чем ему может помочь автоматизация. Что в конечно итоге скрывается под этой аббревиатурой, и как уже начать получать дивиденды в своей ежедневной рабочей практике.
Первые шаги
Создание простого хука для работы с формами в React на основе `zod`
2025-03-25 в 22:21, admin, рубрики: forms, javascript, React, TypeScript, zodВ мире фронтенд-разработки управление состоянием форм играет важную роль, особенно когда дело касается валидации, отправки данных и управления ошибками. Одним из популярных решений является библиотека react-hook-form
, которая позволяет эффективно работать с формами, минимизируя количество ререндеров и упрощая взаимодействие с React-компонентами.
Однако что, если нам нужна более лёгкая или кастомизированная версия этой библиотеки? В этой статье мы рассмотрим, как создать простую самописную альтернативу react-hook-form
Читать полностью »
Каким должен быть Интернет-ресурс для умных, или возвращаясь к истокам отцов-основателей
2025-03-23 в 8:43, admin, рубрики: nest.js, postgresql, React, redux, аутопоэз, базы знаний, глупость, интеллект, познание, философия
React хуки произвели революцию в том, как мы пишем компоненты, особенно новые хуки из 19 версии для форм. Но помимо встроенных хуков, мы можем создавать собственные, чтобы переиспользовать логику между компонентами. Давайте разберемся, как это делать.
Что такое кастомный хук?
Кастомный хук - это обычная функция, название которой начинается с "use", и которая может вызывать другие хуки. Рассмотрим простой пример
const useBoolean = (initialValue = false) => {
const [value, setValue] = useState(initialValue);
const toggle = (value?: boolean) => setValue((prev) => value ?? !prev);
return [value, toggle];
};
Делаем авторизацию в Telegram Mini Apps правильно
2025-03-09 в 9:16, admin, рубрики: backend, nestjs, React, telegram, telegram bots, telegram mini app, TypeScript, авторизация, аутентификация
Если вас заинтересовала тема авторизации, подразумеваю, что вы уже итак знаете что такое Telegram Mini Apps. Поэтому не буду долго размусоливать вступление и перейду сразу к делу.
Поехали!
Принцип работы
Так как Telegram Mini Apps — это обычные веб‑приложения, то сценарии аутентификации и авторизации мы будем использовать привычные для веб‑приложений.
Аутентификация
Туториал: вход в мобильном приложении с Telegram
2025-03-05 в 20:15, admin, рубрики: iOS, oauth 2.0, React, swiftUI, telegram, TypeScript, аутентификацияАутентификация в мобильных приложениях с помощью Telegram Login Widget обделена информацией как официальной документации, так и в интернете. Меня зовут Александр, в этой статье поделюсь примером реализации входа в iOS приложение c помощью Telegram с блекджеком и граблями. В статье приведены сниппеты кода на Typescript + React, Go и Swift.
Содержание:
Symfony + React: Основные проблемы и методы их решения
2025-03-02 в 15:04, admin, рубрики: api, CORS, javascript, php, React, security, symfonyВведение
Symfony и React – мощная связка для создания современных веб-приложений. Symfony, как PHP-фреймворк, обеспечивает надежный серверный бэкенд: работу с базой данных, бизнес-логику, REST API и безопасность. React же отвечает за динамичный интерфейс на стороне клиента, позволяя создавать богатые Single Page Application (SPA) с мгновенной реакцией на действия пользователя. Используя их вместе, разработчики получают гибкость разделения фронтенда и бэкендаЧитать полностью »
Борьба с перерендерами в React
2025-02-19 в 21:53, admin, рубрики: javascript, React, мемоизация, преждевременная оптимизация, рендеринг, хукиНа тему мемоизации написано довольно много статей, и все они хорошо раскрывают суть. Но мне часто не хватало шпаргалки, которую можно отправить на вопрос «А как мемоизировать?». В статье речь пойдет исключительно о функциональных компонентах.
Жизненный цикл компонента
Функциональный компонент — это обычная JavaScript-функция, и часто при обсуждении, когда говорят «компонент рендерится», имеют в виду само выполнение этой функции.
При создании компонента, когда функция выполняется впервые, говорят, что компонент «рендерится». А когда в компоненте что-то изменилось, то говорят, что компонент «перерендеривается».