So erstellen Sie eine React-App mit Vite: Eine Schritt-für-Schritt-Anleitung

Dank Vite, einem modernen Front-End-Build-Tool, das 2020 vom Vue.js-Entwickler Evan You eingeführt wurde, ist das Erstellen einer React-Anwendung noch einfacher und schneller geworden. Vite ist für seine Geschwindigkeit und Effizienz bekannt und stellt damit eine hervorragende Alternative zu Create React App (CRA) dar, da es die zum Starten von Entwicklungsservern und Anwenden von Code-Updates erforderliche Zeit erheblich verkürzt. In diesem Handbuch gehen wir jeden Schritt durch, um Ihnen beim Einrichten einer React-App mit Vite zu helfen, von der Vorbereitung Ihrer Umgebung bis zum Starten Ihres ersten Projekts.

 

Warum Vite für die React-Entwicklung verwenden?

Vite ist zu einer beliebten Wahl für React-Projekte geworden, da es die Build-Geschwindigkeit und das Live-Neuladen erheblich verbessert und den Entwicklungsprozess sowohl schneller als auch reibungsloser macht. Im Gegensatz zu Create React App (CRA), bei dem es nach Dateiaktualisierungen häufig zu Verzögerungen bei der Serveraktualisierung kommt, verkürzt Vite die Build-Zeiten und sorgt für einen nahtlosen und effizienten Workflow. Sein modulares Design kommt auch React-Entwicklern zugute, indem es schnelleres Feedback zu Änderungen bietet, ideal für diejenigen, die eine sofortige Reaktion aus der Entwicklungsumgebung benötigen.

Was ist Vite?

Vite, entwickelt von Evan You (dem Erfinder von Vue.js), ist ein modernes Build-Tool zur Optimierung der Front-End-Entwicklung. Der Name „Vite“ leitet sich vom französischen Wort für „schnell“ ab, was seinem Hauptziel entspricht, den Entwicklungs- und Build-Prozess zu beschleunigen. Vite nutzt während der Entwicklung native ES-Module im Browser und ermöglicht so schnellere Builds und kürzere Aktualisierungszeiten im Vergleich zu herkömmlichen Bundlern. Diese Effizienz macht Vite zu einer hervorragenden Wahl für Entwickler, die die Entwicklungserfahrung in JavaScript-Frameworks wie React optimieren möchten.

 

Voraussetzungen für die Einrichtung von Vite

Bevor Sie Vite einrichten, stellen Sie sicher, dass Ihr System die folgenden Anforderungen erfüllt. Diese Voraussetzungen sind für einen reibungslosen Installations- und Entwicklungsprozess unerlässlich.

 

Node.js und npm

Vite ist für die Installation von Paketen und die Ausführung von Entwicklungsskripten auf Node.js und npm (Node Package Manager) angewiesen. Um Vite verwenden zu können, benötigen Sie Node.js Version 18.x oder höher und eine kompatible npm-Version. So überprüfen Sie, ob Sie die richtigen Versionen installiert haben:

Überprüfen Sie die Node.js-Version

Öffnen Sie Ihr Terminal und geben Sie den folgenden Befehl ein:
Schlag
Knoten -v

Dieser Befehl gibt die installierte Version von Node.js zurück, die 18.x oder höher sein sollte.

Überprüfen Sie die npm-Version

Überprüfen Sie als Nächstes die Version von npm, indem Sie Folgendes ausführen:
Schlag
npm -v

Dieser Befehl zeigt die installierte npm-Version an. Wenn Ihre Versionen veraltet sind, können Sie die neuesten Versionen von Node.js und npm von der offiziellen Node.js-Website herunterladen.

Wenn Node.js und npm nicht installiert sind oder Sie sie aktualisieren müssen, können Sie sie über das NodeSource-Repository (für Linux) installieren oder aktualisieren oder das Installationsprogramm direkt von der offiziellen Website herunterladen.

 

Grundlegende Kenntnisse der Befehlszeile

