Führen Sie React-Anwendungen lokal aus
- Führen Sie React-Anwendungen lokal mit einer einzigen HTML-Seite aus
-
Führen Sie React-Anwendungen lokal aus mit
create-react-app
Lokal ausgeführte React-Apps können eine unschätzbare Gelegenheit sein, Ihre Webentwicklungsfähigkeiten zu üben. Sie ermöglichen es Ihnen, sich auf das Schreiben von Code zu konzentrieren, anstatt zeitaufwendige Konfigurationen wie das Einrichten von Webpack, Babbel und anderen erforderlichen Tools durchzuführen.
Führen Sie React-Anwendungen lokal mit einer einzigen HTML-Seite aus
Die offiziellen Dokumente von React geben Ihnen eine fertige HTML-Datei, um React lokal auszuführen. Alles, was Sie tun müssen, ist die HTML-Datei herunterzuladen, sie mit Ihrem Code-Editor zu öffnen, die erforderlichen Änderungen vorzunehmen und dann die Datei in Ihrem Browser zu öffnen.
Diese HTML-Datei hat die Abschnitte <head> und <body>. Bei ersterem importieren wir React über einen CDN-Link, letzteres enthält ein <div> mit dem id-Attribut root.
Dann haben wir ein öffnendes und schließendes <script>-Tag, mit dem wir JavaScript in der HTML-Datei ausführen können. Hier verwenden wir die Methode document.getElementById() , um auf das DOM-Element zu verweisen, und die Methode ReactDOM.createRoot(), um React für diesen spezifischen Container zu initiieren.
Schließlich verwenden wir die Methode render(), um unsere Komponente in der HTML-Datei auszuführen.
Führen Sie React-Anwendungen lokal aus mit create-react-app
Facebook, die Organisation, die die React-Bibliothek entwickelt und pflegt, hat ein create-react-app-Paket erstellt. Mit nur wenigen npm-Befehlen können Sie eine SPA (Single Page Application) erstellen.
Es schafft eine nahezu ideale Umgebung zum Erstellen von Apps in React. Das Projekt wird eingerichtet, einschließlich Compiler, Transpiler und Tools wie Webpack.
Diese Tools sind erforderlich und ermöglichen es Ihnen, erweiterte React-Funktionen wie die JSX-Template-Sprache zu verwenden. Es ist auch erforderlich, die neuesten JavaScript-Funktionen wie Destrukturierung, Pfeilfunktionen usw. zu verwenden.
Es ermöglicht React-Entwicklern, sich auf das Lernen von Code zu konzentrieren, anstatt die Umgebung einzurichten. Suchen Sie zum Erstellen des Projekts einen beliebigen Ordner, in dem Sie ein Verzeichnis zum Speichern der erforderlichen Dateien erstellen möchten.
Öffnen Sie als nächstes die Eingabeaufforderung und navigieren Sie zu diesem Ordner (mit dem Befehl cd unter Windows). Verwenden Sie diesen Befehl, um das Projekt zu erstellen:
npx create-react-app app-name
Hier ist npx create-react-app der Befehl, und der letzte Teil ist der Name, den Sie für Ihre React-Anwendung wählen.
Wechseln Sie dann mit diesem Befehl in den Ordner des neu erstellten Projekts:
cd app-name
Schließlich können Sie mit diesem Befehl die Live-Vorschau Ihrer Komponente starten:
npm start
Typischerweise befinden sich die JavaScript-Dateien im Ordner src des Projekts. Die Datei App.js ist die standardmäßige übergeordnete Komponentendatei, aber Sie können für jede neue Komponente andere Dateien erstellen.
Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.
LinkedIn