![\"\"](\"https:\/\/mobian.studio\/wp-content\/uploads\/2024\/11\/pexels-sora-shimazaki-5926397.png\"){kind=spacer}
<\/p>\n<\/p>\n
Dank Vite, einem modernen Front-End-Build-Tool, das 2020 vom Vue.js-Entwickler Evan You eingef\u00fchrt wurde, ist das Erstellen einer React-Anwendung noch einfacher und schneller geworden. Vite ist f\u00fcr 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\u00fcrzt. 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.<\/span><\/p>\n <\/p>\n Vite ist zu einer beliebten Wahl f\u00fcr 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\u00e4ufig zu Verz\u00f6gerungen bei der Serveraktualisierung kommt, verk\u00fcrzt Vite die Build-Zeiten und sorgt f\u00fcr einen nahtlosen und effizienten Workflow. Sein modulares Design kommt auch React-Entwicklern zugute, indem es schnelleres Feedback zu \u00c4nderungen bietet, ideal f\u00fcr diejenigen, die eine sofortige Reaktion aus der Entwicklungsumgebung ben\u00f6tigen.<\/span><\/p>\n Vite, entwickelt von Evan You (dem Erfinder von Vue.js), ist ein modernes Build-Tool zur Optimierung der Front-End-Entwicklung. Der Name \u201eVite\u201c leitet sich vom franz\u00f6sischen Wort f\u00fcr \u201eschnell\u201c ab, was seinem Hauptziel entspricht, den Entwicklungs- und Build-Prozess zu beschleunigen. Vite nutzt w\u00e4hrend der Entwicklung native ES-Module im Browser und erm\u00f6glicht so schnellere Builds und k\u00fcrzere Aktualisierungszeiten im Vergleich zu herk\u00f6mmlichen Bundlern. Diese Effizienz macht Vite zu einer hervorragenden Wahl f\u00fcr Entwickler, die die Entwicklungserfahrung in JavaScript-Frameworks wie React optimieren m\u00f6chten.<\/span><\/p>\n <\/p>\n Bevor Sie Vite einrichten, stellen Sie sicher, dass Ihr System die folgenden Anforderungen erf\u00fcllt. Diese Voraussetzungen sind f\u00fcr einen reibungslosen Installations- und Entwicklungsprozess unerl\u00e4sslich.<\/span><\/p>\n <\/p>\n Vite ist f\u00fcr die Installation von Paketen und die Ausf\u00fchrung von Entwicklungsskripten auf Node.js und npm (Node Package Manager) angewiesen. Um Vite verwenden zu k\u00f6nnen, ben\u00f6tigen Sie Node.js Version 18.x oder h\u00f6her und eine kompatible npm-Version. So \u00fcberpr\u00fcfen Sie, ob Sie die richtigen Versionen installiert haben:<\/span><\/p>\n \u00d6ffnen Sie Ihr Terminal und geben Sie den folgenden Befehl ein:<\/span> Dieser Befehl gibt die installierte Version von Node.js zur\u00fcck, die 18.x oder h\u00f6her sein sollte.<\/span><\/p>\n \u00dcberpr\u00fcfen Sie als N\u00e4chstes die Version von npm, indem Sie Folgendes ausf\u00fchren:<\/span> Dieser Befehl zeigt die installierte npm-Version an. Wenn Ihre Versionen veraltet sind, k\u00f6nnen Sie die neuesten Versionen von Node.js und npm von der offiziellen Node.js-Website herunterladen.<\/span><\/p>\n Wenn Node.js und npm nicht installiert sind oder Sie sie aktualisieren m\u00fcssen, k\u00f6nnen Sie sie \u00fcber das NodeSource-Repository (f\u00fcr Linux) installieren oder aktualisieren oder das Installationsprogramm direkt von der offiziellen Website herunterladen.<\/span><\/p>\n <\/p>\n Die Verwendung von Vite erfordert Kenntnisse der grundlegenden Befehlszeilenoperationen. W\u00e4hrend des Einrichtungsvorgangs f\u00fchren 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:<\/span><\/p>\n Wenn Sie mit der Befehlszeile nicht vertraut sind, kann es hilfreich sein, vor dem Fortfahren einige grundlegende Terminalbefehle noch einmal durchzugehen.<\/span><\/p>\n <\/p>\n Zum Verwalten und Bearbeiten Ihrer Projektdateien wird dringend ein Code-Editor wie Visual Studio Code (VS Code) empfohlen. VS Code bietet mehrere n\u00fctzliche Funktionen:<\/span><\/p>\n Andere beliebte Editoren sind Sublime Text, Atom und WebStorm, aber VS Code eignet sich besonders f\u00fcr JavaScript- und React-Projekte. Sie k\u00f6nnen es von der VS Code-Website herunterladen.<\/span><\/p>\n <\/p>\n Bevor Sie mit der Erstellung Ihrer ersten React-Anwendung mit Vite beginnen, m\u00fcssen Sie sicherstellen, dass Ihre Entwicklungsumgebung richtig eingerichtet ist. Vite ist ein schnelles, modernes Build-Tool, das die Front-End-Entwicklung rationalisieren soll, f\u00fcr einen reibungslosen Betrieb jedoch bestimmte Softwareversionen und Tools ben\u00f6tigt. 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\u00f6nnen Sie mit der Erstellung effizienter und schnell ladender React-Anwendungen mit Vite beginnen.<\/span><\/p>\n <\/p>\n Um Vite zu verwenden, ben\u00f6tigen Sie Node.js Version 18.x oder h\u00f6her 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.<\/span><\/p>\n Wenn bereits eine veraltete Version von Node.js oder npm installiert ist, entfernen Sie diese, um Kompatibilit\u00e4tsprobleme zu vermeiden.<\/span> sudo apt autoremove<\/span><\/p>\n Dieser Schritt l\u00f6scht alle alten Node.js- oder npm-Installationen und stellt eine saubere Einrichtung f\u00fcr Vite sicher.<\/span><\/p>\n Dieses Repository stellt die neuesten Versionen von Node.js und npm zur Installation bereit.<\/span> Schlag<\/span> Dadurch wird die aktuelle Version von Node.js (18.x) und npm installiert und die Kompatibilit\u00e4t mit Vite sichergestellt.<\/span><\/p>\n \u00dcberpr\u00fcfen Sie nach der Installation, ob sowohl Node.js als auch npm korrekt installiert sind, indem Sie Folgendes ausf\u00fchren:<\/span> npm -v<\/span><\/p>\n Sie sollten Versionsnummern sehen, die best\u00e4tigen, dass Node.js und npm einsatzbereit sind.<\/span><\/p>\n <\/p>\n Nachdem Node.js und npm eingerichtet sind, k\u00f6nnen Sie Vite global installieren. So k\u00f6nnen Sie problemlos neue Vite-Projekte aus jedem beliebigen Verzeichnis erstellen.<\/span><\/p>\n Schlag<\/span> 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.<\/span><\/p>\n <\/p>\n Wenn Vite installiert ist, k\u00f6nnen Sie damit ein neues React-Projekt erstellen. \u00d6ffnen Sie Ihr Terminal, navigieren Sie zu Ihrem bevorzugten Verzeichnis und verwenden Sie den folgenden Befehl, um das Setup zu starten.<\/span><\/p>\n Schlag<\/span> Ersetzen <\/span>meine-app<\/span> durch den gew\u00fcnschten Projektnamen. Dieser Befehl initialisiert ein Vite-Projekt und Vite f\u00fchrt Sie durch einige Einrichtungsaufforderungen.<\/span><\/p>\n Nach Abschluss erstellt Vite einen Projektordner mit allen erforderlichen Dateien und einer Standardstruktur.<\/span><\/p>\n <\/p>\n Navigieren Sie nach der Projekteinrichtung in das neu erstellte Projektverzeichnis, um mit der Arbeit darin zu beginnen.<\/span><\/p>\n Schlag<\/span> Dieser Befehl wechselt Ihr Arbeitsverzeichnis zu <\/span>meine-app<\/span>, wodurch die Verwaltung und Arbeit in den Vite-Projektdateien vereinfacht wird.<\/span><\/p>\n <\/p>\n Installieren Sie vor dem Ausf\u00fchren des Projekts alle erforderlichen Abh\u00e4ngigkeiten. Dazu geh\u00f6ren Bibliotheken und Pakete, die f\u00fcr die Ausf\u00fchrung des Projekts erforderlich sind.<\/span><\/p>\n Schlag<\/span> Dieser Befehl l\u00e4dt alle Abh\u00e4ngigkeiten herunter und installiert sie im <\/span>Paket.json<\/span> Datei. Diese Abh\u00e4ngigkeiten treiben die React-Komponenten, die Vite-Funktionalit\u00e4t und alle zus\u00e4tzlichen Tools oder Bibliotheken an, die in Ihrem Projekt verwendet werden.<\/span><\/p>\n <\/p>\n Nachdem die Einrichtung abgeschlossen und Abh\u00e4ngigkeiten installiert sind, starten Sie den Vite-Entwicklungsserver. Mit diesem Server k\u00f6nnen Sie Ihre App live sehen und Code\u00e4nderungen sofort anwenden.<\/span><\/p>\n Schlag<\/span> Dieser Befehl startet den Entwicklungsserver und Vite zeigt eine lokale URL an, unter der Ihre App zug\u00e4nglich ist. Standardm\u00e4\u00dfig lautet diese URL:<\/span> Abh\u00e4ngig von Ihrer Vite-Version werden Ihnen m\u00f6glicherweise auch Netzwerkoptionen und zus\u00e4tzliche Informationen angezeigt.<\/span><\/p>\n <\/p>\n Wenn der Entwicklungsserver l\u00e4uft, k\u00f6nnen Sie Ihre React-App jetzt in einem Webbrowser anzeigen.<\/span><\/p>\n Ihre neue React-Anwendung sollte im Browser geladen werden. Alle \u00c4nderungen, die Sie in Ihrem Code-Editor vornehmen, werden automatisch im Browser aktualisiert, dank Vites Hot Module Replacement (HMR)-Funktion, die schnelle Aktualisierungen erm\u00f6glicht, ohne dass die gesamte Seite neu geladen werden muss.<\/span><\/p>\n <\/p>\n Nachdem Sie Ihr Vite-Projekt eingerichtet haben, sehen Sie eine standardm\u00e4\u00dfige Ordner- und Dateistruktur, die die wesentlichen Komponenten Ihrer React-App organisiert. Diese Struktur sorgt daf\u00fcr, dass das Projekt \u00fcbersichtlich und modular bleibt, sodass Sie sich auf die Entwicklung konzentrieren k\u00f6nnen, ohne sich in Konfigurationsdetails zu verlieren. Nachfolgend finden Sie eine Aufschl\u00fcsselung der wichtigsten Dateien und Verzeichnisse in einer typischen Vite-basierten React-Anwendung:<\/span><\/p>\n <\/p>\n <\/p>\nWarum Vite f\u00fcr die React-Entwicklung verwenden?<\/span><\/h2>\n
Was ist Vite?<\/span><\/h3>\n
Voraussetzungen f\u00fcr die Einrichtung von Vite<\/span><\/h2>\n
Node.js und npm<\/span><\/h3>\n
\u00dcberpr\u00fcfen Sie die Node.js-Version<\/span><\/h4>\n
\n<\/span>Schlag<\/span>
\n<\/span>Knoten -v<\/span><\/p>\n\u00dcberpr\u00fcfen Sie die npm-Version<\/span><\/h4>\n
\n<\/span>Schlag<\/span>
\n<\/span>npm -v<\/span><\/p>\nGrundlegende Kenntnisse der Befehlszeile<\/span><\/h3>\n
\n
Code-Editor<\/span><\/h3>\n
\n
![\"\"](\"https:\/\/mobian.studio\/wp-content\/uploads\/2024\/11\/pexels-asphotograpy-887751.png\")
<\/p>\nEinrichten von Vite f\u00fcr Ihr React-Projekt: Voraussetzungen und Vorbereitung<\/span><\/h2>\n
Schritt 1: Installieren Sie Node.js und npm (falls nicht installiert)<\/span><\/h3>\n
Vorhandene Node.js-Versionen entfernen (optional)<\/span><\/h4>\n
\n<\/span>Schlag<\/span>
\n<\/span>sudo apt entferne nodejs npm<\/span><\/p>\nF\u00fcgen Sie das NodeSource-Repository hinzu<\/span><\/h4>\n
\n<\/span>Schlag<\/span>
\n<\/span>curl -fsSL https:\/\/deb.nodesource.com\/setup_18.x | sudo -E bash \u2013<\/span><\/p>\nInstallieren Sie Node.js und npm<\/span><\/h4>\n
\n<\/span>sudo apt install -y nodejs npm<\/span><\/p>\nInstallation \u00fcberpr\u00fcfen<\/span><\/h4>\n
\n<\/span>Schlag<\/span>
\n<\/span>Knoten -v<\/span><\/p>\nSchritt 2: Installieren Sie Vite global<\/span><\/h3>\n
F\u00fchren Sie den globalen Installationsbefehl aus<\/span><\/h4>\n
\n<\/span>sudo npm install -g create-vite<\/span><\/p>\nSchritt 3: Erstellen Sie ein neues React-Projekt mit Vite<\/span><\/h3>\n
F\u00fchren Sie den Befehl \u201eVite Create\u201c aus<\/span><\/h4>\n
\n<\/span>npm erstelle vite@latest meine-App<\/span><\/p>\nFolgen Sie den Setup-Anweisungen:<\/span><\/h4>\n
\n
Schritt 4: Navigieren Sie zu Ihrem Projektordner<\/span><\/h3>\n
Wechseln zum Projektverzeichnis<\/span><\/h4>\n
\n<\/span>CD meine App<\/span><\/p>\nSchritt 5: Projektabh\u00e4ngigkeiten installieren<\/span><\/h3>\n
F\u00fchren Sie den Installationsbefehl aus<\/span><\/h4>\n
\n<\/span>npm installieren<\/span><\/p>\nSchritt 6: Starten Sie den Entwicklungsserver<\/span><\/h3>\n
Ausf\u00fchren des Entwicklungsservers<\/span><\/h4>\n
\n<\/span>npm-Ausf\u00fchrung dev<\/span><\/p>\n
\n<\/span>Arduino-Baum<\/span>
\n<\/span>http:\/\/localhost:5173\/<\/span><\/p>\nSchritt 7: Zeigen Sie Ihre React-App im Browser an<\/span><\/h3>\n
\u00d6ffnen Sie die lokale URL in Ihrem Browser:<\/span><\/h4>\n
\n
![\"\"](\"https:\/\/mobian.studio\/wp-content\/uploads\/2024\/11\/pexels-pixabay-267392.png\")
<\/p>\n\u00dcberblick \u00fcber die Vite-Projektstruktur<\/span><\/h2>\n
Hauptseite<\/span><\/h3>\n
\n
src\/main.jsx<\/span><\/h3>\n
\n