Einrichten eines React-Projekts mit Create React App

Der Autor hat Creative Commons dazu ausgewählt, im Rahmen des Programms Write for DOnations eine Spende zu erhalten.

Einführung

React ist ein beliebtes JavaScript-Framework für die Erstellung von Frontend-Anwendungen. Ursprünglich von Facebook entwickelt, hat es an Popularität gewonnen, da es Entwicklern die Erstellung schneller Anwendungen unter Verwendung eines intuitiven Programmierparadigmas ermöglicht, das JavaScript mit einer HTML-ähnlichen Syntax, bekannt als JSX, verbindet.

Der Start eines neuen React-Projekts war früher ein komplizierter, mehrstufiger Prozess, der die Einrichtung eines Build-Systems, eines Code-Transpilers zur Umwandlung der modernen Syntax in für alle Browser lesbaren Code und einer Basis-Verzeichnisstruktur umfasste. Aber jetzt enthält Create React App alle JavaScript-Pakete, die Sie zum Ausführen eines React-Projekts benötigen, einschließlich Code-Transpiling, grundlegendes Linting, Testen und Build-Systeme. Es enthält auch einen Server mit Hot Reloading, der Ihre Seite aktualisiert, wenn Sie Code-Änderungen vornehmen. Schließlich wird eine Struktur für Ihre Verzeichnisse und Komponenten erstellt, sodass Sie in wenigen Minuten einsteigen und mit der Codierung beginnen können.

Mit anderen Worten, Sie müssen sich nicht um die Konfiguration eines Build-Systems wie Webpack kümmern. Sie brauchen Babel nicht einzurichten, um Ihren Code so zu transponieren, dass er browserübergreifend nutzbar ist. Sie müssen sich keine Gedanken über die meisten komplizierten Systeme der modernen Front-End-Entwicklung machen. Sie können mit minimaler Vorbereitung mit dem Schreiben von React-Code beginnen.

Am Ende dieses Tutorials werden Sie eine laufende React-Anwendung haben, die Sie als Grundlage für alle zukünftigen Anwendungen verwenden können. Sie werden die ersten Änderungen am React-Code vornehmen, Stile aktualisieren und einen Build ausführen, um eine vollständig minimierte Version Ihrer Anwendung zu erstellen. Weiterhin werden Sie einen Server mit Hot-Reloading für sofortiges Feedback nutzen und die Teile eines React-Projekts eingehend untersuchen. Schließlich werden Sie damit beginnen, benutzerdefinierte Komponenten zu schreiben und eine Struktur zu erstellen, die mit Ihrem Projekt wachsen und sich anpassen kann.

Voraussetzungen

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

• Auf Ihrem Computer installiertes Node.js Version 10.16.0. Um dies unter MacOS oder Ubuntu 18.04 zu installieren, folgen Sie den Schritten in Installation von Node.js und Erstellen einer lokalen Entwicklungsumgebung auf MacOS oder dem Abschnitt Installation unter Verwendung eines PPA von Installation von Node.js auf Ubuntu 18.04.

• Es wird auch dazu beitragen, Ihnen ein Grundverständnis über JavaScript zu vermitteln, das Sie in der Reihe Codieren mit JavaScript finden können, zusammen mit dem grundlegenden Wissen über HTML und CSS.

Schritt 1 – Erstellen eines neuen Projekts mit der Create React App

In diesem Schritt erstellen Sie eine neue Anwendung unter Verwendung des npm-Paketmanagers zur Ausführung eines Remote-Skripts. Das Skript kopiert die erforderlichen Dateien in ein neues Verzeichnis und installiert alle Abhängigkeiten.

Bei der Installation von Node haben Sie auch eine Paketverwaltungsanwendung namens npm installiert. npm installiert JavaScript-Pakete in Ihrem Projekt und verfolgt auch die Details des Projekts. Wenn Sie mehr über npm erfahren möchten, werfen Sie einen Blick in unser Tutorial Verwenden von Node.js-Modulen mit npm und package.json.

npm enthält auch ein Tool namens npx, das ausführbare Pakete ausführt. Das bedeutet, dass Sie den Code von Create React App ausführen, ohne zuerst das Projekt herunterzuladen.

Das ausführbare Paket führt die Installation von create-react-app in das von Ihnen angegebene Verzeichnis aus. Es beginnt mit der Erstellung eines neuen Projekts in einem Verzeichnis, das in diesem Tutorial digital-ocean-tutorial genannt wird. Auch dieses Verzeichnis muss vorher nicht existieren; das ausführbare Paket wird es für Sie erstellen. Das Skript führt auch npm install innerhalb des Projektverzeichnisses aus, das alle zusätzlichen Abhängigkeiten herunterlädt.

