Einrichten eines React-Projekts mit Create React App

React ist eine der beliebtesten JavaScript-Bibliotheken für die Entwicklung von Front-End-Apps. Es ist eine Open-Source-Bibliothek, die ursprünglich von Facebook entwickelt wurde. React wurde schnell beliebt für die Erstellung schneller Anwendungen mit JSX – ein Programmierparadigma, das JavaScript mit einer HTML-ähnlichen Syntax kombiniert.

Früher war das Einrichten eines React-Projekts ein komplexer Prozess. Es erforderte die manuelle Konfiguration der folgenden Komponenten:

• Ein Build-System
• Code-Transpiler (konvertiert moderne Syntaxen in vom Browser lesbaren Code)
• Die Basis-Verzeichnisstruktur für das Projekt

Glücklicherweise sind diese Zeiten dank des Create React App längst vorbei. Es ist ein wunderbares Tool, das all diese Schritte automatisiert. Create React App kümmert sich um Code-Transpilierung, Linting, Testing und Build-Systeme. Darüber hinaus verfügt es über einen Server, der Hot-Reloading unterstützt, was bedeutet, dass die Webseiten aktualisiert werden, wenn Änderungen vorgenommen werden. Natürlich geschieht dies alles innerhalb einer organisierten Verzeichnisstruktur.

Kurz gesagt, es ist nicht nötig, sich der manuellen Arbeit der Konfiguration von Build-Systemen wie Webpack, oder Transpilern wie Babel zu unterziehen. Da Sie sich um weniger Dinge kümmern müssen, können Sie sich voll und ganz auf die Front-End-Entwicklung konzentrieren. Create React App ermöglicht Ihnen den Einstieg in React mit minimaler Vorbereitung.

In dieser Anleitung zeigen wir, wie Sie Create React App verwenden und eine einfache React-Anwendung zum Laufen bringen. Sie kann als Grundlage für jedes zukünftige Anwendungsprojekt dienen.

Voraussetzungen

Um die in diesem Tutorial gezeigten Schritte auszuführen, müssen Sie zuvor die folgende Software konfiguriert haben.

• • Ein ordnungsgemäß konfigurierter Ubuntu-Server. Sie können den Schritten zur Konfiguration eines Ubuntu-Servers auf CloudSigma folgen.
  • Die neueste Version von Node.js installiert. Hier ist eine Schritt-für-Schritt-Anleitung zur Installation von Node.js auf Ubuntu.

Schritt 1: Erstellen eines dedizierten npm-Projektverzeichnisses

Für Node.js-Pakete ist npm der Standard-Paketmanager. Wir verwenden npm, um ein dediziertes Projektverzeichnis zu erstellen. Es wird wichtige Dateien wie package.json hosten, die alle Metadaten über das Projekt und zusätzliche Node.js-Abhängigkeitsmodule speichern. JSON ist ein Standardformat für den Datenaustausch auf der Grundlage von JavaScript-Objekten. Weitere Informationen finden Sie in dieser Anleitung, wenn Sie mehr über JSON erfahren möchten.

Erstellen Sie zunächst ein dediziertes Verzeichnis:

Als Nächstes weisen wir npm an, eine Entwicklungsumgebung innerhalb der Datei zu initiieren. Dadurch wird die für das Projekt benötigte package.json Datei erstellt. Wechseln Sie das aktuelle Verzeichnis:

Führen Sie den Befehl npm init aus:

Beachten Sie: Wenn dieses Verzeichnis Teil eines Git-Repositorys sein soll, wird empfohlen, dieses zuerst einzurichten. Das Initialisierungsskript erkennt es automatisch und konfiguriert alles entsprechend. Nach Abschluss sollte sich eine package.json-Datei im Verzeichnis befinden. Überprüfen Sie diese mit einem Texteditor:

Schritt 2: Erstellen eines React-Projekts mit Create React App

