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

Опрос ниже 🔜

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

#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

💫 CSS в движении: 4 базовых эффекта

Вращение, появление, пульсация и bounce — четыре примера, которые пригодятся в любом проекте.

Каждый эффект — это @keyframes и несколько строк CSS. Копируйте и адаптируйте под свои задачи.

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

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

#readme #css

🧩 Архитектура, которая делает код предсказуемым

Смешивание бизнес-логики и побочных эффектов приводит к хрупкости системы: тесты становятся тяжёлыми, изменения — рискованными, а переиспользование — ограниченным.

➡️ Imperative Shell — работа с внешним миром

email.bulkSend(
  generateExpiryEmails(
    getExpiredUsers(db.getUsers(), Date.now())
  )
);

Оболочка отвечает только за взаимодействие с БД и отправку сообщений. Бизнес-логика остаётся неизменной и предсказуемой.

➡️ Переиспользование без боли

Добавление новой функциональности не требует переписывать логику — только меняется контекст использования:

const fiveDaysFromNow = ...
email.bulkSend(
  generateReminderEmails(
    getExpiredUsers(db.getUsers(), fiveDaysFromNow)
  )
);

💡 Принцип простой:

чистые функции — для вычислений, императивная оболочка — для эффектов.

Результат — тестируемый, модульный и надёжный код, устойчивый к изменениям.

🔗 Источник: Google Testing Blog

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

#blueuprint #react