Die Verwendung von Vite erfordert Kenntnisse der grundlegenden Befehlszeilenoperationen. Während des Einrichtungsvorgangs führen Sie eine Reihe von Befehlen im Terminal aus, um Ihr Vite-Projekt zu erstellen, zu installieren und zu starten. Mit den folgenden Befehlen sollten Sie vertraut sein:

• Navigieren in Verzeichnissen: Befehle wie CD um Verzeichnisse zu wechseln und ls um Dateien aufzulisten.
• Ausführen von Befehlen: Sie müssen npm-Befehle wie npm installieren Und npm-Ausführung dev.

Wenn Sie mit der Befehlszeile nicht vertraut sind, kann es hilfreich sein, vor dem Fortfahren einige grundlegende Terminalbefehle noch einmal durchzugehen.

 

Code-Editor

Zum Verwalten und Bearbeiten Ihrer Projektdateien wird dringend ein Code-Editor wie Visual Studio Code (VS Code) empfohlen. VS Code bietet mehrere nützliche Funktionen:

• Syntaxhervorhebung: Hilft, Ihren Code lesbarer zu machen.
• Integriertes Terminal: Ermöglicht Ihnen, Terminalbefehle direkt im Editor auszuführen.
• Erweiterungen: VS Code verfügt über Erweiterungen für JavaScript, React und Vite, die Codevorschläge, Fehlerprüfung und zusätzliche Tools bieten.

Andere beliebte Editoren sind Sublime Text, Atom und WebStorm, aber VS Code eignet sich besonders für JavaScript- und React-Projekte. Sie können es von der VS Code-Website herunterladen.

 

Einrichten von Vite für Ihr React-Projekt: Voraussetzungen und Vorbereitung

Bevor Sie mit der Erstellung Ihrer ersten React-Anwendung mit Vite beginnen, müssen Sie sicherstellen, dass Ihre Entwicklungsumgebung richtig eingerichtet ist. Vite ist ein schnelles, modernes Build-Tool, das die Front-End-Entwicklung rationalisieren soll, für einen reibungslosen Betrieb jedoch bestimmte Softwareversionen und Tools benötigt. In diesem Handbuch behandeln wir die Voraussetzungen, darunter die Installation der erforderlichen Versionen von Node.js und npm, grundlegende Befehlszeilenkenntnisse und die Einrichtung eines geeigneten Code-Editors. Sobald diese Komponenten vorhanden sind, können Sie mit der Erstellung effizienter und schnell ladender React-Anwendungen mit Vite beginnen.

 

Schritt 1: Installieren Sie Node.js und npm (falls nicht installiert)

Um Vite zu verwenden, benötigen Sie Node.js Version 18.x oder höher zusammen mit npm. Wenn Sie Node.js bereits installiert haben, es aber veraltet ist, befolgen Sie diese Schritte, um die alte Version zu entfernen und die neueste zu installieren.

Vorhandene Node.js-Versionen entfernen (optional)

Wenn bereits eine veraltete Version von Node.js oder npm installiert ist, entfernen Sie diese, um Kompatibilitätsprobleme zu vermeiden.
Schlag
sudo apt entferne nodejs npm

sudo apt autoremove

Dieser Schritt löscht alle alten Node.js- oder npm-Installationen und stellt eine saubere Einrichtung für Vite sicher.

Fügen Sie das NodeSource-Repository hinzu

Dieses Repository stellt die neuesten Versionen von Node.js und npm zur Installation bereit.
Schlag
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash –

Installieren Sie Node.js und npm

Schlag
sudo apt install -y nodejs npm

Dadurch wird die aktuelle Version von Node.js (18.x) und npm installiert und die Kompatibilität mit Vite sichergestellt.

Installation überprüfen

Überprüfen Sie nach der Installation, ob sowohl Node.js als auch npm korrekt installiert sind, indem Sie Folgendes ausführen:
Schlag
Knoten -v

npm -v

