📎 Шпаргалка по React Hooks

Хуки сделали React-компоненты проще и мощнее. Эта шпаргалка — ваш быстрый справочник по всем основным хукам с примерами кода.

Что внутри:

Разбор каждого хука по принципу «что делает → как работает → когда использовать».

➕ Подходит и новичкам для изучения, и опытным разработчикам как quick reference в работе.

🎥 Источник

🤌 Бонусы для подписчиков:
— Скидка 40% на все курсы Академии
— Розыгрыш Apple MacBook
— Бесплатный тест на знание математики

🐸 Библиотека фронтендера

#readme #react

📱 Apple случайно раскрыла код веб-версии App Store

В начале ноября Apple запустила обновлённый веб-интерфейс App Store на фреймворке Svelte, но случайно оставила в продакшене активные source maps. Это позволило разработчику извлечь полную структуру фронтенда прямо из браузера.

Код включал UI-компоненты на Svelte/TypeScript, логику управления состояниями, интеграции с API и конфигурацию роутинга. Разработчик выложил всё на GitHub «в образовательных целях».

8 ноября репозиторий и его форки были удалены по запросу Apple через DMCA. Однако код по-прежнему доступен через зеркало в архиве Software Heritage 🔗

🙃 Отключение source maps в продакшене считается базовым шагом в современной веб-разработке, поэтому такая ошибка от Apple выглядит особенно необычно.

🤌 Бонусы для подписчиков:
— Скидка 40% на все курсы Академии
— Розыгрыш Apple MacBook
— Бесплатный тест на знание математики

🐸 Библиотека фронтендера

#read_watch

Быть незаметным — особый скилл 👀

🐸 Библиотека фронтендера

#pixel_pause

🔥 Telegram-анимация для скрытого текста

SpoilerJS — веб-компонент для создания эффекта спойлера с анимацией частиц, вдохновлённый Telegram.

— Работает с любым фреймворком
— Открытый исходный код (MIT License)
— Простая интеграция

Правда, анимация не такая плавная, как в оригинале Telegram, но для веба — вполне достойная реализация.

🔗 Ссылка на репозиторий

🔹 Курс «Алгоритмы и структуры данных»
🔹 Получить консультацию менеджера
🔹 Сайт Академии 🔹 Сайт Proglib

🐸 Библиотека фронтендера

#readme #js

Каким будет результат ❓

Опрос ниже 🔜

🐸 Библиотека фронтендера

#code_challenge

📌 Шпаргалка React Router v7

React Router v7 объединил v6 и Remix в одну библиотеку. Два режима на выбор: легковесный Library Mode для SPA или полноценный Framework Mode с SSR.

Требования: Node.js 20+ и React 18+

➕ Шпаргалка включает установку, роутинг, навигацию, работу с данными, формы и обработку ошибок с примерами кода.

🐸 Библиотека фронтендера

#readme #react

⚛️ React: избавляемся от вложенных условий в JSX

Глубокие тернарные операторы быстро превращают JSX в нечитаемый код. Более понятный подход — ранние возвраты и предсказуемая структура рендера.

⚠️ Важное правило Hooks

Все хуки должны вызываться на верхнем уровне компонента — до любых return и условных конструкций.

React требует, чтобы хуки выполнялись в одном и том же порядке при каждом рендере. Если порядок или количество хуков изменится, возникнет ошибка.

// Ошибка: хук после return
function Component({ data }) {
  if (!data) return null;
  const [value] = useState(data); // Хук вызван условно!
}

// Правильно: хуки перед return
function Component({ data }) {
  const [value] = useState(data);
  if (!data) return null;
}

Ранние возвраты полностью безопасны, если хуки вызываются до любых условий.

✅ Альтернатива: объектный маппинг

Подходит для компонентов с большим количеством состояний:

const STATE_COMPONENTS = {
  loading: Spinner,
  error: Error,
  success: Content,
  empty: Empty
};

function DataView({ status, ...props }) {
  const Component = STATE_COMPONENTS[status];
  return Component ? <Component {...props} /> : null;
}

Важно: храните компоненты, а не JSX-элементы, чтобы свободно передавать пропсы.

➡️ Когда что использовать:

⚪️ Early Returns — оптимальны в большинстве случаев (loading / error / success).

⚪️ Объектный маппинг — подходит, когда состояний много и они определяются строковым статусом: этапы процессов, статусы заказов, типы уведомлений, шаги визардов.

💡 Начинайте с early returns — это самый простой и понятный вариант. Переходите на маппинг только тогда, когда это действительно упрощает код.

🐸 Библиотека фронтендера

#hotfix #react

Что по мидлам? 👀

🐸 Библиотека фронтендера

#pixel_pause