Reagieren Sie mit Vite On Steroids

Eine leistungsstarke Starter-Vorlage für die moderne Webentwicklung

Erstellen von React-Anwendungen leicht gemacht mit React with Vite On Steroids – Eine Startervorlage zum einfachen Erstellen leistungsstarker React-Anwendungen.

Was ist drin?

Diese Vorlage ist vollgepackt mit Funktionen, die Ihren Entwicklungsprozess optimieren sollen:

• Vite: Das blitzschnelle Build-Tool, das eine schnelle Entwicklung und optimierte Produktions-Builds gewährleistet.
• React: Die beliebte JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen.
• TypeScript: Fügen Sie Ihrem JavaScript Typsicherheit und erweiterte Tools hinzu.
• Tailwind CSS: Ein Utility-First-CSS-Framework zum Erstellen beeindruckender Designs, ohne benutzerdefiniertes CSS schreiben zu müssen.
• ESLint: Halten Sie Ihre Codebasis sauber und konsistent mit den Pluggable-Linting-Regeln.
• Hübscher: Ein eigensinniger Codeformatierer, der einen einheitlichen Stil in Ihrem gesamten Projekt erzwingt.
• Vitest: Ein blitzschnelles Unit-Testing-Framework mit einem Vite-nativen Ansatz.
• Testbibliothek: Einfache und vollständige Testdienstprogramme, die gute Testpraktiken fördern.
• Playwright: Ein vielseitiges End-to-End-Test-Framework, das mehrere Browser unterstützt.
• Husky: Automatisieren Sie Ihre Git-Hooks, z. B. Pre-Commit-Hooks, um die Qualität des Codes sicherzustellen, bevor er im Repository ankommt.

Erste Schritte

Voraussetzungen

Bevor Sie eintauchen, stellen Sie sicher, dass Folgendes installiert ist:

• Node.js (Version 20.x oder höher)
• Garn (oder npm oder pnpm)

Installation

Starten Sie Ihr Projekt mit diesen einfachen Schritten:

1. Klonen Sie das Repository:

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

1. Abhängigkeiten installieren:

   yarn

Ausführen des Entwicklungsservers

Bereit, mit dem Codieren zu beginnen? Starten Sie den Entwicklungsserver mit:

yarn dev

Gebäude für die Produktion

Wenn Sie zur Bereitstellung bereit sind, erstellen Sie einen Produktions-Build mit:

yarn build

Ausführen von Tests

Diese Vorlage enthält integrierte Testdienstprogramme, um sicherzustellen, dass Ihr Code wie erwartet funktioniert.

• Unit-Tests mit Vitest:

  yarn test

• Testabdeckung prüfen:

  yarn coverage

• End-to-End-Tests mit Dramatiker:

  • Führen Sie alle Tests durch:

  yarn playwright test
  

  Nach dem Login kopieren
  • Interaktiver UI-Modus:

  yarn playwright test --ui
  

  Nach dem Login kopieren
  • Tests nur auf Desktop Chrome ausführen:

  yarn playwright test --project=chromium
  

  Nach dem Login kopieren
  • Tests in einer bestimmten Datei ausführen:

  yarn playwright test example
  

  Nach dem Login kopieren
  • Debug-Modus:

  yarn playwright test --debug
  

  Nach dem Login kopieren
  • Tests automatisch mit Codegen generieren:

  yarn playwright codegen
  

  Nach dem Login kopieren

Linting und Formatierung

Behalten Sie die Qualität und Konsistenz des Codes mit diesen Befehlen bei:

• Lint den Code:

  yarn lint

• Flusenfehler beheben:

  yarn lint:fix

• Formatieren Sie den Code:

  yarn format

Lizenz

Dieses Projekt ist unter der MIT-Lizenz lizenziert. Weitere Einzelheiten finden Sie in der LIZENZ-Datei.

Danksagungen

Ein großes Dankeschön an die Entwickler und Communities hinter diesen erstaunlichen Tools:

• Vite
• Reagieren
• TypeScript
• Tailwind CSS
• ESLint
• Hübscher
• Vitest
• Testbibliothek
• Dramatiker
• Husky

Schauen Sie sich die Vorlage @RicardoGEsteves an

Haben Sie viel auf meiner Website unter https://www.ricardogesteves.com

Folge mir @ricardogesteves
X(twitter)

RicardoGEsteves (Ricardo Esteves) · GitHub

Full-Stack-Entwickler | Leidenschaft für die Schaffung intuitiver und wirkungsvoller Benutzererlebnisse | Sitz in Lissabon, Portugal ?? - RicardoGEsteves

github.com

Das obige ist der detaillierte Inhalt vonReagieren Sie mit Vite On Steroids. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!