Sie sollten Versionsnummern sehen, die bestätigen, dass Node.js und npm einsatzbereit sind.

 

Schritt 2: Installieren Sie Vite global

Nachdem Node.js und npm eingerichtet sind, können Sie Vite global installieren. So können Sie problemlos neue Vite-Projekte aus jedem beliebigen Verzeichnis erstellen.

Führen Sie den globalen Installationsbefehl aus

Schlag
sudo npm install -g create-vite

Dieser Befehl installiert Vite global und bietet einen einzigen Befehl zum schnellen Initialisieren von Vite-Projekten. Die globale Installation von Vite vereinfacht die Projekterstellung und -einrichtung.

 

Schritt 3: Erstellen Sie ein neues React-Projekt mit Vite

Wenn Vite installiert ist, können Sie damit ein neues React-Projekt erstellen. Öffnen Sie Ihr Terminal, navigieren Sie zu Ihrem bevorzugten Verzeichnis und verwenden Sie den folgenden Befehl, um das Setup zu starten.

Führen Sie den Befehl „Vite Create“ aus

Schlag
npm erstelle vite@latest meine-App

Ersetzen meine-app durch den gewünschten Projektnamen. Dieser Befehl initialisiert ein Vite-Projekt und Vite führt Sie durch einige Einrichtungsaufforderungen.

Folgen Sie den Setup-Anweisungen:

• Projektname: Wählen Sie einen Namen für Ihr Projektverzeichnis (z. B. „meine-App“).
• Framework-Auswahl: Wählen Sie „React“ aus der Liste der Frameworks.
• Variante: Wählen Sie je nach Wunsch zwischen JavaScript und TypeScript.

Nach Abschluss erstellt Vite einen Projektordner mit allen erforderlichen Dateien und einer Standardstruktur.

 

Schritt 4: Navigieren Sie zu Ihrem Projektordner

Navigieren Sie nach der Projekteinrichtung in das neu erstellte Projektverzeichnis, um mit der Arbeit darin zu beginnen.

Wechseln zum Projektverzeichnis

Schlag
CD meine App

Dieser Befehl wechselt Ihr Arbeitsverzeichnis zu meine-app, wodurch die Verwaltung und Arbeit in den Vite-Projektdateien vereinfacht wird.

 

Schritt 5: Projektabhängigkeiten installieren

Installieren Sie vor dem Ausführen des Projekts alle erforderlichen Abhängigkeiten. Dazu gehören Bibliotheken und Pakete, die für die Ausführung des Projekts erforderlich sind.

Führen Sie den Installationsbefehl aus

Schlag
npm installieren

Dieser Befehl lädt alle Abhängigkeiten herunter und installiert sie im Paket.json Datei. Diese Abhängigkeiten treiben die React-Komponenten, die Vite-Funktionalität und alle zusätzlichen Tools oder Bibliotheken an, die in Ihrem Projekt verwendet werden.

 

Schritt 6: Starten Sie den Entwicklungsserver

Nachdem die Einrichtung abgeschlossen und Abhängigkeiten installiert sind, starten Sie den Vite-Entwicklungsserver. Mit diesem Server können Sie Ihre App live sehen und Codeänderungen sofort anwenden.

Ausführen des Entwicklungsservers

Schlag
npm-Ausführung dev

Dieser Befehl startet den Entwicklungsserver und Vite zeigt eine lokale URL an, unter der Ihre App zugänglich ist. Standardmäßig lautet diese URL:
Arduino-Baum
http://localhost:5173/

Abhängig von Ihrer Vite-Version werden Ihnen möglicherweise auch Netzwerkoptionen und zusätzliche Informationen angezeigt.

 

Schritt 7: Zeigen Sie Ihre React-App im Browser an

Wenn der Entwicklungsserver läuft, können Sie Ihre React-App jetzt in einem Webbrowser anzeigen.

Öffnen Sie die lokale URL in Ihrem Browser:

• Öffnen Sie Ihren bevorzugten Webbrowser.
• Navigieren Sie zur im Terminal angezeigten URL. http://localhost:5173/.

Ihre neue React-Anwendung sollte im Browser geladen werden. Alle Änderungen, die Sie in Ihrem Code-Editor vornehmen, werden automatisch im Browser aktualisiert, dank Vites Hot Module Replacement (HMR)-Funktion, die schnelle Aktualisierungen ermöglicht, ohne dass die gesamte Seite neu geladen werden muss.

 

Überblick über die Vite-Projektstruktur

Nachdem Sie Ihr Vite-Projekt eingerichtet haben, sehen Sie eine standardmäßige Ordner- und Dateistruktur, die die wesentlichen Komponenten Ihrer React-App organisiert. Diese Struktur sorgt dafür, dass das Projekt übersichtlich und modular bleibt, sodass Sie sich auf die Entwicklung konzentrieren können, ohne sich in Konfigurationsdetails zu verlieren. Nachfolgend finden Sie eine Aufschlüsselung der wichtigsten Dateien und Verzeichnisse in einer typischen Vite-basierten React-Anwendung:

 

Hauptseite

• Diese Datei ist die wichtigste HTML-Datei für Ihre Anwendung. Sie dient dem Browser als Einstiegspunkt zum Laden der React-App.
• Vite fügt hier die JavaScript-Module ein, sodass Ihre App Zugriff auf die erforderlichen Skripte und Assets hat.
• Im Gegensatz zu herkömmlichen Setups bietet Vite Hauptseite befindet sich im Stammverzeichnis des Projekts, was das Laden von Modulen vereinfacht und Ihr Setup übersichtlich hält.

 

src/main.jsx

• Dies ist der Einstiegspunkt für Ihre React-Anwendung, wo die App initialisiert wird.
• In dieser Datei finden Sie Code, der den React-Komponentenbaum in das DOM rendert und Ihre App normalerweise mit einem Stamm verknüpft div In Hauptseite.
• Dies ist die erste JavaScript-Datei, die Vite verarbeitet und bündelt, und ist daher für die Struktur und Ladereihenfolge Ihrer App von entscheidender Bedeutung.

 

src/App.jsx

• Diese Datei stellt die Hauptkomponente Ihrer React-Anwendung dar und enthält normalerweise die Hauptstruktur oder das Layout Ihrer App.
• Aus App.jsxkönnen Sie andere Komponenten importieren und verwalten, Routen definieren oder andere Konfigurationen auf App-Ebene erstellen.
• Ändern App.jsx Stellt häufig die wichtigsten Änderungen bereit, die Sie in Ihrer App sehen, da es normalerweise das Herzstück der Benutzeroberfläche Ihres Projekts ist.

 

vite.config.js

• Die Konfigurationsdatei für Vite befindet sich im Projektstammverzeichnis.
• Mit dieser Datei können Sie das Verhalten und die Einstellungen von Vite anpassen, beispielsweise Build-Optionen definieren, Plugins hinzufügen oder Proxy-Konfigurationen einrichten.
• Obwohl Vite so konzipiert ist, dass es ohne umfangreiche Konfiguration funktioniert, vite.config.js gibt Ihnen die Flexibilität, die Einstellungen an das Wachstum Ihres Projekts anzupassen.

 

Zusätzliche Dateien und Verzeichnisse

Diese Kerndateien sind zwar wichtig, beim Erweitern Ihres Projekts können jedoch weitere Verzeichnisse und Dateien auftreten, darunter:

• öffentlich/: Ein Ordner zum Speichern statischer Assets wie Bilder, Schriftarten oder Symbole. Diese Dateien werden direkt bereitgestellt, ohne dass spezielle Importe erforderlich sind.
• Quelle/: Der Hauptordner für den gesamten Quellcode der Anwendung. Zusammen mit main.jsx Und App.jsx, dieser Ordner enthält andere React-Komponenten, Hilfsfunktionen oder Kontextanbieter, während Ihre App skaliert wird.

