Мощный стартовый шаблон для современной веб-разработки

Создание приложений React стало проще с помощью React с Vite On Steroids — стартового шаблона для простого создания высокопроизводительных приложений React.

Что внутри?

Этот шаблон содержит множество функций, призванных оптимизировать процесс разработки:

• Vite: молниеносный инструмент сборки, обеспечивающий быструю разработку и оптимизацию рабочих сборок.
• React: популярная библиотека JavaScript для создания пользовательских интерфейсов.
• TypeScript: добавьте безопасность типов и расширенные инструменты в свой JavaScript.
• Tailwind CSS: практичная CSS-инфраструктура для создания потрясающих дизайнов без написания собственного CSS.
• ESLint: держите свою кодовую базу в чистоте и в соответствии с подключаемыми правилами проверки.
• Prettier: продуманный форматировщик кода, обеспечивающий единообразие стиля во всем проекте.
• Vitest: невероятно быстрая среда модульного тестирования с нативным подходом Vite.
• Библиотека тестирования: простые и полные утилиты тестирования, которые поощряют хорошие практики тестирования.
• Драматург: универсальная среда комплексного тестирования, поддерживающая несколько браузеров.
• Husky: автоматизируйте свои перехваты Git, например перехваты перед фиксацией, чтобы гарантировать качество кода до того, как он попадет в репозиторий.

Начиная

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

Прежде чем приступить к работе, убедитесь, что у вас установлено следующее:

• Node.js (версия 20.x или выше)
• Пряжа (или npm или pnpm)

Установка

Начните свой проект, выполнив эти простые шаги:

1. Клонировать репозиторий:

   git clone https://github.com/RicardoGEsteves/react-with-vite-on-steroids.git
   cd react-with-vite-on-steroids

1. Установить зависимости:

   yarn

Запуск сервера разработки

Готовы начать программировать? Запустите сервер разработки с помощью:

yarn dev

Здание для производства

Когда вы будете готовы к развертыванию, создайте рабочую сборку с помощью:

yarn build

Запуск тестов

Этот шаблон поставляется со встроенными утилитами тестирования, которые позволяют убедиться, что ваш код работает должным образом.

• Юнит-тесты с Vitest:

  yarn test

• Проверьте покрытие тестами:

  yarn coverage

• Сквозные тесты с драматургом:

  • Запустите все тесты:

  yarn playwright test
  

  • Интерактивный режим пользовательского интерфейса:

  yarn playwright test --ui
  

  • Запускайте тесты только на настольном Chrome:

  yarn playwright test --project=chromium
  

  • Запуск тестов в определенном файле:

  yarn playwright test example
  

  • Режим отладки:

  yarn playwright test --debug
  

  • Автоматическое создание тестов с помощью Codegen:

  yarn playwright codegen
  

Линтинг и форматирование

Поддерживайте качество и согласованность кода с помощью этих команд:

• Проанализируйте код:

  yarn lint

• Исправить ошибки линтинга:

  yarn lint:fix

• Отформатируйте код:

  yarn format

Лицензия

Этот проект распространяется по лицензии MIT. Более подробную информацию см. в файле ЛИЦЕНЗИИ.

Благодарности

Огромное спасибо разработчикам и сообществам, создавшим эти замечательные инструменты:

• Вите
• Реагировать
• Машинопись
• CSS попутного ветра
• ESLint
• Красивее
• Витест
• Библиотека тестирования
• Драматург
• Хаски

Оцените шаблон @RicardoGEsteves

Много интересного на моем сайте https://www.ricardogesteves.com

Следуйте за мной @ricardogesteves
Х(твиттер)

РикардоГестевес (Ricardo Esteves) · GitHub

Full-Stack разработчик | Увлечены созданием интуитивно понятного и эффективного пользовательского опыта | Базируется в Лиссабоне, Португалия ?? - РикардоГестевес

github.com