In diesem Schritt rufen wir Create React App auf, um unser Beispiel-React-Projekt zu erstellen. Dieses Skript kopiert alles Notwendige zusammen mit allen Abhängigkeiten in ein neues Verzeichnis. Der npm-Paketmanager enthält auch das Tool npx. Es wird verwendet, um ausführbare Pakete auszuführen. Wir werden es verwenden, um das Create-React-App-Skript auszuführen, ohne das Projekt tatsächlich herunterzuladen.

Die Ausführung startet create-react-app im angegebenen Verzeichnis. Es führt auch npm install-Befehle aus, um die Abhängigkeiten zu installieren. Zur einfacheren Verwendung nutzen wir den Namen cloudsigma-react-react-tutorial. Führen Sie den folgenden Befehl aus:

Am Ende des Prozesses sehen Sie den folgenden Hinweis. Dies ist die Erfolgsmeldung, wenn die Installation erfolgreich war. Sie gibt auch den Speicherort an, an dem das Projekt erstellt wurde.

Schritt 3: React-Scripts anwenden

Jetzt geben wir einen kurzen Überblick über die verschiedenen react-Skripte, die während der Installation installiert wurden.

• • Wir werden das test-Skript ausführen, um den Testcode auszuführen.
  • Das build-Skript erstellt eine minimierte Version unseres Projekts (für die Produktionsumgebung).
  • Schließlich bietet das eject-Skript die vollständige Kontrolle über die Anpassung.

Überprüfen Sie zuerst den Inhalt des React-Projektverzeichnisses:

Hier ist eine Beschreibung jeder Datei:

• • node_modules/: Dieses Verzeichnis enthält alle externen JavaScript-Bibliotheken, die von der App verwendet werden. Es ist selten notwendig, hier herumzubasteln.
  • public/: Es enthält einige grundlegende HTML-, JSON- und Bilddateien. Es dient als Stammverzeichnis des Projekts.
  • src/: Dieses Verzeichnis enthält die React-JavaScript-Codes für unser Projekt. Hier werden wir die meiste Zeit verbringen. Wir werden dieses Verzeichnis im nächsten Teil der Anleitung genauer untersuchen.
  • .gitignore: Es ist eine Datei, die beschreibt, welche Verzeichnisse Git ignorieren wird, zum Beispiel das node_modules-Verzeichnis. Generell ist es besser, Verzeichnisse auszuschließen, die große Dateien enthalten oder Protokolldateien hosten, die nicht in der Versionskontrolle enthalten sein müssen. In diesem Fall enthält es auch einige React-spezifische Verzeichnisse.
  • README.md: Es ist eine Markdown-Datei, die viele nützliche Informationen über Create React App enthält. Sie enthält beispielsweise eine Zusammenfassung von Befehlen und Links für die erweiterte Konfiguration. Im Moment haben wir damit nichts zu tun. Im Laufe des Projekts werden Sie jedoch weitere Dokumentationen über das Projekt hinzufügen.

Die Dateien package.json und package-lock.json werden von npm verwendet. Beim Ausführen des ersten npx-Befehls wurde das Basisprojekt erstellt. Als die zusätzlichen Abhängigkeiten installiert wurden, wurde package-lock.json. npm verwendet package-lock.json, um sicherzustellen, dass die Pakete mit den genauen Versionen übereinstimmen. Auf diese Weise erhält jemand anderes, der Ihr Projekt installiert, ebenfalls identische Abhängigkeiten. Da sie automatisch erstellt und verwaltet wird, müssen Sie sie selten anfassen.

Die letzte Datei, über die wir sprechen müssen, ist package.json. Sie enthält Metadaten über das Projekt. Die Metadaten können beispielsweise einen Projekttitel, eine Versionsnummer und Abhängigkeiten umfassen. Sie enthält auch die Skripte, mit denen Sie das Projekt ausführen können. Sehen Sie sich den Inhalt der package.json-Datei an:

Es ist eine JSON-Datei mit verschiedenen Objekten. Werfen Sie einen Blick auf das Objekt „scripts“. Es enthält vier verschiedene Skripte:

• • start
  • build
  • test
  • eject

