So richten Sie ein React-Projekt mit Vite ein

Tutorials
JavaScript React

Der Autor hat Code.org ausgewählt, um eine Spende im Rahmen des Write for Donations-Programms zu erhalten.

Einführung

Normalerweise erstellen Sie möglicherweise ein neues Projekt mit Create React App, aber es kann viel Zeit in Anspruch nehmen, über 140 MB an Abhängigkeiten zu installieren. Vite ist ein leichtes Werkzeug, das nur 31 MB an Abhängigkeiten benötigt, was Zeit beim Starten eines neuen Projekts spart. Vite verwendet auch die browsernativen ES (ECMAScript)-Module zum Verlinken von JavaScript-Dateien, wodurch nicht der gesamte Bundle nach jeder Dateiänderung neu erstellt wird. Diese Unterschiede führen zu einer schnelleren Erfahrung beim Erstellen, Aktualisieren und Erstellen einer React-App mit Vite.

In diesem Tutorial wird eine neue React-App unter Verwendung des Vite-Werkzeugs erstellt. Sie werden eine grundlegende App mit einem neuen Komponenten, CSS und einer Bilddatei erstellen und ein optimiertes Bundle für die Bereitstellung vorbereiten.

Vereinfachen Sie das Bereitstellen von React-Anwendungen mit DigitalOcean App Platform. Bereitstellen Sie React direkt von GitHub in Minuten.

Voraussetzungen

Um diesem Tutorial zu folgen, benötigen Sie Folgendes:

Schritt 1 – Erstellen eines Vite-Projekts

In diesem Schritt erstellen Sie ein neues React-Projekt mit dem Vite-Tool von der Befehlszeile aus. Sie werden den yarn-Paketmanager verwenden, um die Skripte zu installieren und auszuführen.

Führen Sie den folgenden Befehl in Ihrem Terminal aus, um ein neues Vite-Projekt zu erstellen:

  1. yarn create vite

Dieser Befehl führt das Vite-Ausführbare aus dem Remote-npm-Repository aus. Es konfiguriert die erforderlichen Tools, um eine lokale Entwicklungsumgebung für React zu erstellen. Schließlich öffnet es ein Befehlszeilenmenü für Projekteinstellungen und Sprachtypen.

Nachdem das Skript beendet ist, werden Sie aufgefordert, einen Projektnamen einzugeben:

Output
yarn create v1.22.10
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...

success Installed "[email protected]" with binaries:
- create-vite
- cva
? Project name: » vite-project

Geben Sie Ihren Projektnamen ein (dieses Tutorial verwendet digital-ocean-vite als Beispiel):

  1. digital-ocean-vite

Nach Eingabe Ihres Projektnamens fordert Vite Sie auf, ein Framework auszuwählen:

Output
? Select a framework: » - Use arrow-keys. Return to submit.
Vanilla
Vue
> React
Preact
Lit
Svelte
Others

Vite ermöglicht es Ihnen, eine Reihe von Projekttypen zu erstellen, nicht nur React. Derzeit unterstützt es React, Preact, Vue, Lit, Svelte und Vanilla-JavaScript-Projekte.

Verwenden Sie Ihre Pfeiltasten, um React auszuwählen:

Nach Auswahl des React-Frameworks fordert Vite Sie auf, den Sprachtyp auszuwählen. Sie können JavaScript oder TypeScript für Ihr Projekt verwenden.

Verwenden Sie Ihre Pfeiltasten, um JavaScript auszuwählen:

Output
? Select a variant: » - Use arrow-keys. Return to submit.
> JavaScript
TypeScript
JavaScript + SWC
TypeScript + SWC

Nachdem das Framework eingerichtet wurde, wird eine Ausgabe angezeigt, dass das Projekt erstellt wurde. Vite fordert Sie dann auf, die Abhängigkeiten mit Yarn zu installieren:

Output
Done:
Scaffolding project in path\to\digital-ocean-vite...

Done. Now run:

cd digital-ocean-vite
yarn
yarn dev

Done in 129.89s.

Navigieren Sie gemäß den Anweisungen zu Ihrem Projektordner:

  1. cd digital-ocean-vite

Dann verwenden Sie den Befehl yarn, um die Abhängigkeiten des Projekts zu installieren:

  1. yarn

