🤩 React-библиотеки в 2024 году

Последнее обновление популярного, авторитетного ежегодного руководства по библиотекам и инструментам, подходящим для различных задач при создании React-приложений:

• Starting a new React Project
• Package Manager for React
• React State Management
• React Data Fetching
• Routing with React Router
• CSS Styling in React
• React UI Libraries
• React Animation Libraries
• Visualization and Chart Libraries in React
• Form Libraries in React
• React Type Checking
• Code Structure in React
• React Authentication
• React Backend
• React Database
• React Hosting
• Testing in React
• React and Immutable Data Structures
• React Internationalization
• Rich Text Editor in React
• Payments in React
• Time in React
• React Desktop Applications
• File Upload in React
• Mails in React
• Drag and Drop
• Mobile Development with React
• React VR/AR
• Design Prototyping for React
• React Component Documentation

🌪 CSS-баттл

Представим: старт проекта завтра. Что возьмете в основу?

➡️ Tailwind CSS

— Быстрая верстка за счёт утилитарных классов
— Чёткий дизайн-системный язык без лишнего нейминга
— Удобно для больших команд — меньше стиля-разброда

➡️ Styled Components

— Стили прямо в компоненте → чище структура
— Динамика через пропсы без костылей
— Отличная интеграция с React, всё на JS

Голосуем реакциями:

👍 — Tailwind
❤️ — Styled Components

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

#code_battle

⚡️ React vs Vue: что выберете вы

Два фреймворка, два подхода, одна вечная дискуссия.

➡️ React

— Компонентная архитектура и масштабируемость
— Огромная экосистема и сообщество
— Hooks и современный подход к состоянию

➡️ Vue

— Мгновенный старт и лёгкая интеграция
— Реактивность «из коробки»
— Понятный синтаксис для шаблонов

Голосуем реакциями:

👍 — React
❤️ — Vue

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

#code_battle

⭐️ Небольшая задачка на логику

Посмотрите на код (он в картинке 👆).

Какой ответ выведет консоль ❓

Объясните, почему вывод именно такой. Почините код, чтобы выводилось корректное значение счётчика.

Подсказка: исправьте код без использования bind и дополнительных временных переменных.

Ответ в комментах скрывайте под спойлер 😉

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

#code_challenge #js

🌸 Разбор задачи на this: почему счётчик выводит NaN

Раннее мы выкладывали задачу 📎

Правильный ответ: NaN

➡️ Почему так:

— В setTimeout обычная функция → её this указывает на window (или undefined в strict).

— У глобального объекта нет count.

— undefined++ → NaN.

✅ Фикс без bind и переменных:

function Counter() {
  this.count = 0;

  this.start = function() {
    setTimeout(() => {
      this.count++;
      console.log(this.count);
    }, 1000);
  }
}

📌 Стрелочные функции берут this из окружения, а не создают свой.

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

#code_challenge #js

🐈‍⬛️ Redux vs Zustand: управление состоянием фронтенда

➡️ Redux

— Строгая архитектура и предсказуемость
— Огромное комьюнити и тулзинг
— Подходит для enterprise-приложений

➡️ Zustand

— Минимализм и простота
— Меньше кода, легче читать
— Подходит для небольших и средних проектов

Голосуем реакциями:

👍 — Redux
❤️ — Zustand

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

#code_battle

🤏 Кто быстрее достанет данные из API

➡️ React Query

— Всегда помнит, что было раньше
— Отлично справляется с хитрыми API
— Настраивается под любые сценарии

➡️ SWR

— Лаконичен и лёгок
— Быстро подхватывает свежие данные
— Идеален для простых CRUD

Голосуем:

👍 — React Query
❤️ — SWR

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

#code_battle

📢 Навигация по каналу

Чтобы не теряться в потоке постов, мы собрали удобную навигацию по тегам. Всё нужное — в пару кликов:

#readme — код-сниппеты, CSS-трюки, JS one-liners, команды Git/CLI

#hotfix — реальные баги и проблемы с объяснением, как их исправить

#blueprint — high-level концепции и паттерны

#under_hood — разбираем, что происходит внутри фреймворков и браузера

#stack — обзоры библиотек, плагинов, инструментов

#release_digest — все важное за неделю/месяц в одном месте: новые версии фреймворков, релизы библиотек, ссылки и краткие описания

#code_challenge — интерактивные задачи с разбором на следующий день

#code_battle — столкновение технологий или подходов

#pixel_pause— мемы, юмор и забавные истории из фронтенд-жизни

#career_merge — советы по резюме, soft skills, вопросы с собеседований, обсуждение зарплат

#ux_review — изучаем интерфейсы и UX известных сайтов и приложений

#read_watch — подборки полезных материалов: статьи, конференции, GitHub, книги

🔈 Включайте уведомления, используйте теги для быстрого поиска и оставайтесь в курсе всего: от практических фич до мемов и свежих трендов.

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