Diese Skripte sind nach ihrer Wichtigkeit aufgelistet. Das start-Skript startet den lokalen Entwicklungsserver. Als Nächstes werden wir näher erläutern, wie Sie die restlichen Skripte verwenden können.

• • Das Build-Skript

Um ein npm-Skript auszuführen, ist die Befehlsstruktur wie folgt:

Um das build Skript auszuführen, verwenden Sie den folgenden Befehl:

Es startet den Prozess des Kompilierens der Codes in ein verwendbares Bundle. Wenn Sie fertig sind, sehen Sie sich das Ausgabeverzeichnis an:

Beachten Sie, dass ein neues Verzeichnis build/ verfügbar ist. Es enthält eine minimierte und optimierte Version der anderen Dateien. Es wird empfohlen, es in die .gitignore-Datei aufzunehmen, da wir es jederzeit mit dem build-Skript generieren können.

• • Das Test-Skript

Das test-Skript ist eines dieser Skripte, die den Parameter „run“ für npm nicht benötigen, um ausgeführt zu werden. Es funktioniert jedoch auch damit einwandfrei. Wenn es ausgeführt wird, startet dieses Skript einen Test-Runner namens Jest. Der Tester sucht nach Projektdateien mit den Dateiendungen .spec.js oder test.js und führt diese Dateien aus.

Der folgende npm-Befehl führt das test-Skript aus:

In der Ausgabe gibt es einige Dinge zu beachten. Denken Sie daran, dass der Test-Runner nur nach Dateien mit bestimmten Endungen sucht? In diesem Fall gibt es nur eine einzige Testsuite (nur eine Datei mit .test.js-Erweiterung). Sie enthält nur einen einzigen Test. Jest kann Tests in der Code-Hierarchie automatisch erkennen, sodass es Ihnen freisteht, Tests in einem Verzeichnis zu verschachteln.

Zudem führt Jest den Test nicht nur einmal aus und beendet sich dann. Es führt den Test weiterhin im Terminal aus. Wenn Änderungen am Quellcode vorgenommen wurden, führt es die Tests erneut aus. Jest ermöglicht es auch, einzuschränken, welche Tests ausgeführt werden sollen. Indem Sie beispielsweise 0 drücken, können Sie Jest anweisen, nur die Dateien zu testen, die geändert wurden. Da Test-Suites wachsen, spart diese Option viel Zeit. Um den Jest-Test-Runner zu beenden, drücken Sie q.

• • Das Eject-Skript

Das eject-Skript kopiert alle Abhängigkeiten und Konfigurationsdateien in das Projekt und bietet Ihnen die volle Kontrolle über den Code. Dadurch entfernen Sie das Projekt jedoch aus der integrierten Toolchain von Create React App. Einmal ausgeführt, gibt es keine Möglichkeit, dies rückgängig zu machen.

Der Vorteil von Create React App ist, dass es Ihnen die Last zahlreicher Konfigurationen abnimmt. Das Erstellen einer modernen JavaScript-Anwendung erfordert viele Werkzeuge, die zusammenarbeiten. Create React App übernimmt alle Konfigurationen für Sie, sodass das Ejecten des Projekts bedeutet, dass Sie danach alles manuell tun müssen.

Ein spürbarer Nachteil von Create React App ist, dass es, da es alle Konfigurationen selbst verwaltet, keine vollständige Anpassung des Projekts bietet. Für die meisten Projekte ist das kein Problem. Wenn Sie jedoch die volle Kontrolle über das Projekt übernehmen möchten, müssen Sie den Code ejecten. Einmal ausgeführt, können Sie nicht mehr auf neue Versionen von Create React App aktualisieren. Sie müssen alle Erweiterungen manuell verwalten.

Schritt 4: Serverstart

Nun werden wir den lokalen Server initiieren und das Projekt in einem Webbrowser ausführen. Um den Server zu starten, haben wir ein weiteres Skript zur Hand. Die Ausführung erfordert nicht den Befehl npm run. Wenn es ausgeführt wird, startet das Skript einen lokalen Server, führt den Projektcode aus, startet einen Watcher und lauscht auf Codeänderungen. Die Änderungen werden direkt im Browser angezeigt. Der folgende Befehl startet den Server:

Die Ausgabe zeigt die URL an, unter der das Projekt im Browser aufgerufen werden kann. Sie zeigt auch verschiedene Informationen über das laufende Projekt. Öffnen Sie die URL in einem Browser:

Wie die Ausgabe zeigt, verwendet Create React App den Port 3000, um das Projekt bereitzustellen. Wenn der Port bereits belegt war, verwendet Create React App den nächsten verfügbaren Port. Wenn Sie eine Firewall konfiguriert haben, muss diese den Datenverkehr zu Port 3000 (oder dem von Create React App gemeldeten Port) zulassen. Sie können hier mehr über das Verwalten der UFW-Firewall erfahren.

Um den Server zu beenden, drücken Sie Strg+C im Terminalfenster. Dadurch wird der laufende Prozess (die Serverinstanz) beendet.

Schritt 5: Änderung der Homepage

Als Nächstes lernen wir, wie man Code ändert, der im Verzeichnis public/ gespeichert ist. Es enthält die Basis-HTML-Seite und dient als Stammverzeichnis des Projekts. Auch wenn Sie es in Zukunft vielleicht nicht mehr bearbeiten müssen, dient es als Basis des Projekts.

Starten Sie zuerst den Server mit npm, und wechseln Sie dann in das Verzeichnis public/ :

Das Verzeichnis enthält Dateien wie favicon.ico, logo192.png, logo512.png usw. Dies sind Symbole, die ein Benutzer, der die Webseite besucht, auf seinem Tab, im Browser oder auf dem Telefon sehen würde. Der Browser wählt automatisch die passende Größe aus. Schließlich werden Sie diese durch für Ihr Projekt geeignete Symbole ersetzen. Fürs Erste lassen wir sie so, wie sie sind.

Die Datei manifest.json enthält einen strukturierten Satz von Metadaten. Sie beschreibt das Projekt, listet verfügbare Symbole auf und mehr.

Die Datei robots.txt enthält Informationen für Web-Crawler. Web-Crawler “durchsuchen” das World Wide Web und indexieren Seiten für Suchmaschinen. Es besteht keine Notwendigkeit, die Datei anzupassen, es sei denn, Sie haben einen bestimmten Grund dafür. Beispielsweise möchten Sie bestimmte URLs zu bestimmten Inhalten nicht leicht zugänglich machen. Fügen Sie den Pfad zu robots.txt hinzu, und sie wird von Suchmaschinen nicht indexiert.

Die Datei index.html ist die Wurzel unserer Anwendung. Wann immer auf die App zugegriffen wird, ist dies die Datei, die bereitgestellt wird. Dies ist die Datei, die Sie auf dem Bildschirm sehen. Lassen Sie uns einen kurzen Blick darauf werfen. Öffnen Sie sie in einem Texteditor:

Es ist eine ziemlich kurze Datei. Beachten Sie, dass es keine Bilder oder Wörter im <body> gibt. React baut diese Inhalte mit seiner eigenen Engine auf und fügt sie mithilfe von JavaScript ein. React muss jedoch wissen, wo der Code eingefügt werden soll. Die Datei index.html dient diesem Zweck.

Ändern wir den <title> in My React App:

Speichern Sie dann die Datei und schließen Sie den Editor. Überprüfen Sie nun die Webseite im Browser:

Wie Sie sehen können, hat sich der Titel des Tabs geändert in My React App. Wenn er sich nicht automatisch geändert hat, laden Sie die Seite neu, indem Sie F5 oder Strg+R.

Gehen wir zurück zum Texteditor. Alle React-Projekte müssen von einem Root-Element ausgehen. Es kann mehr als eines auf einer einzelnen Seite geben. Mindestens eines ist jedoch zwingend erforderlich. Es teilt React mit, wo der gesamte generierte HTML-Code platziert werden soll. Suchen Sie in unserer index.html nach der Position des Elements <div id="root">. Es ist das <div>, das React für zukünftige Änderungen verwenden wird. Versuchen Sie, den Wert von id von root in base:

 

 

Laden Sie danach die Seite im Browser neu. Es wird kein Inhalt angezeigt. Wie die Web-Entwicklertools von Firefox zeigen, wird ein Fehler ausgegeben:

Gehen Sie zurück zum Texteditor und ändern Sie den Wert von id zurück in root:

Schritt 6: Überschriften-Tag und Styling-Änderungen

Bisher haben wir den lokalen Server gestartet und kleine Änderungen an der Root-HTML-Datei vorgenommen. Jetzt werden wir mit den React-Komponenten arbeiten, die sich im Verzeichnis src/ befinden. Wir werden Änderungen am CSS- und JavaScript-Code vornehmen. Die Änderungen werden automatisch mittels Hot Reloading angewendet.

Wenn der Server gestoppt wurde, starten Sie ihn mit npm. Werfen Sie dann einen Blick auf den Inhalt des Verzeichnisses src/ :

Hier gibt es mehrere JavaScript- und CSS-Dateien. Wir werden sie nacheinander durchgehen.

• ServiceWorker.js

Dies ist eine wichtige Datei, wenn Sie Progressive Web Apps erstellen möchten. Dieser Service Worker bietet verschiedene Funktionalitäten wie Push-Benachrichtigungen, Offline-Caching usw. Fürs Erste lassen wir sie so, wie sie ist.

• SetupTests.js und App.test.js

Wie die Benennung dieser Dateien vermuten lässt, werden sie zum Testen von Dateien verwendet. Wann immer wir das Skript test mit npm ausgeführt haben, wurden diese Dateien ausgeführt. Die Datei setupTests.js enthält einige benutzerdefinierte expect-Methoden.

Werfen wir einen Blick auf App.test.js. Öffnen Sie sie in einem Texteditor:

Sie enthält einen einfachen Test, der nach der Phrase learn react im Dokument sucht. Wenn Sie den Browser-Tab geöffnet haben, können Sie die Phrase auf der Seite sehen. Im Gegensatz zu anderen Unit-Tests sind React-Tests anders. Da Komponenten visuelle Informationen wie Markup (und Logik zur Datenmanipulation) enthalten können, funktioniert herkömmliches Unit-Testing nicht so einfach. In dieser Hinsicht lässt sich das Testen von React eher als eine Form von Funktions- oder Integrationstests beschreiben.

• CSS-Dateien

Es stehen verschiedene Styling-Dateien zur Verfügung: App.css, index.css, und logo.svg. Sie können verschiedene Methoden zum Stylen in React anwenden. Der einfachste Weg ist das Schreiben von normalem CSS, da keine zusätzliche Konfiguration erforderlich ist.

Sie können CSS direkt in eine Komponente importieren. Dies ermöglicht es, die CSS-Dateien so aufzuteilen, dass sie nur für eine einzelne Komponente gelten. Sie trennen das CSS eigentlich nicht vom JavaScript. Vielmehr gruppieren Sie alle relevanten Komponenten (CSS, JavaScript, Bilder und Markup) zusammen.

Öffnen Sie App.css mit einem Texteditor:

Es ist eine Standard-CSS-Datei ohne spezielle CSS-Präprozessoren. Sie können diese später hinzufügen, wenn Sie möchten. Create React App ist bestrebt, neutral zu sein und gleichzeitig eine solide Out-of-the-Box-Erfahrung zu bieten.

Lassen Sie uns eine Änderung vornehmen und sie in Aktion sehen. Ändern Sie den Wert von background-color zu blue:

Überprüfen Sie die Änderung im Browser:

• • Index.js

Jetzt ist es an der Zeit, Änderungen am React-JavaScript-Code vorzunehmen. Öffnen Sie index.js mit einem Texteditor:

Ganz oben wird React, ReactDOM, index.css, App, und serviceWorker importiert. Durch das Importieren von React, laden wir den Code, der benötigt wird, um JSX in JavaScript umzuwandeln. ReactDOM ist der Code, der unseren React-Code mit dem Basiselement verbindet ( index.html, zum Beispiel). Sehen Sie sich die folgende Zeile an:

Es weist React an, eine id mit dem Label „root“ zu finden und die React-Codes dort einzufügen. <App/> ist das Root-Element, und von dort aus verzweigt sich alles.

Beachten Sie, dass wir auch CSS-Dateien importiert haben (wie index.css) aber eigentlich nichts damit gemacht haben. Durch das Importieren teilen wir Webpack über die React-Skripte tatsächlich mit, die CSS-Codes in das endgültige kompilierte Bundle aufzunehmen. Andernfalls werden die CSS-Styles nicht angezeigt.

• App.js

Als Nächstes werfen wir einen Blick auf App.js. Öffnen Sie es in einem Texteditor:

 

Sehen wir uns an, wie sich die Änderung des Inhalts auf unser Projekt auswirkt. Ändern Sie den Inhalt des <p>Tags:

Speichern Sie dann die Datei und überprüfen Sie den Browser auf Änderungen:

Voila! Sie haben Ihre ersten Anpassungen an einer React-Komponente vorgenommen!

Es gibt noch eine weitere Sache zu beachten. Sehen Sie sich das Element an <img>:

Beachten Sie, dass das logo in geschweiften Klammern übergeben wird. Wann immer Attribute übergeben werden (die keine Strings oder Zahlen sind), müssen sie in geschweiften Klammern übergeben werden. React behandelt sie dann als JavaScript-Objekte anstelle von Strings.

In diesem Fall importiert die App das Bild nicht wirklich. Stattdessen ist es ein Verweis auf das Bild. Wenn Webpack das Projekt erstellt, platziert es das Bild an der entsprechenden Stelle. Wir können dies im Browser überprüfen. Öffnen Sie die Web-Entwicklertools in Firefox:

Webpack möchte allen Bildern eindeutige Dateipfade zuweisen. Selbst wenn die Bilder mit demselben Namen importiert wurden, haben sie daher unterschiedliche Pfade.

Schritt 7: Erstellen des Projekts

In diesem Schritt lernen wir, wie man das Projekt in ein bereitstellbares Paket kompiliert. Starten Sie das Terminal und führen Sie das build -Skript des Projekts aus:

Der Compiler erstellt das dedizierte Verzeichnis build/, in dem er die Ausgabe ablegt. Um zu sehen, was der Kompilierungsprozess bewirkt, öffnen Sie die index.html -Datei aus dem Verzeichnis build/:

Wie Sie sehen können, sind alle Codes kompiliert und in den kleinsten nutzbaren Zustand minimiert. Die Lesbarkeit ist kein Problem, da es sich nicht um den öffentlich zugänglichen Teil des Codes handelt. Minimierte Codes nehmen weniger Platz ein, behalten aber alle ihre Funktionalitäten. Im Gegensatz zu Sprachen, bei denen Leerzeichen sehr wichtig sind (z. B. Python), benötigen Websprachen (HTML, CSS und JavaScript) keine korrekten Abstände, damit der Browser sie interpretieren kann.

Fazit

In dieser Anleitung haben wir erfolgreich gezeigt, wie man eine React-Anwendung erstellt. Wir haben auch einige grundlegende Konfigurationen mit JavaScript-Build-Tools ohne komplexe technische Details gezeigt. Dies ist der entscheidende Vorteil, den Create React App bietet. Sie müssen nicht alles wissen, um mit React zu beginnen. Sie müssen die komplizierten Build-Schritte nicht lernen und können sich ausschließlich auf den React-Code konzentrieren.

Hier haben wir auch gezeigt, wie man ein React-Projekt startet, testet und erstellt. Diese Befehle sind für Projekte aller Größenordnungen von entscheidender Bedeutung.

Viel Spaß beim Programmieren!