React ist eine leistungsstarke JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen, entwickelt von Facebook. Es vereinfacht den Prozess der Erstellung dynamischer, interaktiver Webanwendungen. Dieser Leitfaden führt Sie durch die Erstellung einer React-Anwendung von Grund auf.
Voraussetzungen
Bevor Sie beginnen, stellen Sie sicher, dass Folgendes auf Ihrem System installiert ist:
-
Node.js und npm:
-
Laden Sie Node.js herunter und installieren Sie es (npm ist in Node.js enthalten).
- Installation überprüfen:
node -v
npm -v
Texteditor:
Verwenden Sie einen beliebigen Code-Editor Ihrer Wahl, z. B. Visual Studio Code.
Schritt 1: Create-React-App installieren
create-react-app ist ein offizielles Tool des React-Teams zum schnellen Einrichten eines neuen React-Projekts mit einer guten Standardkonfiguration.
- Öffnen Sie Ihr Terminal oder Ihre Eingabeaufforderung und installieren Sie die Create-React-App global:
npm install -g create-react-app
Schritt 2: Erstellen Sie eine neue React-App
-
Navigieren Sie zu Ihrem Projektverzeichnis:
Wählen Sie, wo sich Ihr Projekt befinden soll. Zum Beispiel:
cd Desktop
-
Erstellen Sie die React-App:
Ersetzen Sie todolist durch den gewünschten Projektnamen:
npx create-react-app todolist
- Dieser Befehl erstellt einen neuen Ordner (todolist) mit allen erforderlichen Dateien und Abhängigkeiten.
-
Navigieren Sie zum Projektordner:
cd todolist
Schritt 3: Starten Sie den Entwicklungsserver
Führen Sie den folgenden Befehl aus, um den Entwicklungsserver zu starten:
npm start
- Ihr Standardbrowser sollte automatisch geöffnet werden und die React-App unter http://localhost:3000 anzeigen.
- Wenn dies nicht der Fall ist, öffnen Sie manuell Ihren Browser und gehen Sie zu dieser Adresse.
Schritt 4: Erkunden Sie die Projektstruktur
Hier ist eine Übersicht der von der create-react-app erstellten Dateien und Ordner:
node -v
npm -v
Schritt 5: Ändern Sie Ihre React-App
-
Bearbeiten Sie die Hauptkomponente (App.js):
Öffnen Sie src/App.js in Ihrem Texteditor und passen Sie JSX an, um den Inhalt zu ändern:
npm install -g create-react-app
-
Änderungen speichern und Aktualisierungen anzeigen:
Nach dem Speichern wird der Browser automatisch aktualisiert, um Ihre Änderungen anzuzeigen.
Fazit
Herzlichen Glückwunsch! Sie haben Ihre erste React-App erfolgreich erstellt und ausgeführt. Dieses Setup bietet eine solide Grundlage für die Erstellung leistungsstarker, komponentenbasierter Webanwendungen. Entdecken Sie React-Komponenten, Zustandsverwaltung und Hooks, um Ihre Fähigkeiten weiter zu verbessern!
Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine Reaktions-App. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme:Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn