Экосистема
Стилизация
- clsx - бывшая classnames
- SCSS-препроцесор
- SCSS/CSS-modules
- classnames
- normalize.css
- Глобальные стили (import global.scss)
- Точечная инлайн стилизация через style={{ ... }}
JSSstyled-component
Готовые сборщики (билдеры)
- create-reaact-app
- Gatsbyjs - Static HTML generator
- remix - Static HTML generator
- docusaurus - Для документации (отпачковался от Gatsby)
- NextJS - React-фреймворк
- Vite - Набирает популярность, есть готовые шаблоны
- webpack - Классический (для кастомных сборок)
- parcel - Минималистичная альтернатива Webpack
Вспомогательные пакеты
- react-dom - Рендеринг приложения
- react-router-dom - Роутинг
- react-helmet - Head-теги
UI-фреймворк
State-management
Формы
Взаимодействие с API
Оптимизация
Таблицы
UI
- react-select - Select
- rc-tooltip - Tooltip
- react-datepicker - Datapicker
- react-input-range - Rannge
- react-quill - Rich text editor
- react-toastify - Алерт
- react-alert - Алерт 2
- react-alert-template-basic - Алерт 3
- swiper - Слайдер
Utils
- react-share - Шаринг
- react-device-detect - Определение устройств
- console-log-colors
- lodash - Библиотека хэлперов
- date-fns - Библиотека хэлперов с датами
- cross-env - Запуск скриптов с выбранным режимом (dev или prod)
- env-cmd - Использование env-файлов внутри скриптов
- uuid - Генерация id
- react-beautiful-dnd - Drag and drop
- react-virtualized - Виртуальный список
Линтеры, форматтеры
Тестирование
Анимации
Шаринг
Карты
Графика
Nodejs
Storybook
Storybook - фреймворк для работы с компонентами
- Создание собственной библиотеки компонентов
- Динамический справочник этих компонентов
- Компоненты в изоляции от прочих зависимостей и бизнес-логики
- Тестирование этих компонентов в песочнице
npx storybook init | npx sb init- инициализация Storybooknpm rub test-storybook- тестирование компонентовAlert.stories.jsx- файл-история, описывающий компонентAlert.stories.mdx- справочное описание компонента