Рубрика «React»

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

В вакансиях все чаще требуется опыт работы с одним из инструментов в этой инфраструктуре – Jenkins, Travis, AWS, Gitlab CI/CD.

⚠️Я предлагаю вам посмотреть на этот процесс, глазами простого разработчика. Чем ему может помочь автоматизация. Что в конечно итоге скрывается под этой аббревиатурой, и как уже начать получать дивиденды в своей ежедневной рабочей практике.

Первые шаги

Читать полностью »

В мире фронтенд-разработки управление состоянием форм играет важную роль, особенно когда дело касается валидации, отправки данных и управления ошибками. Одним из популярных решений является библиотека react-hook-form, которая позволяет эффективно работать с формами, минимизируя количество ререндеров и упрощая взаимодействие с React-компонентами.

Однако что, если нам нужна более лёгкая или кастомизированная версия этой библиотеки? В этой статье мы рассмотрим, как создать простую самописную альтернативу react-hook-formЧитать полностью »

Кадр из культового фильма "Идиотократия" о печальных трендах в современном обществе

Кадр из культового фильма "Идиотократия" о печальных трендах в современном обществе

Читать полностью »

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 правильно - 1

Если вас заинтересовала тема авторизации, подразумеваю, что вы уже итак знаете что такое Telegram Mini Apps. Поэтому не буду долго размусоливать вступление и перейду сразу к делу.

Поехали!

Принцип работы

Так как Telegram Mini Apps — это обычные веб‑приложения, то сценарии аутентификации и авторизации мы будем использовать привычные для веб‑приложений.

Аутентификация

Читать полностью »

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

Разворачиваем микрофронты на Next.js - 1

Зачем нам понадобились микрофронты 

Читать полностью »

Аутентификация в мобильных приложениях с помощью Telegram Login Widget обделена информацией как официальной документации, так и в интернете. Меня зовут Александр, в этой статье поделюсь примером реализации входа в iOS приложение c помощью Telegram с блекджеком и граблями. В статье приведены сниппеты кода на Typescript + React, Go и Swift.

Содержание:

Читать полностью »

Введение

Symfony и React – мощная связка для создания современных веб-приложений. Symfony, как PHP-фреймворк, обеспечивает надежный серверный бэкенд: работу с базой данных, бизнес-логику, REST API и безопасность. React же отвечает за динамичный интерфейс на стороне клиента, позволяя создавать богатые Single Page Application (SPA) с мгновенной реакцией на действия пользователя. Используя их вместе, разработчики получают гибкость разделения фронтенда и бэкендаЧитать полностью »

На тему мемоизации написано довольно много статей, и все они хорошо раскрывают суть. Но мне часто не хватало шпаргалки, которую можно отправить на вопрос «А как мемоизировать?». В статье речь пойдет исключительно о функциональных компонентах.

Жизненный цикл компонента

Функциональный компонент — это обычная JavaScript-функция, и часто при обсуждении, когда говорят «компонент рендерится», имеют в виду само выполнение этой функции.

При создании компонента, когда функция выполняется впервые, говорят, что компонент «рендерится». А когда в компоненте что-то изменилось, то говорят, что компонент «перерендеривается».

Читать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js