Skip to content

Latest commit

 

History

History
111 lines (80 loc) · 6.31 KB

File metadata and controls

111 lines (80 loc) · 6.31 KB

@trapar-waves/react-tanstack

npm version npm dm License GitHub last commit GitHub Actions Workflow Status Renovate


English | 中文 | 日本語

Готовый к производству шаблон React, оптимизированный для создания современных веб-приложений с использованием экосистемы TanStack. Предоставляет полную основу, включая управление состоянием, маршрутизацию, получение данных и оптимизацию сборки из коробки.

react-tanstack hero

Features

  • Современная архитектура React: Построен на React 19.x для компонентно-ориентированной разработки.
  • Полное управление состоянием: Управление серверным состоянием через @tanstack/react-query с кэшированием, фоновыми обновлениями и синхронизацией данных.
  • Расширенная маршрутизация: @tanstack/react-router для типобезопасной клиентской навигации с поддержкой вложенных маршрутов.
  • Оптимизированная стилизация: Tailwind CSS для утилитарной стилизации с минимальной конфигурацией.
  • Безопасность типов: Полная интеграция TypeScript по всей кодовой базе.
  • Оптимизация производительности: Встроенное разделение кода и ленивая загрузка; оптимизированный размер бандла с Rsbuild.
  • Опыт разработчика: Быстрое обновление во время разработки.
  • Готовность к CI/CD: Рабочий процесс GitHub Actions для автоматического тестирования и выпусков.
  • Интернационализация: Структура для поддержки нескольких языков.
  • Готовность к производству: Оптимизированный процесс сборки и реализация лучших практик.

Tech Stack

  • Фреймворк: React 19.x
  • Система типов: TypeScript 5.x
  • Управление состоянием: @tanstack/react-query
  • Маршрутизация: @tanstack/react-router
  • Стилизация: Tailwind CSS
  • Инструмент сборки: Rsbuild
  • Линтинг: ESLint с @antfu/eslint-config
  • Пакетный менеджер: pnpm

Полный список зависимостей смотрите в package.json.

Getting Started

Предварительные требования

  • Node.js (рекомендуется >= 18.x)
  • Менеджер пакетов (npm, yarn или pnpm)

Установка

  1. Создайте новый проект с помощью шаблона:

    pnpm create trapar-waves
  2. Перейдите в директорию проекта и установите зависимости:

    pnpm install
  3. Запустите сервер разработки:

    pnpm dev

Project Structure

├── 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        # Зависимости и скрипты проекта

Contributing

Участие приветствуется и высоко ценится! Пожалуйста, следуйте этим шагам для вклада:

  1. Fork репозиторий
  2. Создайте ветку для новой функции (git checkout -b feature/amazing-feature)
  3. Зафиксируйте изменения (git commit -m 'Add some amazing feature')
  4. Отправьте изменения в ветку (git push origin feature/amazing-feature)
  5. Откройте Pull Request

License

MIT License © 2025 Trapar Waves

👤 Автор

🔗 Ссылки