Um das Basisprojekt zu installieren, führen Sie den folgenden Befehl aus:

npx create-react-app digital-ocean-tutorial

Dieser Befehl löst einen Build-Prozess aus, der den Basiscode zusammen mit einer Reihe von Abhängigkeiten herunterlädt.

Wenn das Skript beendet ist, sehen Sie eine Erfolgsmeldung, die besagt:

Output
...
Success! Created digital-ocean-tutorial at your_file_path/digital-ocean-tutorial
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd digital-ocean-tutorial
  npm start

Happy hacking!

your_file_path wird Ihr aktueller Pfad sein. Wenn Sie ein Benutzer von macOS sind, wird er in etwa /Users/your_username lauten, wenn Sie sich auf einem Ubuntu-Server befinden, wird er in etwa /home/your_username​​​ lauten.

Sie werden auch eine Liste von npm-Befehlen sehen, die Ihnen ermöglichen, Ihre Anwendung auszuführen, zu erstellen, zu starten und zu testen. Sie werden diese im nächsten Abschnitt näher untersuchen.

Ihr Projekt ist nun in einem neuen Verzeichnis eingerichtet. Wechseln Sie in das neue Verzeichnis:

cd digital-ocean-tutorial

Sie befinden sich nun in dem Stammverzeichnis Ihres Projekts. An diesem Punkt haben Sie ein neues Projekt erstellt und alle Abhängigkeiten hinzugefügt. Allerdings haben Sie noch keine Maßnahmen ergriffen, um das Projekt auszuführen. Im nächsten Abschnitt werden Sie benutzerdefinierte Skripte ausführen, um das Projekt zu erstellen und zu testen.

Schritt 2 – Verwendung von react-scripts

In diesem Schritt lernen Sie die verschiedenen react-scripts kennen, die mit dem Repo installiert werden. Zuerst führen Sie das Skript test zur Ausführung des Testcodes aus. Dann werden Sie das Skript build ausführen, um eine minimierte Version zu erstellen. Schließlich sehen Sie sich an, wie das Skript eject Ihnen die vollständige Kontrolle über die Anpassung geben kann.

Nachdem Sie sich nun im Projektverzeichnis befinden, sehen Sie sich um.  Sie können entweder das gesamte Verzeichnis in Ihrem Texteditor öffnen, oder, wenn Sie sich auf dem Terminal befinden, können Sie die Dateien mit dem folgenden Befehl auflisten:

ls -a

Das Flag -a stellt sicher, dass die Ausgabe auch versteckte Dateien enthält.

So oder so, Sie werden eine Struktur wie diese sehen:

Output
node_modules/
public/
src/
.gitignore
README.md
package-lock.json
package.json

Erklären wir diese eine nach der anderen:

• node_modules/ enthält alle externen JavaScript-Bibliotheken, die von der Anwendung verwendet werden. Sie werden sie nur selten öffnen müssen.

• Das Verzeichnis public/ enthält einige grundlegende HTML-, JSON- und Image-Dateien. Dies sind die Stammverzeichnisse Ihres Projekts.  In Schritt 4 werden Sie Gelegenheit haben, sie näher zu erforschen.

• Das Verzeichnis src/ enthält den React JavaScript-Code für Ihr Projekt. Der Großteil Ihrer Arbeit wird in diesem Verzeichnis erfolgen. In Schritt 5 werden Sie dieses Verzeichnis ausführlich erkunden.

• Die Datei .gitignore enthält einige Standardverzeichnisse und -dateien, die von git – ihrer Quellkontrolle – ignoriert werden, wie z. B. das Verzeichnis node_modules. Bei den ignorierten Elementen handelt es sich in der Regel um größere Verzeichnisse oder Protokolldateien, die Sie in der Versionsverwaltung nicht benötigen. Es wird auch einige Verzeichnisse enthalten, die Sie mit einigen der React-Skripte erstellen werden.

• README.md ist eine Markdown-Datei, die viele nützliche Informationen über Create React App enthält, wie z. B. eine Zusammenfassung der Befehle und Links zur erweiterten Konfiguration. Im Moment ist es am besten, die Datei README.md so zu belassen, wie Sie sie sehen. Wenn Ihr Projekt fortschreitet, werden Sie die Standardinformationen durch detailliertere Informationen über Ihr Projekt ersetzen.

Die beiden letzten Dateien werden von Ihrem Paketmanager verwendet. Wenn Sie den anfänglichen npx-Befehl ausgeführt haben, haben Sie das Basisprojekt erstellt, aber auch die zusätzlichen Abhängigkeiten installiert. Als Sie die Abhängigkeiten installiert haben, haben Sie eine Datei package-lock.json erstellt. Diese Datei wird von npm verwendet, um sicherzustellen, dass die Pakete mit exakten Versionen übereinstimmen. Wenn eine andere Person Ihr Projekt installiert, können Sie auf diese Weise sicherstellen, dass sie identische Abhängigkeiten haben. Da diese Datei automatisch erzeugt wird, werden Sie diese Datei selten direkt bearbeiten.