Nach Abschluss gibt die Abhängigkeitsinstallation eine Ausgabe zurück, die anzeigt, wie lange es gedauert hat, die Abhängigkeiten zu installieren:

Output
success Saved lockfile.
Done in 43.26s.

Sie haben jetzt ein neues React-Projekt mit Vite eingerichtet und die für React und Vite erforderlichen Pakete installiert.

Als Nächstes starten Sie den Entwicklungsserver, um die Anwendung zu testen.

Schritt 2 — Starten des Entwicklungsservers

In diesem Schritt starten Sie den Entwicklungsserver, um zu überprüfen, ob alles funktioniert.

Vom Ordner digital-ocean-vite aus verwenden Sie den folgenden Befehl, um den Entwicklungsserver zu starten:

  1. yarn run dev

Dieser Befehl ist ein Alias des vite-Befehls. Er wird Ihr Projekt im Entwicklungsmodus ausführen.

Sie erhalten die folgende Ausgabe:

Output
VITE v4.0.4 ready in 847 ms

➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h to show help

Öffnen Sie anschließend Ihren Browser und besuchen Sie http://localhost:5173/. Das Standard-React-Projekt wird auf Port 5173 ausgeführt:

Wenn Sie diese App sehen, haben Sie React erfolgreich mit Vite installiert. Als Nächstes können Sie Ihre App von Ihrem Mobiltelefon aus vorab anzeigen.

Schritt 3 — Vorschau Ihrer App vom Mobiltelefon

Vite öffnet standardmäßig Ihre Entwicklungsanwendung nicht für Ihr Netzwerk. In diesem Schritt werden Sie die App jedoch für Ihr lokales Netzwerk freigeben, um sie von Ihrem Mobiltelefon aus anzusehen.

Um Ihre App in Ihrem lokalen Netzwerk auszuführen, müssen Sie zuerst den aktuellen Server stoppen. Verwenden Sie in Ihrem Terminal CTRL+C, um den derzeit laufenden Entwicklungsserver zu beenden.

Verwenden Sie anschließend den folgenden Befehl, um Ihr Projekt auszuführen:

  1. yarn run dev --host

Die --host-Flag gibt an, dass Vite Ihre App im lokalen Netzwerk freigibt.

Sie erhalten diese Ausgabe in Ihrem Terminal:

Output
VITE v4.0.4 ready in 747 ms

➜ Local: http://localhost:5173/
➜ Network: http://your_ip_address:5173/
➜ press h to show help

Dies ist eine lokale IP-Adresse, die eindeutig für Ihr Computernetzwerk oder Ihren Router ist.

Öffnen Sie einen Browser auf Ihrem Mobiltelefon und geben Sie dann die obige IP-Adresse und den Port ein, um die Vorschau Ihrer Vite-App von Ihrem Mobiltelefon aus zu öffnen:

Sie haben nun Ihre App in der Entwicklungsumgebung ausgeführt und überprüft, dass sie funktioniert. Im nächsten Schritt werden Sie den Boilerplate-Code entfernen, der mit Vite geliefert wurde.

Schritt 4 – Entfernen des Standard-Boilerplates

In diesem Schritt werden Sie die Boilerplate-Dateien des Vite-Projekts aus dem src/-Verzeichnis entfernen, was es Ihnen ermöglicht, eine neue Anwendung einzurichten. Sie werden sich auch mit der Standardprojektstruktur der aktuellen App vertraut machen.

Verwenden Sie den folgenden Befehl, um den Inhalt Ihres src/-Verzeichnisses anzuzeigen:

  1. ls src/

Die Ausgabe listet alle verfügbaren Dateien auf:

Output
App.css
App.jsx
assets
index.css
main.jsx

Verwenden Sie den Befehl rm, um eine Datei oder ein Verzeichnis zu löschen. Verwenden Sie die folgenden Befehle, um die Standarddateien aus dem Projekt zu löschen:

  1. rm src/App.css

  2. rm src/App.jsx

  3. rm src/index.css

Löschen Sie das Verzeichnis assets mit folgendem Befehl:

  1. rm -r src/assets

Die Option -r ist eine rekursive Operation, die erforderlich ist, wenn ein Verzeichnis mit seinem Inhalt gelöscht wird.

Nach dem Löschen dieser Dateien bleibt nur main.jsx im Verzeichnis src/ übrig. Führen Sie den Befehl ls src/ erneut aus, um die verbleibenden Dateien anzuzeigen:

  1. ls src/

Jetzt enthält das Verzeichnis nur die Datei main.jsx:

Output
main.jsx

Weil Sie alle anderen Dateien entfernt haben, müssen Sie jetzt einen Verweis in main.jsx auf eine gelöschte CSS-Datei entfernen.

Öffnen Sie main.jsx zum Bearbeiten mit dem folgenden Befehl:

  1. nano src/main.jsx

Entfernen Sie die markierte Zeile, um den Verweis auf die CSS-Datei aufzuheben:

/src/main.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import "./index.css"

ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>,
)

Speichern und schließen Sie die Datei main.jsx.

Erstellen Sie eine neue Datei mit dem Namen App.jsx im Verzeichnis src/ mit folgendem Befehl:

  1. nano src/App.jsx

Fügen Sie dem App.jsx-Datei den folgenden Code hinzu:

/src/App.jsx
export default function App() {
return (
<>
<div>Hello World</div>
</>
);
}

Dieser Code erstellt eine neue funktionale React-Komponente namens App. Der Präfix export default teilt JavaScript mit, dass diese Funktion als Standardexport exportiert wird. Der Funktionskörper enthält ein <div> mit dem Text Hello World.

Speichern und schließen Sie die Datei App.jsx.

Verwenden Sie den folgenden Befehl, um den Entwicklungsserver erneut zu starten:

  1. yarn run dev --host

Jetzt öffnen oder aktualisieren Sie http://localhost:3000 in Ihrem Browser, um eine leere Seite mit dem Text Hello World anzuzeigen:

In diesem Schritt haben Sie einige der Standarddateien aus dem Vite-Projekt entfernt. Als nächstes werden Sie eine grundlegende App mit neuen Komponenten, CSS-Dateien und Bilddateien erstellen.

Schritt 5 — Erstellen einer Grund-App

In diesem Schritt werden Sie Komponenten erstellen, CSS-Dateien hinzufügen und Bilder verlinken, indem Sie eine Grund-App erstellen. Beginnen Sie damit, den Entwicklungsserver zu beenden.

In dem folgenden Unterabschnitt werden Sie eine neue Komponente für Ihre React-App erstellen.

Erstellen einer Komponente

Das Erstellen einer neuen Komponente trägt zur Modularität Ihres Projekts bei. Sie werden alle Komponenten in das Verzeichnis components hinzufügen, um die Organisation zu gewährleisten.

Verwenden Sie den folgenden Befehl, um ein neues Verzeichnis namens components innerhalb von src/ zu erstellen:

  1. mkdir src/components

Erstellen Sie anschließend eine neue Datei namens Welcome.jsx im Verzeichnis src/components/ mit dem Befehl:

  1. nano src/components/Welcome.jsx

Fügen Sie den folgenden Code zur Datei Welcome.jsx hinzu:

/src/components/Welcome.jsx
export default function Welcome() {
return (
<>
<div className="wrapper">
<h1>Welcome To My App</h1>
<p>This is going to be the coolest app in the world!</p>
</div>
</>
);
}

Der obige Code erstellt eine neue funktionale React-Komponente namens Welcome. Das Präfix export default sagt JavaScript, diese Funktion als Standardexport zu verwenden.

Der div-Tag mit dem Klassennamen wrapper ermöglicht es Ihnen, diesen Abschnitt in der CSS zu targeten. Die Tags h1 und p zeigen die Nachricht auf dem Bildschirm an.

Speichern Sie die Datei und schließen Sie sie.

Als nächstes verweisen Sie auf diese neue Komponente in Ihrer Datei App.jsx.

Öffnen Sie App.jsx mit dem folgenden Befehl:

  1. nano src/App.jsx

Aktualisieren Sie den Inhalt von App.jsx mit dem hervorgehobenen Code:

/src/App.jsx
import Welcome from "./components/Welcome"

export default function App() {
return (
<>
<Welcome />
</>
)
}

Diese Codezeile importiert Welcome.jsx in die App und verlinkt die neue Komponente im Funktionskörper. Wenn Sie fertig sind, speichern Sie die Datei und schließen Sie sie.

In dem folgenden Unterabschnitt fügen Sie ein Bild zu Ihrer App hinzu.

Bild hinzufügen

Bilder in React hinzuzufügen ist eine gängige Anwendung in der App-Entwicklung.

Erstellen Sie ein neues Verzeichnis namens img unter dem Verzeichnis src/ mit dem folgenden Befehl:

  1. mkdir src/img

Wechseln Sie zu Ihrem Verzeichnis src/img mit diesem Befehl:

  1. cd src/img

Sie werden dieses Bild von Sammy in src/img herunterladen.

Laden Sie das Bild mit wget herunter:

  1. wget https://html.sammy-codes.com/images/small-profile.jpeg

Benennen Sie das Bild mit dem folgenden Befehl um:

  1. mv small-profile.jpeg sammy.jpeg

Dieser Befehl benennt die Bilddatei von small-profile.jpeg in sammy.jpeg um, was später leichter zu referenzieren ist.

Kehren Sie mit diesem Befehl zum Root-Verzeichnis zurück:

  1. cd ../../

Anschließend aktualisieren Sie die Datei Welcome.jsx, um auf dieses Bild zu verlinken. Öffnen Sie die Datei:

  1. nano src/components/Welcome.jsx

Aktualisieren Sie Ihre Welcome.jsx-Datei, indem Sie die hervorgehobenen Zeilen hinzufügen:

/src/components/Welcome.jsx
import Sammy from "../img/sammy.jpeg"

export default function Welcome() {
return (
<>
<div className="wrapper">
<h1>Welcome To My App</h1>
<p>This is going to be the coolest app in the world!</p>
<img src={Sammy} alt="Sammy Image" width={200} height={200} />
</div>
</>
)
}

Die erste Zeile importiert das Bild in React als Modul.

Die andere Zeile im Funktionskörper erstellt ein neues <img>-Tag und verlinkt das src-Attribut mit dem gerade importierten Bildkomponenten. Die width– und height-Props setzen die entsprechenden Bildattribute auf 200 Pixel.

Speichern und schließen Sie die Welcome.jsx-Datei.

Als Nächstes fügen Sie Ihrem Projekt CSS hinzu.

CSS hinzufügen

In diesem Unterabschnitt fügen Sie Ihrem Projekt eine benutzerdefinierte CSS-Datei hinzu, um Ihre App zu gestalten.

Erstellen Sie ein neues Verzeichnis namens css im src/-Verzeichnis mit folgendem Befehl:

  1. mkdir src/css

Erstellen Sie nun eine neue CSS-Datei mit dem Namen main.css in src/css:

  1. nano src/css/main.css

Fügen Sie den folgenden Code zur main.css-Datei hinzu:

/src/css/main.css
body {
display: grid;
place-items: center;
background-color: #b4a7d6;
font-family: Arial, Helvetica, sans-serif;
}

.wrapper {
background-color: #fff9e6;
padding: 20px;
border-radius: 10px;
}

h1 {
color: #8873be;
}

In dem oben stehenden CSS setzen Sie ein Rasterlayout und platzieren Elemente für den body in der Mitte. Sie setzen auch eine Schriftart und Hintergrundfarbe.

Die .wrapper-Klasse wird das Wrapper-div in Ihrer Welcome.jsx-Datei auswählen. Die Stile für diese Klasse werden folgendes machen:

  • Eine Hintergrundfarbe setzen.
  • Ein Padding von 20 Pixel hinzufügen.
  • Runde Ecken von 10 Pixel hinzufügen.

Der h1-Selektor wird das Tag in HTML anvisieren, indem er seine Farbe in einen Lila-Ton setzt.

Wenn Sie fertig sind, speichern und schließen Sie die main.css-Datei.

Als Nächstes werden Sie die neue CSS-Datei vom Welcome.jsx-Komponent aus referenzieren. Öffnen Sie die Welcome.jsx-Datei:

  1. nano src/components/Welcome.jsx

Aktualisieren Sie den Inhalt der Datei mit der hervorgehobenen Zeile:

/src/components/Welcome.jsx
import Sammy from "../img/sammy.jpeg"
import "../css/main.css"

export default function Welcome() {
return (
<>
<div className="wrapper">
<h1>Welcome To My App</h1>
<p>This is going to be the coolest app in the world!</p>
<img src={Sammy} alt="Sammy Image" width={200} height={200} />
</div>
</>
)
}

Diese Zeile wird die CSS-Datei als Modul in Ihrem Komponent importieren. Möglicherweise müssen Sie die Zeile mit dem korrekten Dateipfad für Ihren Projektordner aktualisieren.

Wenn Sie fertig sind, speichern und schließen Sie die Welcome.jsx-Datei.

Im folgenden Unterabschnitt werden Sie die Titelleiste Ihrer App ändern.

Ändern der App-Titelleiste

Standardmäßig zeigt die Vite-App den Text Vite + React in der Titelleiste des Browserfensters an. In diesem Schritt werden Sie ihn in einen beschreibenden Titel ändern.

Öffnen Sie index.html in Ihrem Stammverzeichnis:

  1. nano index.html

Aktualisieren Sie den <title>-Tag mit dem hervorgehobenen Text:

/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Cool App</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>

Dieser Text ersetzt die standardmäßige Titelleiste der Vite App durch Ihren benutzerdefinierten App-Titel.

Speichern und schließen Sie die Datei index.html.

Wenn Sie den Entwicklungsserver erneut starten müssen, führen Sie folgenden Befehl aus: 

  1. yarn run dev --host

Nach all diesen Änderungen besuchen Sie http://localhost:5173, um Ihre App anzuzeigen. Sie werden eine neue Version Ihrer App sehen.

Sie können den Entwicklungsserver schließen, wenn Sie bereit sind, fortzufahren.

Sie haben jetzt ein Bild hinzugefügt, Styles geändert und eine verbesserte Benutzeroberfläche erstellt. Im nächsten und letzten Schritt erstellen Sie ein optimiertes App-Bundle für die Bereitstellung.

Schritt 6 — Erstellen für die Produktion

In diesem Schritt erstellen Sie ein optimiertes App-Bundle, das bereit ist, auf einen Server bereitgestellt zu werden. Um ein Build zu erstellen, führen Sie den folgenden Befehl im Terminal aus: 

  1. yarn run build

Mit diesem Befehl wird ein neuer dist-Ordner mit minifizierten Quelldateien erstellt, die Sie für die Produktion auf Ihren Server bereitstellen können.

Sie erhalten eine ähnliche Ausgabe wie diese:

Output
vite v4.0.4 building for production...
✓ 34 modules transformed.
dist/index.html 0.45 kB
dist/assets/sammy-9cb83ad5.jpeg 6.74 kB
dist/assets/index-d1c95597.css 0.19 kB │ gzip: 0.16 kB
dist/assets/index-e0751083.js 143.19 kB │ gzip: 46.04 kB
✨ Done in 1.63s.

Sie können jetzt den Inhalt des dist Ordners auf einen Server online stellen. Wenn Sie einen Apache oder Nginx Server haben, können Sie den Inhalt manuell hochladen. Sie können auch eine App-Plattform verwenden, um das Build-Skript auszuführen und die Build-Dateien automatisch zu generieren. Um Ihre React App auf DigitalOcean’s App Platform zu deployen, folgen Sie unserem Tutorial unter Wie man eine React-Anwendung auf DigitalOcean App Platform deployt.

Fazit

In diesem Tutorial haben Sie eine neue React App mit dem Vite-Tool erstellt. Sie haben eine frische React App mit dem Befehl yarn create vite gescaffoldet. Nachdem Sie den Boilerplate-Code entfernt haben, haben Sie Ihre Komponenten erstellt, indem Sie ein benutzerdefiniertes Bild, eine CSS-Datei hinzugefügt und die Titelleiste geändert haben. Schließlich haben Sie mit dem Befehl yarn run build ein optimiertes Bündel erstellt, bereit zum Deployen.

Jetzt, da Sie eine React App mit Vite gebaut haben, sehen Sie, was Sie sonst noch mit React in der Wie man in React.js programmiert Serie machen können und erkunden Sie andere React-Tutorials.

Source:
https://www.digitalocean.com/community/tutorials/how-to-set-up-a-react-project-with-vite