Готовый к производству шаблон React, оптимизированный для создания современных веб-приложений с использованием экосистемы TanStack. Предоставляет полную основу, включая управление состоянием, маршрутизацию, получение данных и оптимизацию сборки из коробки.
- Современная архитектура React: Построен на React 19.x для компонентно-ориентированной разработки.
- Полное управление состоянием: Управление серверным состоянием через @tanstack/react-query с кэшированием, фоновыми обновлениями и синхронизацией данных.
- Расширенная маршрутизация: @tanstack/react-router для типобезопасной клиентской навигации с поддержкой вложенных маршрутов.
- Оптимизированная стилизация: Tailwind CSS для утилитарной стилизации с минимальной конфигурацией.
- Безопасность типов: Полная интеграция TypeScript по всей кодовой базе.
- Оптимизация производительности: Встроенное разделение кода и ленивая загрузка; оптимизированный размер бандла с Rsbuild.
- Опыт разработчика: Быстрое обновление во время разработки.
- Готовность к CI/CD: Рабочий процесс GitHub Actions для автоматического тестирования и выпусков.
- Интернационализация: Структура для поддержки нескольких языков.
- Готовность к производству: Оптимизированный процесс сборки и реализация лучших практик.
- Фреймворк: React 19.x
- Система типов: TypeScript 5.x
- Управление состоянием:
@tanstack/react-query - Маршрутизация:
@tanstack/react-router - Стилизация: Tailwind CSS
- Инструмент сборки: Rsbuild
- Линтинг: ESLint с
@antfu/eslint-config - Пакетный менеджер: pnpm
Полный список зависимостей смотрите в package.json.
- Node.js (рекомендуется >= 18.x)
- Менеджер пакетов (npm, yarn или pnpm)
-
Создайте новый проект с помощью шаблона:
pnpm create trapar-waves
-
Перейдите в директорию проекта и установите зависимости:
pnpm install
-
Запустите сервер разработки:
pnpm dev
├── public/ # Статические ресурсы
├── src/ # Исходный код
│ ├── routes/ # Определения маршрутов на основе файлов
│ │ └── __root.tsx # Корневой компонент макета
│ ├── global.css # Глобальные стили и импорты Tailwind
│ ├── index.tsx # Точка входа
│ ├── router.ts # Конфигурация маршрутизатора
│ ├── routeTree.gen.ts # Автоматически сгенерированное дерево маршрутов
│ └── env.d.ts # Объявления типов окружения
├── rsbuild.config.ts # Конфигурация Rsbuild
├── tsconfig.json # Конфигурация TypeScript
├── eslint.config.js # Конфигурация ESLint
└── package.json # Зависимости и скрипты проекта
Участие приветствуется и высоко ценится! Пожалуйста, следуйте этим шагам для вклада:
- Fork репозиторий
- Создайте ветку для новой функции (
git checkout -b feature/amazing-feature) - Зафиксируйте изменения (
git commit -m 'Add some amazing feature') - Отправьте изменения в ветку (
git push origin feature/amazing-feature) - Откройте Pull Request
MIT License © 2025 Trapar Waves
- Rikka: admin@rikka.cc
- Профиль GitHub: Muromi-Rikka