Die letzte Datei ist eine package.json. Diese enthält Metadaten über Ihr Projekt, wie den Titel, die Versionsnummer und die Abhängigkeiten. Sie enthält auch Skripte, die Sie zur Ausführung Ihres Projekts verwenden können.

Öffnen Sie die Datei package.json in Ihrem bevorzugten Texteditor:

nano package.json

Wenn Sie die Datei öffnen, sehen Sie ein JSON-Objekt, das alle Metadaten enthält.  Wenn Sie sich das Objekt scripts ansehen, finden Sie vier verschiedene Skripte: start, build, test und eject.

Diese Skripte sind in der Reihenfolge ihrer Wichtigkeit aufgelistet.  Das erste Skript startet die lokale Entwicklungsumgebung; dazu kommen Sie im nächsten Schritt.  Das zweite Skript wird Ihr Projekt erstellen. Sie werden dies in Schritt 4 im Detail untersuchen, aber es lohnt sich, es jetzt auszuführen, um zu sehen, was passiert.

Das Skript build

Um ein beliebiges nmp-Skript auszuführen, müssen Sie nur npm run script_name in Ihr Terminal eingeben. Es gibt ein paar spezielle Skripte, bei denen Sie den run-Teil des Befehls weglassen können, aber es ist immer in Ordnung, den vollständigen Befehl auszuführen. Um das Skript build auszuführen, geben Sie Folgendes in Ihr Terminal ein:

npm run build

Sie sehen sofort die folgende Meldung:

Output
> digital-ocean-tutorial@0.1.0 build your_file_path/digital-ocean-tutorial
> react-scripts build

Creating an optimized production build...
...

Dies sagt Ihnen, dass Create React App Ihren Code in ein nutzbares Bundle kompiliert.

Nach Fertigstellung sehen Sie die folgende Ausgabe:

Output
...
Compiled successfully.

File sizes after gzip:

  39.85 KB  build/static/js/9999.chunk.js
  780 B      build/static/js/runtime-main.99999.js
  616 B     build/static/js/main.9999.chunk.js
  556 B     build/static/css/main.9999.chunk.css

The project was built assuming it is hosted at the server root.
You can control this with the homepage field in your package.json.
For example, add this to build it for GitHub Pages:

  "homepage" : "http://myname.github.io/myapp",

The build folder is ready to be deployed.
You may serve it with a static server:

  serve -s build

Find out more about deployment here:

  bit.ly/CRA-deploy

Listen Sie die Projektinhalte auf und Sie werden einige neue Verzeichnisse sehen:

ls -a

Output
build/
node_modules/
public/
src/
.gitignore
README.md
package-lock.json
package.json

Sie haben nun ein Verzeichnis build. Wenn Sie die Datei .gitignore geöffnet haben, haben Sie vielleicht bemerkt, dass das Verzeichnis build von git ignoriert wird. Das liegt daran, dass das Verzeichnis build nur eine minimierte und optimierte Version der anderen Dateien ist. Es ist nicht erforderlich, die Versionskontrolle zu verwenden, da Sie immer den Befehl build ausführen können. Sie werden die Ausgabe später erkunden; vorerst ist es an der Zeit, zu dem Skript test überzugehen.

Das Skript test

Das Skript test ist eines dieser speziellen Skripte, die das Schlüsselwort run nicht erfordern, aber auch dann funktionieren, wenn Sie es einschließen. Dieses Skript startet einen Testläufer namens Jest. Der Testläufer durchsucht Ihr Projekt nach Dateien mit der Erweiterung .spec.js oder .test.js. und führt diese Dateien dann aus.

Zur Ausführung des Skripts test geben Sie den folgenden Befehl ein:

npm test

Nach Ausführung dieses Skripts hat Ihr Terminal die Ausgabe der Testsuite, und die Terminal-Eingabeaufforderung verschwindet. Dies sollte ungefähr so aussehen:

Output
 PASS  src/App.test.js
  ✓ renders learn react link (67ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        4.204s
Ran all test suites.

Watch Usage
 › Press f to run only failed tests.
 › Press o to only run tests related to changed files.
 › Press q to quit watch mode.
 › Press p to filter by a filename regex pattern.
 › Press t to filter by a test name regex pattern.
 › Press Enter to trigger a test run.

Hier gibt es einige Dinge zu beachten. Erstens erkennt es, wie bereits erwähnt, automatisch alle Dateien mit Test-Erweiterungen einschließlich .test.js und .spec.js.  In diesem Fall gibt es nur eine Testsuite - d. h. nur eine Datei mit der Erweiterung .test.js - und diese Testsuite enthält nur einen Test. Jest kann Tests in Ihrer Code-Hierarchie erkennen, sodass Sie Tests in einem Verzeichnis verschachteln können und Jest wird sie finden.

Zweitens führt Jest Ihre Testsuite nicht einmal aus und beendet sich dann. Vielmehr wird es im Terminal weiter ausgeführt. Wenn Sie Änderungen im Quellcode vornehmen, führt es die Tests erneut aus.

Sie können auch einschränken, welche Tests Sie ausführen, indem Sie eine der Tastaturoptionen verwenden. Wenn Sie z. B. o eingeben, werden die Tests nur für Dateien ausgeführt, die sich geändert haben. Dies kann Ihnen viel Zeit sparen, wenn Ihre Testsuiten wachsen.

Schließlich können Sie den Testläufer durch Eingabe von q beenden. Tun Sie dies jetzt, um Ihre Eingabeaufforderung wiederherzustellen.

Das Skript eject

Das letzte Skript ist npm eject. Dieses Skript kopiert Ihre Abhängigkeiten und Konfigurationsdateien in Ihr Projekt, sodass Sie die volle Kontrolle über Ihren Code haben, das Projekt aber aus der integrierten Toolchain von Create React App auswerfen können. Sie werden dies jetzt nicht ausführen, denn wenn Sie dieses Skript einmal ausgeführt haben, können Sie diese Aktion nicht mehr rückgängig machen und Sie werden alle zukünftigen Aktualisierungen von Create React App verlieren.

Der Nutzen von Create React App besteht darin, dass Sie sich nicht um einen erheblichen Konfigurationsaufwand kümmern müssen. Die Erstellung moderner JavaScript-Anwendungen erfordert eine Menge an Werkzeugen, von Build-Systemen wie Webpack bis hin zu Kompilierungswerkzeugen wie Babel. Create React App übernimmt die gesamte Konfiguration für Sie, sodass ein Auswerfen bedeutet, dass Sie sich selbst um diese Komplexität kümmern müssen.

Der Nachteil von Create React App ist, dass Sie nicht in der Lage sein werden, das Projekt vollständig anzupassen. Für die meisten Projekte ist das kein Problem, aber wenn Sie jemals die Kontrolle über alle Aspekte des Build-Prozesses übernehmen wollen, müssen Sie den Code auswerfen. Wie bereits erwähnt, können Sie jedoch, sobald Sie den Code auswerfen, nicht mehr auf neue Versionen von Create React App aktualisieren, und Sie müssen alle Verbesserungen selbst manuell hinzufügen.

Zu diesem Zeitpunkt haben Sie Skripte ausgeführt, um Ihren Code zu erstellen und zu testen. Im nächsten Schritt starten Sie das Projekt auf einem Live-Server.

Schritt 3 – Starten des Servers

In diesem Schritt werden Sie einen lokalen Server initialisieren und das Projekt in Ihrem Browser ausführen.

Sie starten Ihr Projekt mit einem anderen npm-Skript. Wie npm test benötigt auch dieses Skript den Befehl run nicht. Wenn Sie das Skript ausführen, starten Sie einen lokalen Server, führen den Projektcode aus, starten einen Watcher, der auf Codeänderungen wartet, und öffnen das Projekt in einem Webbrowser.

Starten Sie das Projekt, indem Sie den folgenden Befehl im Stammverzeichnis eingeben. Für dieses Tutorial ist das Stammverzeichnis Ihres Projekts das Verzeichnis digital-ocean-tutorial​​​. Achten Sie darauf, dieses in einem separaten Terminal oder einer Registerkarte zu öffnen, denn dieses Skript läuft so lange weiter, wie Sie es zulassen:

npm start

Vor dem Start des Servers sehen Sie für einen kurzen Moment einen Platzhaltertext, der diese Ausgabe liefert:

Output
Compiled successfully!

You can now view digital-ocean-tutorial in the browser.

  http://localhost:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

Wenn Sie das Skript lokal ausführen, wird es das Projekt in Ihrem Browserfenster öffnen und den Fokus vom Terminal in den Browser verlagern.

Wenn das nicht geschieht, können Sie http://localhost:3000/ besuchen, um die Seite in Funktion zu sehen. Sollte bereits ein anderer Server auf Port 3000 laufen, ist das in Ordnung. Create React App wird den nächsten verfügbaren Port erkennen und den Server darüber betreiben. Mit anderen Worten, wenn Sie bereits ein Projekt auf Port 3000 ausführen, wird dieses neue Projekt auf Port 3001 beginnen.

Wenn Sie dies von einem Remote-Server aus ausführen, können Sie Ihre Seite ohne zusätzliche Konfiguration immer noch sehen. Die Adresse wird http://your_server_ip:3000​​​​​​ lauten. Wenn Sie eine Firewall konfiguriert haben, müssen Sie den Port auf Ihrem Remote-Server öffnen.

Im Browser sehen Sie das folgende React-Vorlagenprojekt:

Solange das Skript ausgeführt wird, haben Sie einen aktiven lokalen Server.  Um das Skript zu stoppen, schließen Sie entweder das Terminalfenster oder die Registerkarte oder geben Sie STRG+C oder ⌘-+c in das Terminalfenster oder die Registerkarte ein, in dem/der Ihr Skript ausgeführt wird.

Zu diesem Zeitpunkt haben Sie den Server gestartet und führen Ihren ersten React-Code aus. Bevor Sie jedoch Änderungen am JavaScript-Code von React vornehmen, werden Sie sehen, wie React die Seite überhaupt rendert.

Schritt 4 – Modifizieren der Homepage

In diesem Schritt ändern Sie Code im Verzeichnis public/. Das Verzeichnis public enthält Ihre Basis-HTML-Seite. Dies ist die Seite, die als Stammseite für Ihr Projekt dient. Sie werden dieses Verzeichnis in Zukunft nur noch selten bearbeiten, aber es ist die Basis, von der aus das Projekt startet und ein wesentlicher Teil eines React-Projekts.

Wenn Sie Ihren Server abgebrochen haben, starten Sie ihn mit npm start neu und öffnen Sie dann public/ in Ihrem bevorzugten Texteditor in einem neuen Terminalfenster:

nano public/

Alternativ können Sie die Dateien mit dem Befehl ls auflisten:

ls public/

Sie sehen dann eine Liste von Dateien wie diese:

Output
favicon.ico
logo192.png
manifest.json
index.html
logo512.png
robots.txt

favicon.ico, logo192.png und logo512.png sind Symbole, die ein Benutzer entweder in der Registerkarte seines Browsers oder auf seinem Handy sehen würde. Der Browser wird die Icons in der richtigen Größe auswählen. Eventuell werden Sie diese durch Symbole ersetzen wollen, die für Ihr Projekt besser geeignet sind. Momentan können Sie sie so belassen.

Die Datei manifest.json ist ein strukturierter Satz von Metadaten, die Ihr Projekt beschreiben. Unter anderem ist darin aufgeführt, welches Symbol für verschiedene Größenoptionen verwendet wird.

Die Datei robots.txt ist eine Information für Web-Crawler. Sie teilt den Crawlern mit, welche Seiten sie indizieren dürfen und welche nicht. Sie müssen keine der beiden Dateien ändern, es sei denn, es gibt einen zwingenden Grund, dies zu tun. Wenn Sie beispielsweise einigen Benutzern eine URL zu speziellen Inhalten geben möchten, die nicht leicht zugänglich sein sollen, können Sie diese in die Datei robots.txt einfügen, und sie wird weiterhin öffentlich verfügbar sein, aber nicht von Suchmaschinen indiziert.

Die Datei index.html ist die Stammdatei Ihrer Anwendung. Dies ist die Datei, die der Server liest, und die Datei, die Ihr Browser anzeigt. Öffnen Sie sie in Ihrem Texteditor und sehen Sie sie sich an.

Wenn Sie von der Befehlszeile aus arbeiten, können Sie sie mit dem folgenden Befehl öffnen:

nano public/index.html

Sie werden Folgendes sehen:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

Die Datei ist ziemlich kurz. In der <body> gibt es keine Images und keine Worte. Das liegt daran, dass React die gesamte HTML-Struktur selbst aufbaut und sie mit JavaScript injiziert. Aber React muss wissen, wo der Code eingefügt werden muss, und das ist die Aufgabe von index.html.

Ändern Sie in Ihrem Texteditor die Markierung <title> von React App in Sandbox:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    ...
    <title>Sandbox</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

Speichern und schließen Sie Ihren Texteditor. Überprüfen Sie Ihren Browser. Der Titel ist der Name, der sich auf der Registerkarte des Browsers befindet. Er wird automatisch aktualisiert.  Falls nicht, aktualisieren Sie die Seite und beachten Sie die Änderung.

Gehen Sie nun zu Ihrem Texteditor zurück. Jedes React-Projekt startet von einem Stammelement. Auf einer Seite können mehrere Stammelemente vorhanden sein, aber es muss mindestens eines vorhanden sein. So weiß React, wo der generierte HTML-Code abgelegt werden soll. Finden Sie das Element  <div id="root">. Dies ist das div, das React für alle zukünftigen Aktualisierungen verwenden wird. Ändern Sie die id von root in base:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    ...
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="base"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

Speichern Sie die Änderungen.

Sie werden in Ihrem Browser einen Fehler sehen:

React suchte nach einem Element mit einer id von root.  Da dies nicht mehr vorhanden ist, kann React das Projekt nicht starten.

Ändern Sie den Namen von base wieder zu root:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    ...
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

Speichern und schließen Sie index.html.

An diesem Punkt haben Sie den Server gestartet und eine kleine Änderung an der Root-HTML-Seite vorgenommen. Sie haben bisher noch keinen JavaScript-Code geändert. Im nächsten Abschnitt werden Sie den JavaScript-Code von React aktualisieren.

Schritt 5 – Modifizieren des Überschriften-Tags und des Stylings

In diesem Schritt werden Sie Ihre erste Änderung an einer React-Komponente im Verzeichnis src/ vornehmen. Sie führen eine kleine Änderung an der CSS und dem JavaScript-Code durch, der in Ihrem Browser mit Hilfe des eingebauten Hot-Reloadings automatisch aktualisiert wird.

Wenn Sie den Server angehalten haben, starten Sie ihn mit npm start neu. Nehmen Sie sich nun etwas Zeit, um die Teile des Verzeichnisses src/ zu sehen. Sie können entweder das gesamte Verzeichnis in Ihrem bevorzugten Texteditor öffnen oder Sie können das Projekt mit dem folgenden Befehl in einem Terminal auflisten:

ls src/

Sie werden die folgenden Dateien in Ihrem Terminal oder Texteditor sehen.

Output
App.css
App.js
App.test.js
index.css
index.js
logo.svg
serviceWorker.js
setupTests.js

Gehen wir diese Dateien der Reihe nach durch.

Sie werden anfangs nicht viel Zeit mit der Datei serviceWorker.js verbringen, doch sie kann wichtig sein, wenn Sie mit der Erstellung von progressiven Web-Anwendungen beginnen. Der Service Worker kann viele Dinge tun, einschließlich Push-Benachrichtigungen und Offline-Caching. Momentan lassen wir ihn jedoch in Ruhe.

Die nächsten Dateien, die Sie sich ansehen sollten, sind setupTests.js und App.test.js. Diese werden für Testdateien verwendet. Wenn Sie in Schritt 2 npm test ausgeführt haben, hat das Skript diese Dateien tatsächlich ausgeführt. Die Datei setupTests.js ist kurz und enthält nur einige benutzerdefinierte expect-Methoden. Sie werden in zukünftigen Tutorials in dieser Reihe mehr darüber erfahren.

Öffnen Sie App.test.js:

nano src/App.test.js

Wenn Sie sie öffnen, sehen Sie einen Basistest:

import React from 'react';
import { render } from '@testing-library/react';
import App from './App';

test('renders learn react link', () => {
  const { getByText } = render(<App />);
  const linkElement = getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});

Der Test sucht nach dem Vorhandensein der Phrase learn react im Dokument. Wenn Sie zu dem Browser zurückgehen, in dem Ihr Projekt ausgeführt wird, sehen Sie die Phrase auf der Seite. Das Testen mit React unterscheidet sich von den meisten Unit-Tests. Da Komponenten visuelle Informationen enthalten können, wie z. B. Markup, zusammen mit Logik zur Manipulation von Daten, funktionieren traditionelle Unit-Tests nicht so leicht. Die Tests mit React sind eher eine Form von Funktions- oder Integrationstests.

Als Nächstes sehen Sie einige Styling-Dateien: App.css, index.css und logo.svg. Es gibt mehrere Möglichkeiten, mit Styling in React zu arbeiten, aber die einfachste ist das Schreiben von einfachem CSS, da dies keine zusätzliche Konfiguration erfordert.

Es gibt mehrere CSS-Dateien, da Sie die Stile in eine Komponente importieren können, als wären sie eine weitere JavaScript-Datei. Da Sie die Möglichkeit haben, CSS direkt in eine Komponente zu importieren, können Sie das CSS auch aufteilen, um es nur auf eine einzelne Komponente anzuwenden. Was Sie tun, ist, Bedenken zu trennen. Sie halten nicht das gesamte CSS vom JavaScript getrennt.  Stattdessen halten Sie alle verwandten CSS, JavaScript, Markups und Bilder zusammen gruppiert.

Öffnen Sie App.css in Ihrem Texteditor. Wenn Sie von der Befehlszeile aus arbeiten, können Sie sie mit dem folgenden Befehl öffnen:

nano src/App.css

Dies ist der Code, den Sie sehen werden:

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

Dies ist eine Standard-CSS-Datei ohne spezielle CSS-Präprozessoren. Wenn Sie möchten, können Sie sie später hinzufügen, aber anfangs haben Sie nur einfaches CSS. Create React App versucht, unvoreingenommen zu sein und dennoch eine sofort einsatzbereite Umgebung zu bieten.

Zurück zu App.css. Einer der Vorteile von Create React App ist, dass es alle Dateien überwacht. Wenn Sie also eine Änderung vornehmen, sehen Sie sie in Ihrem Browser, ohne sie neu laden zu müssen.

Um dies in Aktion zu sehen, nehmen Sie eine kleine Änderung an der background-color in App.css vor. Ändern Sie sie von #282c34 zu blue und speichern Sie dann die Datei. Der endgültige Style sieht ungefähr so aus:

.App {
  text-align: center;
}
...
.App-header {
  background-color: blue
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}
...

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

Schauen Sie sich Ihren Browser an. So hat er vorher ausgesehen:

So sieht er nach der Änderung aus:

Fahren Sie fort und ändern Sie die Hintergrundfarbe wieder in #282c34.

.App {
  text-align: center;

...

.App-header {
  background-color: #282c34
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

...

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

Speichern und schließen Sie die Datei.

Sie haben eine kleine CSS-Änderung vorgenommen. Jetzt ist es an der Zeit, Änderungen am React JavaScript-Code vorzunehmen. Beginnen Sie mit dem Öffnen von index.js.

nano src/index.js

Sie werden Folgendes sehen:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

Ganz oben importieren Sie React, ReactDOM, index.css, App und serviceWorker. Durch das Importieren von React ziehen Sie tatsächlich Code ein, um JSX in JavaScript zu konvertieren. JSX sind die HTML-ähnlichen Elemente. Beachten Sie beispielsweise, dass Sie, wenn Sie App verwenden, es wie ein HTML-Element <App /> behandeln. Sie werden dies in zukünftigen Tutorials in dieser Reihe genauer untersuchen.

ReactDOM ist der Code, der Ihren React-Code mit den Basiselementen verbindet, wie beispielsweise die Seite index.html, die Sie in public/ gesehen haben. Sehen Sie sich die folgende hervorgehobene Zeile an:

...
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
...
serviceWorker.unregister();

Dieser Code weist React an, ein Element mit einer id von root zu finden und den React-Code dort zu injizieren. <App/> ist Ihr Stammelement und von dort aus verzweigt sich alles. Dies ist der Startpunkt für allen zukünftigen React-Code.

Am Anfang der Datei sehen Sie einige Importe. Sie importieren index.css, machen aber eigentlich nichts damit. Indem Sie sie importieren, weisen Sie Webpack über die React-Skripte an, diesen CSS-Code in das endgültige kompilierte Bundle aufzunehmen.  Wenn Sie sie nicht importieren, wird es nicht angezeigt.

Verlassen Sie src/index.js.

Zu diesem Zeitpunkt haben Sie noch nicht gesehen, was Sie in Ihrem Browser sehen. Um dies zu sehen, öffnen Sie App.js:

nano src/App.js

Der Code in dieser Datei wird wie eine Reihe regulärer HTML-Elemente aussehen. Sie werden Folgendes sehen:

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Ändern Sie den Inhalt des Tags <p> von Edit <code>src/App.js</code> and save to reload.​​​​​ zu Hello, world und speichern Sie Ihre Änderungen.

...

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
            Hello, world
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}
...

Gehen Sie zu Ihrem Browser und Sie werden die Änderung sehen:

Sie haben nun Ihre erste Aktualisierung an einer React-Komponente vorgenommen.

Bevor Sie gehen, beachten Sie noch ein paar Dinge. In dieser Komponente importieren Sie die Datei logo.svg und weisen sie einer Variablen zu. Dann fügen Sie im Element <img> diesen Code als src hinzu.

Hier sind einige Dinge zu beachten. Sehen Sie sich das Element img an:

...
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
            Hello, world
        </p>
...

Beachten Sie, wie Sie das Logo in geschweifte Klammern übergeben. Sie müssen immer dann geschweifte Klammern verwenden, wenn Sie Attribute übergeben, die keine Zeichenketten oder Zahlen sind. React behandelt diese als JavaScript anstelle von Zeichenketten. In diesem Fall importieren Sie das Bild nicht wirklich; stattdessen referenzieren Sie das Bild. Wenn Webpack das Projekt erstellt, wird es das Bild handhaben und die Quelle an die entsprechende Stelle setzen.

Beenden Sie den Texteditor.

Wenn Sie sich die DOM-Elemente in Ihrem Browser ansehen, sehen Sie, dass es einen Pfad hinzufügt. Wenn Sie Chrome verwenden, können Sie das Element inspizieren, indem Sie mit der rechten Maustaste auf das Element klicken und Inspect wählen.

So würde es im Browser aussehen:

Das DOM hat diese Zeile:

<img src="/static/media/logo.5d5d9eef.svg" class="App-logo" alt="logo">

Ihr Code wird etwas anders sein, da das Logo einen anderen Namen haben wird. Webpack möchte sicherstellen, dass der Bildpfad eindeutig ist. Selbst wenn Sie also Bilder mit dem gleichen Namen importieren, werden diese mit unterschiedlichen Pfaden gespeichert.

Zu diesem Zeitpunkt haben Sie eine kleine Änderung am React JavaScript-Code vorgenommen. Im nächsten Schritt verwenden Sie den Befehl build, um den Code in eine kleine Datei zu verkleinern, die auf einem Server bereitgestellt werden kann.

Schritt 6 – Erstellen des Projekts

In diesem Schritt stellen Sie den Code zu einem Bundle zusammen, das auf externen Servern bereitgestellt werden kann.

Gehen Sie zurück zu Ihrem Terminal und erstellen Sie das Projekt. Sie haben diesen Befehl schon einmal ausgeführt, aber zur Erinnerung: Dieser Befehl wird das Skript build ausführen. Es wird ein neues Verzeichnis mit den kombinierten und verkleinerten Dateien erstellen. Um den Build auszuführen, führen Sie den folgenden Befehl im Stammverzeichnis Ihres Projekts aus:

npm run build

Es wird eine Verzögerung beim Kompilieren des Codes geben, und wenn er fertig ist, haben Sie ein neues Verzeichnis namens build/.

Öffnen Sie build/index.html in einem Texteditor.

nano build/index.html

Sie werden etwas wie das hier sehen:

<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>React App</title><link href="/static/css/main.d1b05096.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(e){function r(r){for(var n,a,p=r[0],l=r[1],c=r[2],i=0,s=[];i<p.length;i++)a=p[i],Object.prototype.hasOwnProperty.call(o,a)&&o[a]&&s.push(o[a][0]),o[a]=0;for(n in l)Object.prototype.hasOwnProperty.call(l,n)&&(e[n]=l[n]);for(f&&f(r);s.length;)s.shift()();return u.push.apply(u,c||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,p=1;p<t.length;p++){var l=t[p];0!==o[l]&&(n=!1)}n&&(u.splice(r--,1),e=a(a.s=t[0]))}return e}var n={},o={1:0},u=[];function a(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,a),t.l=!0,t.exports}a.m=e,a.c=n,a.d=function(e,r,t){a.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,r){if(1&r&&(e=a(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(a.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)a.d(t,n,function(r){return e[r]}.bind(null,n));return t},a.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(r,"a",r),r},a.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},a.p="/";var p=this["webpackJsonpdo-create-react-app"]=this["webpackJsonpdo-create-react-app"]||[],l=p.push.bind(p);p.push=r,p=p.slice();for(var c=0;c<p.length;c++)r(p[c]);var f=l;t()}([])</script><script src="/static/js/2.c0be6967.chunk.js"></script><script src="/static/js/main.bac2dbd2.chunk.js"></script></body></html>

Das Verzeichnis build nimmt Ihren gesamten Code und kompiliert und minimiert ihn bis zum kleinsten nutzbaren Zustand. Es spielt keine Rolle, ob ein Mensch ihn lesen kann, da es sich hierbei nicht um einen öffentlich zugänglichen Teil des Codes handelt. Durch eine solche Minimierung nimmt der Code weniger Platz in Anspruch und kann trotzdem funktionieren. Im Gegensatz zu einigen Sprachen wie Python, ändert der Leerraum nicht, wie der Computer den Code interpretiert.

Zusammenfassung

In diesem Tutorial haben Sie Ihre erste React-Anwendung erstellt und Ihr Projekt mit Hilfe von JavaScript-Build-Tools konfiguriert, ohne auf die technischen Details eingehen zu müssen.  Das ist der Nutzen von Create React App: Sie müssen nicht alles wissen, um anzufangen. Es ermöglicht Ihnen, die komplizierten Build-Schritte zu ignorieren, sodass Sie sich ausschließlich auf den React-Code konzentrieren können.

Sie haben nun die Befehle zum Starten, Testen und Erstellen eines Projekts gelernt. Sie werden diese Befehle regelmäßig verwenden. Daher sollten Sie sie für zukünftige Tutorials notieren. Am wichtigsten ist, dass Sie Ihre erste React-Komponente aktualisiert haben.

Wenn Sie React in Aktion sehen möchten, probieren Sie unser Tutorial Anzeigen von Daten von der DigitalOcean-API mit React.