Durch diese organisierte Struktur bleiben Ihre Projektdateien zugänglich und verwaltebar, sodass Sie sich auf die Erstellung der Komponenten und Funktionen Ihrer App konzentrieren können, ohne sich um umfangreiche Einrichtungs- oder Konfigurationsarbeiten kümmern zu müssen.

 

Vorteile der Verwendung von Vite gegenüber der Erstellung einer React-App

Der Wechsel von Create React App (CRA) zu Vite kann mehrere Leistungs- und Produktivitätsvorteile bringen. Vite ist auf Geschwindigkeit und Effizienz ausgelegt und bietet Entwicklern ein reaktionsschnelleres Entwicklungserlebnis. Hier ist ein genauerer Blick auf die Vorteile der Verwendung von Vite gegenüber CRA:

 

Schnellere Builds

Vite verkürzt die Build-Zeiten erheblich, indem es Module anders behandelt als CRA. So funktioniert es:

• Modul-Vorbündelung: Vite bündelt Abhängigkeiten vorab mit esbau, ein schneller Bundler, der für JavaScript optimiert ist. Diese Vorbündelung beschleunigt die anfängliche Ladezeit, indem Abhängigkeiten effektiver organisiert und gruppiert werden.
• ES-Modulsyntax: Vite verwendet während der Entwicklung ES-Modulimporte im Browser, sodass nur die für die aktuelle Ansicht erforderlichen Dateien geladen werden. Mit diesem Setup wird die Notwendigkeit umgangen, bei jeder Änderung die gesamte Anwendung zu bündeln, was zu schnelleren Startzeiten führt.
• Lazy Loading für die Entwicklung: Vite lädt Module nur, wenn sie benötigt werden. Dadurch wird die Arbeitslast auf Ihrem Entwicklungsserver minimiert und es werden schnellere Neuladevorgänge durchgeführt. Im Gegensatz zu CRA kompiliert Vite nicht die gesamte Codebasis nach jeder Änderung neu, was die Wartezeit verkürzt.

Diese Optimierungen machen Vite zu einer ausgezeichneten Wahl für Projekte, bei denen schnelle Feedbackschleifen und Build-Geschwindigkeiten unabdingbar sind.

 

Effizienter Hot Module Replacement (HMR)

Hot Module Replacement (HMR) ist eine Funktion, die Module in Echtzeit aktualisiert, während Sie sie bearbeiten, ohne dass die Seite komplett neu geladen werden muss. Das HMR-System von Vite ist effizienter als das von CRA, was mehrere Vorteile mit sich bringt:

• Selektives Nachladen: Das HMR-System von Vite aktualisiert nur die Module, die sich ändern, anstatt die gesamte Anwendung neu zu laden. Wenn Sie beispielsweise eine CSS-Datei oder eine Komponente bearbeiten, lädt Vite nur diese bestimmte Datei oder dieses Modul neu.
• Schnelleres Feedback zu Änderungen: Durch dieses selektive Neuladen können Entwickler Änderungen nahezu sofort sehen, was die Produktivität steigert und Zeit spart.
• Beibehalten des Anwendungsstatus: Da nur die erforderlichen Module ersetzt werden, behält Vites HMR den Status Ihrer Anwendung während der Entwicklung bei. Das bedeutet, dass Sie mit dem Testen fortfahren können, ohne Daten oder Konfigurationen zurücksetzen zu müssen.

Mit dem HMR von Vite ist die Entwicklung effizienter, da Änderungen sofort angezeigt werden und so das Codiererlebnis verbessert wird.

 

Erfahrung in der Leichtbau-Entwicklung

Vite ist so konzipiert, dass es eine minimale und optimierte Einrichtung bietet, die unnötige Komplexität beseitigt und den Projektstart einfacher und schneller macht. Aus diesen Gründen bietet Vite eine leichtere Erfahrung als CRA:

• Minimale Konfiguration: Vite erfordert zum Start wenig bis gar keine Konfiguration und die meisten gängigen Einstellungen werden automatisch vorgenommen. CRA erfordert oft benutzerdefinierte Konfigurationen oder zusätzliche Abhängigkeiten für Funktionen wie Code-Splitting oder erweitertes Bündeln, aber Vite rationalisiert diesen Prozess.
• Kleinere Bündelgrößen: Die optimierte Bündelung von Vite führt zu kleineren Bündelgrößen in der Produktion, was die Leistung beim Bereitstellen Ihrer Anwendung verbessert.
• Schnelle Einrichtung: Das Einrichten eines Vite-Projekts ist einfach und schnell. Mit nur wenigen Befehlen können Sie mit dem Codieren beginnen, ohne die zusätzlichen Dateien und Skripte, die CRA manchmal enthält.
• Flexibles Plugin-System: Das Plugin-System von Vite ist leistungsstark und dennoch einfach zu verwenden. So können Sie Funktionen hinzufügen, ohne das Setup aufzublähen. Die Plugins von Vite sind außerdem mit Rollup kompatibel, einem beliebten Bundler, der die Optionen zur Anpassung Ihres Builds erweitert, ohne die Geschwindigkeit zu beeinträchtigen.

Dieser leichtgewichtige Ansatz ermöglicht es Entwicklern, sich mehr auf die Codierung und weniger auf die Verwaltung der Konfiguration zu konzentrieren, was zu einer schnelleren und saubereren Entwicklungsumgebung führt.

 

Arbeiten Sie mit Mobian zusammen, um Ihre individuelle mobile App-Lösung zu entwickeln

Wenn Sie eine mobile Anwendung erstellen möchten, Mobian kann während des gesamten Entwicklungsprozesses fachkundige Unterstützung bieten. Ob Sie die Kundenbindung optimieren, die Loyalität steigern oder ein nahtloses Benutzererlebnis schaffen möchten, eine gut konzipierte mobile App kann diese Ziele erreichen. Mobian ist auf die Entwicklung maßgeschneiderter, schlüsselfertiger Anwendungen spezialisiert, die auf Ihre spezifischen Geschäftsanforderungen zugeschnitten sind.

Über unsere Apps können Kunden direkt auf Neuigkeiten und Werbeaktionen zugreifen und Services bestellen, während Sie Funktionen wie einfaches Feedback, Bewertungen und ein reibungsloses Bestellsystem nutzen können. Unsere Expertise deckt ein breites Spektrum an Branchen ab, von MedTech bis FinTech. Unabhängig von der Komplexität oder Vision Ihrer App sind wir bereit, sie zum Leben zu erwecken.

Kontakt aufnehmen mit Mobian, um Ihr Projekt zu besprechen und herauszufinden, wie wir Ihre App-Idee Wirklichkeit werden lassen können. Gemeinsam können wir eine App entwickeln, die Ihr Unternehmen für die Zukunft rüstet.

Gestalten Sie die Zukunft gemeinsam mit Mobian – Ihrem vertrauenswürdigen Entwickler mobiler Apps.

 

Schlussfolgerung

Indem Sie dieser Anleitung folgen, haben Sie jetzt eine Vite-Umgebung für Ihr React-Projekt eingerichtet. Vites leichter, schneller Build-Prozess und Hot Module Replacement (HMR) machen es zu einer hervorragenden Wahl für die moderne React-Entwicklung und bieten ein effizienteres Erlebnis im Vergleich zu herkömmlichen Tools wie Create React App. Mit der optimierten Architektur von Vite sind Sie jetzt bereit, dynamische, reaktionsschnelle Anwendungen zu erstellen und sich auf das Erstellen von Funktionen zu konzentrieren, anstatt auf Build-Zeiten zu warten. Erkunden Sie weiterhin die Konfigurationsoptionen und zusätzlichen Plugins von Vite, um Ihre Entwicklungsumgebung weiter anzupassen. Viel Spaß beim Programmieren!