Erstellen von React-Elementen mit JSX

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

Einführung

In diesem Tutorial lernen Sie, wie Sie Elemente mit JSX beschreiben. JSX ist eine Abstraktion, die es Ihnen erlaubt, eine HTML-ähnliche Syntax in Ihren JavaScript-Code zu schreiben und ermöglicht es Ihnen, React-Komponenten zu erstellen, die wie Standard-HTML-Markup aussehen. JSX ist die Vorlagensprache der React-Elemente und bildet daher die Grundlage für jedes Markup, das React in Ihrer Anwendung rendert.

Da Sie mit JSX auch JavaScript in Ihr Markup schreiben können, können Sie die Vorteile von JavaScript-Funktionen und -Methoden nutzen, einschließlich Array-Mapping und Kurzschlussevaluierung für Bedingungen.

Im Rahmen des Tutorials werden Sie Klick-Ereignisse auf Schaltflächen direkt im Markup erfassen und Instanzen abfangen, wenn die Syntax nicht exakt mit Standard-HTML übereinstimmt, wie zum Beispiel bei CSS-Klassen. Am Ende dieses Tutorials haben Sie eine funktionierende Anwendung, die eine Vielzahl von JSX-Funktionen verwendet, um eine Liste von Elementen anzuzeigen, die über einen integrierten Klick-Listener verfügen. Dies ist ein übliches Muster in React-Anwendungen, das Sie während des Erlernens des Frameworks häufig verwenden werden. Sie werden auch in der Lage sein, Standard-HTML-Elemente mit JavaScript zu mischen und dabei sehen, wie React Ihnen ermöglicht, kleine, wiederverwendbare Code-Stücke zu erstellen.

Voraussetzungen

• Sie benötigen eine Entwicklungsumgebung, die Node.js ausführt; dieses Tutorial wurde mit der Node.js-Version 10.19.0 und der npm-Version 6.13.4 getestet. Um dies unter MacOS oder Ubuntu 18.04 zu installieren, folgen Sie den Schritten in Installieren von Node.js und Erstellen einer lokalen Entwicklungsumgebung unter MacOS oder dem Abschnitt Installieren unter Verwendung eines PPA von Installieren von Node.js unter Ubuntu 18.04.

• Sie müssen Anwendungen mit Create React App erstellen können. Anweisungen zur Installation einer Anwendung mit Create React App finden Sie unter Einrichten eines React-Projekts mit der Create React App.

• Sie benötigen auch Grundkenntnisse über JavaScript, die Sie in Codieren in JavaScript finden, sowie Grundkenntnisse über HTML und CSS. Eine gute Ressource für HTML und CSS ist das Mozilla Developer Network.

Schritt 1 — Hinzufügen eines Markups zu einem React-Element

Wie bereits erwähnt, verfügt React über eine spezielle Markup-Sprache namens JSX. Diese vermischt HTML- und JavaScript-Syntax und sieht in etwa so aus:

<div>
  {inventory.filter(item => item.available).map(item => (
    <Card>
        <div className="title"}>{item.name}</div>
        <div className="price">{item.price}</div>
    </Card>
    ))
  }
</div>

Sie werden einige JavaScript-Funktionalität wie .filter und .map sowie Standard-HTML wie <div> erkennen. Es gibt aber auch andere Teile, die wie HTML und JavaScript aussehen, wie <Card> und className.

Dabei handelt es sich um JSX, die spezielle Markup-Sprache, die React-Komponenten den Anschein von HTML mit der Leistungsfähigkeit von JavaScript verleiht.

In diesem Schritt lernen Sie, grundlegende HTML-ähnliche Syntax zu einem bestehenden React-Element hinzuzufügen. Zu Beginn fügen Sie Standard-HTML-Elemente in eine JavaScript-Funktion ein und sehen dann den kompilierten Code in einem Browser. Außerdem gruppieren Sie Elemente, damit React diese mit minimalem Markup kompilieren kann und dadurch eine klare HTML-Ausgabe hinterlässt.

Beginnen Sie mit der Erstellung eines neuen Projekts. Führen Sie auf Ihrer Befehlszeile das folgende Skript aus, um ein neues Projekt mit create-react-app zu installieren:

npx create-react-app jsx-tutorial

Nachdem das Projekt erstellt ist, wechseln Sie in das Verzeichnis:

cd jsx-tutorial

Starten Sie das Projekt in einer neuen Terminal-Registerkarte oder einem -fenster mit dem Create React App start-Skript. Der Browser aktualisiert Änderungen automatisch; lassen Sie also dieses Skript während der gesamten Dauer Ihrer Arbeit laufen:

npm start

Sie erhalten einen funktionierenden lokalen Server. Falls sich das Projekt nicht in einem Browserfenster geöffnet hat, finden Sie es unter http://localhost:3000/. Wenn Sie dies von einem Remote-Server aus ausführen, ist die Adresse http://your_IP_address:3000.

Ihr Browser wird mit einer React-Anwendung geladen, die als Teil von Create React App enthalten ist.

Sie werden ein vollständig neues Set von benutzerdefinierten Komponenten erstellen, sodass Sie zunächst etwas Standardcode löschen müssen, um ein leeres Projekt zu erhalten. Zuerst öffnen Sie App.js in einem Texteditor. Das ist die Stammkomponente, die in der Seite injiziert wird. Alle Komponenten beginnen von hier.

Gehen Sie in einem neuen Terminal in den Projektordner und öffnen Sie src/App.js mit dem folgenden Befehl:

nano src/App.js

Sie sehen eine Datei wie diese:

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;

Löschen Sie nun die Zeile import logo from './logo.svg sowie alles nach der return-Anweisung in der Funktion. Ändern Sie diese zu return null. Der endgültige Code sieht so aus:

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

function App() {
  return null;
}

export default App;

Speichern und schließen Sie den Texteditor.

Abschließend löschen Sie das Logo. Geben Sie im Terminalfenster den folgenden Befehl ein:

rm src/logo.svg

Sie werden diese SVG-Datei nicht in Ihrer Anwendung verwenden und Sie sollten unbenutzte Dateien entfernen, während Sie arbeiten. So wird Ihr Code langfristig besser organisiert.

Nachdem diese Teile Ihres Projekts nun entfernt sind, können Sie die Facetten von JSX erkunden. Diese Markup-Sprache wird von React kompiliert und wird schließlich zu dem HTML, das Sie auf einer Webseite sehen. Ohne zu sehr in die Einzelheiten zu gehen, nimmt React die JSX und erstellt ein Modell Ihrer zukünftigen Seite sowie anschließend die erforderlichen Elemente, die dann in Ihre Seite eingefügt werden.

Das bedeutet, dass Sie etwas schreiben können, das wie HTML aussieht, und erwarten können, dass das gerenderte HTML ähnlich sein wird. Es gibt jedoch einige Fallstricke.

Wenn Sie sich zunächst die Registerkarte oder das Fenster ansehen, auf dem Ihr Server läuft, sehen Sie Folgendes:

Output
...
./src/App.js
  Line 1:8:  'React' is defined but never used  no-unused-vars
...

Das ist der Linter, der Ihnen sagt, dass Sie den importierten React-Code nicht verwenden. Wenn Sie die Zeile import React from 'react' in Ihren Code einfügen, importieren Sie JavaScript-Code, der die JSX in React-Code konvertiert. Wenn keine JSX vorhanden ist, ist das Importieren nicht erforderlich.

Wir ändern dies, indem wir einen kleinen Teil JSX einfügen. Beginnen Sie, indem Sie null durch das Beispiel Hello, World ersetzen:

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

function App() {
  return <h1>Hello, World</h1>;
}

export default App;

Speichern Sie die Datei. Wenn Sie sich das Terminal mit dem laufenden Server ansehen, ist die Warnmeldung verschwunden. Wenn Sie Ihren Browser besuchen, sehen Sie die Nachricht als h1-Element.

Fügen Sie als Nächstes unter dem Tag <h1> ein Absatz-Tag mit der Zeichenfolge I am writing JSX ein. Der Code sieht dann so aus:

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

function App() {
  return(
    <h1>Hello, World</h1>
    <p>I am writing JSX</p>
  )
}

export default App;

Da JSX mehrere Zeilen umfasst, müssen Sie den Ausdruck in Klammern setzten.

Speichern Sie die Datei. Wenn Sie dies tun, sehen Sie einen Fehler in dem Terminal, auf dem Ihr Server läuft:

Output
./src/App.js
  Line 7:5:  Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?

   5 |   return(
   6 |     <h1>Hello, World</h1>
>  7 |     <p>I am writing JSX</p>
     |     ^
   8 |   )
   9 | }
  10 |

Wenn Sie JSX von einer Funktion oder Anweisung zurückgeben, müssen Sie ein einzelnes Element zurückgeben. Dieses Element kann verschachtelte Unterelemente haben, aber es muss ein einzelnes Element der obersten Ebene vorhanden sein. In diesem Fall geben Sie zwei Elemente zurück.

Die Lösung ist eine kleine Codeänderung. Umgeben Sie den Code mit einem leeren Tag. Ein leeres Tag ist ein HTML-Element ohne Wörter. Es sieht so aus: <></>.

Gehen Sie zu ./src/App.js in Ihrem Editor zurück und fügen Sie das leere Tag ein:

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

function App() {
  return(
    <>
      <h1>Hello, World</h1>
      <p>I am writing JSX</p>
    </>
  )
}

export default App;

Das leere Tag erstellt ein einzelnes Element, aber wenn der Code kompiliert wird, wird es nicht in das endgültige Markup eingefügt. Dadurch wird Ihr Code sauber gehalten und dennoch ein einzelnes Element an React gegeben.

Speichern Sie den Code und schließen Sie die Datei. Ihr Browser aktualisiert sich und zeigt die aktualisierte Seite mit dem Absatz-Element an. Zusätzlich werden die leeren Tags bei der Konvertierung des Codes ausgelassen:

Sie haben nun einige grundlegende JSX in Ihre Komponente eingefügt und gelernt, wie die gesamte JSX in einer einzelnen Komponente geschachtelt werden muss. Im nächsten Schritt geben Sie Ihre Komponente ein Styling.

Schritt 2 — Hinzufügen eines Stylings zu einem Element mit Attributen

In diesem Schritt stylen Sie die Elemente in Ihrer Komponente, um zu lernen, wie HTML-Attribute mit JSX arbeiten. Es gibt zahlreiche Styling-Optionen in React. Einige von ihnen erfordern das Schreiben von CSS in Javascript, andere verwenden Präprozessoren. In diesem Tutorial arbeiten Sie mit importierten CSS und CSS-Klassen.

Sie haben nun Ihren Code und können diesem nun ein Styling hinzufügen. Öffnen Sie App.css in Ihrem Texteditor:

nano src/App.css

Da Sie mit neuer JSX beginnen, bezieht sich das aktuelle CSS auf Elemente, die nicht mehr existieren. Da Sie kein CSS benötigen, können Sie es löschen.

Nach der Löschung des Codes haben Sie eine leere Datei.

Als Nächstes fügen Sie ein Styling hinzu, um den Text zu zentrieren. Fügen Sie den folgenden Code in src/App.css ein:

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

In diesem Codeblock haben Sie einen CSS-Klassenselektor namens .container erstellt und dazu verwendet, den Inhalt mit display:flex zu zentrieren.

Speichern Sie die Datei und schließen Sie sie. Der Browser wird aktualisiert, aber es wird sich nichts ändern. Bevor Sie die Änderung sehen können, müssen Sie die CSS-Klasse zu Ihrer React-Komponente hinzufügen. Öffnen Sie den JavaScript-Code der Komponente:

nano src/App.js

Der CSS-Code wurde bereits mit der Zeile import './App.css' importiert. Das bedeutet, dass webpack den Code einzieht, um ein endgültiges Stylesheet zu erstellen, aber um das CSS auf Ihre Elemente anzuwenden, müssen Sie die Klassen hinzufügen.

Ändern Sie zuerst in Ihrem Texteditor die leeren Tags, <>, in <div>.

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

function App() {
  return(
    <div>
      <h1>Hello, World</h1>
      <p>I am writing JSX</p>
    </div>
  )
}

export default App;

In diesem Code haben Sie die leeren Tags — <> — mit div-Tags ersetzt. Leere Tags sind nützlich, um Ihren Code zu gruppieren, ohne zusätzliche Tags einzufügen, aber hier müssen Sie ein div verwenden, da leere Tags keine HTML-Attribute akzeptieren.

Als Nächstes müssen Sie den Klassennamen hinzufügen. Hier beginnt JSX, von HTML abzuweichen. Wenn Sie eine Klasse zu einem gängigen HTML-Element hinzufügen wollten, würden Sie das so tun:

<div class="container">

Da JSX jedoch JavaScript ist, hat es einige Beschränkungen. Eine der Beschränkungen besteht darin, dass JavaScript reservierte Schlüsselwörter hat. Das bedeutet, dass Sie bestimmte Wörter in keinem JavaScript-Code verwenden können. Sie können zum Beispiel keine Variable mit der Bezeichnung null erstellen, da dieses Wort bereits reserviert ist.

Eines der reservierten Wörter ist class. React umgeht dieses reservierte Wort, indem es leicht geändert wird. Anstelle des Attributs class fügen Sie das Attribut className hinzu. Wenn ein Attribut nicht wie erwartet funktioniert, können Sie generell versuchen, die Version mit einer Binnenmajuskel hinzufügen. Ein weiteres Attribut, das leicht abweicht, ist das Attribut for, das Sie für Labels verwenden würden. Es gibt einige weitere Fälle, aber glücklicherweise ist die Liste ziemlich kurz.

Nachdem Sie nun wissen, wie das Attribut class in React verwendet wird, können Sie Ihren Code aktualisieren, um das Styling einzubeziehen. Fügen Sie in Ihrem Texteditor className="container" in Ihr öffnendes div-Tag ein:

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

function App() {
  return(
    <div className="container">
      <h1>Hello, World</h1>
      <p>I am writing JSX</p>
    </div>
  )
}

export default App;

Speichern Sie die Datei. Wenn Sie dies tun, wird die Seite neu geladen und der Inhalt wird zentriert.

.

Das Attribut className ist in React einzigartig. Sie können die meisten HTML-Attribute ohne Änderung in JSX einfügen. Gehen Sie als Beispiel zurück in Ihren Texteditor und fügen Sie Ihrem <h1>-Element eine id von greeting hinzu. Es wird aussehen wie Standard-HTML:

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

function App() {
  return(
    <div className="container">
      <h1 id="greeting">Hello, World</h1>
      <p>I am writing JSX</p>
    </div>
  )
}

export default App;

Speichern Sie die Seite und laden Sie den Browser neu. Sie wird gleich bleiben.

Bis hierher sieht JSX wie Standard-Markup aus. Aber der Vorteil von JSX ist, dass es, obwohl es wie HTML aussieht, die Leistungsfähigkeit von JavaScript hat. Das bedeutet, dass Sie Variablen zuweisen und in Ihren Attributen referenzieren können. Um ein Attribut zu referenzieren, umschließen Sie es mit geschweiften Klammern — {} — anstelle von Anführungszeichen.

Fügen Sie in Ihrem Texteditor die folgenden hervorgehobenen Zeilen ein, um ein Attribut zu referenzieren:

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

function App() {
  const greeting = "greeting";
  return(
    <div className="container">
     <h1 id={greeting}>Hello, World</h1>
      <p>I am writing JSX</p>
    </div>
  )
}

export default App;

In diesem Code haben Sie eine Variable über der return-Anweisung namens greeting mit dem Wert von "greeting" erstellt und dann die Variable im Attribut id Ihres <h1>-Tags referenziert.

Speichern und schließen Sie die Datei. Die Seite wird gleich sein, hat aber ein id-Tag.

Bisher haben Sie mit einigen wenigen Elementen einzeln gearbeitet, aber Sie können JSX auch verwenden, um viele HTML-Elemente zur Erstellung komplexer Seiten hinzuzufügen und zu verschachteln.

Um dies zu demonstrieren, erstellen Sie eine Seite mit einer Liste von Emojis. Diese Emojis werden von einem <button>-Element umgeben. Wenn Sie auf das Emoji klicken, erhalten Sie dessen CLDR-Kurznamen.

Zu Beginn müssen Sie einige weitere Elemente in die Seite einfügen. Öffnen Sie src/App.js in Ihrem Texteditor. Lassen Sie ihn während dieses Schritts geöffnet.

nano src/App.js

Fügen Sie zunächst eine Liste von Emojis hinzu, indem Sie die folgenden hervorgehobenen Zeilen einfügen:

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

function App() {
  const greeting = "greeting";
  return(
    <div className="container">
      <h1 id={greeting}>Hello, World</h1>
      <p>I am writing JSX</p>
      <ul>
        <li>
            <button>
              <span role="img" aria-label="grinning face" id="grinning face">😀</span>
            </button>
        </li>
        <li>
          <button>
              <span role="img" aria-label="party popper" id="party popper">🎉</span>
          </button>
        </li>
        <li>
          <button>
              <span role="img" aria-label="woman dancing" id="woman dancing">💃</span>
          </button>
        </li>
      </ul>
    </div>
  )
}

export default App;

Sie haben hier ein <ul>-Tag erstellt, um eine Liste von Emojis zu umfassen. Jedes Emoji ist in einem separaten <li>-Element und von einem <button>-Element umgeben. Im nächsten Schritt fügen Sie diesem Button ein Ereignis hinzu.

Zudem haben Sie das Emoji mit einem <span>-Tag umgeben, das einige weitere Attribute hat. Jedes span hat das Attribut role, das auf die Rolle img gesetzt ist. Dadurch wird barrierefreier Software signalisiert, dass sich das Element wie ein Bild verhält. Außerdem verfügt jedes <span> auch über ein aria-label und ein id-Attribut mit dem Namen des Emojis. Das aria-label sagt Besuchern mit Bildschirmlesern, was angezeigt wird. Beim Schreiben von Ereignissen im nächsten Schritt verwenden Sie die id.

Wenn Sie auf diese Weise Code schreiben, verwenden Sie semantische Elemente, die dazu beitragen, dass die Seite barrierefrei und verständlich für Bildschirmleser ist.

Speichern und schließen Sie die Datei. Ihr Browser wird aktualisiert und Sie sehen Folgendes:

Fügen Sie nun etwas Styling hinzu. Öffnen Sie den CSS-Code in Ihrem Texteditor:

nano src/App.css

Fügen Sie den folgenden hervorgehobenen Code hinzu, um den Standard-Hintergrund und die Ränder der Buttons zu entfernen und um die Schriftgröße zu erhöhen:

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

button {
    font-size: 2em;
    border: 0;
    padding: 0;
    background: none;
    cursor: pointer;
}

ul {
    display: flex;
    padding: 0;
}

li {
    margin: 0 20px;
    list-style: none;
    padding: 0;
}

In diesem Code haben Sie font-size, border und andere Parameter verwendet, um das Aussehen Ihrer Buttons anzupassen und die Schriftart zu ändern. Sie haben auch den Listenstil entfernt und display:flex in das <ul>-Element eingefügt, um eine horizontale Ausführung zu erhalten.

Speichern und schließen Sie die CSS-Datei. Ihr Browser wird aktualisiert und Sie sehen Folgendes:

Sie haben nun mit mehreren JSX-Elementen gearbeitet, die wie reguläres HTML aussehen. Sie haben Klassen, IDs und aria-Tags eingefügt sowie mit Daten als Zeichenfolgen und Variablen gearbeitet. React verwendet aber auch Attribute, um zu definieren, wie Ihre Elemente auf Benutzerereignisse reagieren sollen. Im nächsten Schritt beginnen Sie, die Seite interaktiver zu machen, indem Sie dem Button Ereignisse hinzufügen.

Schritt 3 — Hinzufügen von Ereignissen zu Elemente

In diesem Schritt fügen Sie mit speziellen Attributen Ereignisse zu Elementen hinzu und erfassen ein Klick-Ereignis auf einem Button-Element. Sie lernen, wie Sie Informationen von dem Ereignis erfassen, um eine andere Aktion zu senden oder andere Informationen im Rahmen der Datei zu verwenden.

Sie haben nun eine grundlegende Seite mit Informationen und können nun einige Ereignisse zu diesen hinzufügen. Es gibt zahlreiche Event-Handler, die Sie zu HTML-Elementen hinzufügen können. Mit React können Sie auf all diese zugreifen. Da Ihr JavaScript-Code mit Ihrem Markup gekoppelt ist, können Sie die Ereignisse schnell einfügen und gleichzeitig Ihren Code gut organisiert halten.

Zunächst fügen Sie den Event Handler onclick hinzu. Dadurch können Sie einen JavaScript-Code direkt in Ihr Element einfügen, anstatt einen Event-Listener anzufügen:

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

function App() {
  const greeting = "greeting";
  return(
    <div className="container">
      <h1 id={greeting}>Hello, World</h1>
      <p>I am writing JSX</p>
      <ul>
        <li>
          <button
            onClick={event => alert(event.target.id)}
          >
            <span role="img" aria-label="grinning face" id="grinning face">😀</span>
          </button>
        </li>
        <li>
          <button
            onClick={event => alert(event.target.id)}
          >
              <span role="img" aria-label="party popper" id="party popper">🎉</span>
          </button>
        </li>
        <li>
            <button
              onClick={event => alert(event.target.id)}
            >
              <span role="img" aria-label="woman dancing" id="woman dancing">💃</span>
          </button>
        </li>
      </ul>
    </div>
  )
}

export default App;

Da es sich um JSX handelt, haben Sie onclick mit einer Binnenmajuskel versehen, d. h. Sie haben es als onClick eingefügt. Das Attribut onClick verwendet eine anonyme Funktion, um Informationen über das Element abzurufen, das angeklickt wurde.

Sie haben eine anonyme Pfeilfunktion hinzugefügt, die das Ereignis von dem angeklickten Button abruft. Das Ereignis wird als Ziel das <span>-Element haben. Die Information, die Sie benötigen, ist im id-Attribut, auf das Sie mit event.target.id zugreifen können. Sie können den Hinweis mit der Funktion alert() auslösen.

Speichern Sie die Datei. Klicken Sie in Ihrem Browser auf ein Emoji und Sie erhalten einen Hinweis mit dem Namen.

Sie können Wiederholungen reduzieren, indem Sie die Funktion einmal deklarieren und sie an jede onClick-Aktion übergeben. Da die Funktion nur auf Ein- und Ausgaben angewiesen ist, können Sie sie außerhalb der Hauptkomponentenfunktion deklarieren. Mit anderen Worten, die Funktion muss nicht auf den Anwendungsbereich der Komponente zugreifen. Der Vorteil einer Auseinanderhaltung besteht darin, dass Ihre Komponentenfunktion etwas kürzer ist und Sie die Funktion später in eine separate Datei verschieben können, wenn Sie möchten.

Erstellen Sie in Ihrem Texteditor eine Funktion namens displayEmojiName, die das Ereignis nimmt und die Funktion alert() mit einer ID aufruft. Dann übergeben Sie die Funktion an jedes onClick-Attribut:

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

const displayEmojiName = event => alert(event.target.id);

function App() {
  const greeting = "greeting";
  return(
    <div className="container">
      <h1 id={greeting}>Hello, World</h1>
      <p>I am writing JSX</p>
      <ul>
        <li>
          <button
            onClick={displayEmojiName}
          >
            <span role="img" aria-label="grinning face" id="grinning face">😀</span>
          </button>
        </li>
        <li>
          <button
            onClick={displayEmojiName}
          >
              <span role="img" aria-label="party popper" id="party popper">🎉</span>
          </button>
        </li>
        <li>
            <button
              onClick={displayEmojiName}
            >
              <span role="img" aria-label="woman dancing" id="woman dancing">💃</span>
          </button>
        </li>
      </ul>
    </div>
  )
}

export default App;

Speichern Sie die Datei. Klicken Sie in Ihrem Browser auf ein Emoji und Sie werden den gleichen Hinweis sehen.

In diesem Schritt haben Sie jedem Element Ereignisse hinzugefügt. Sie haben auch gesehen, wie JSX leicht abweichende Namen für Elementereignisse verwendet und begonnen, wiederverwendbaren Code zu schreiben, indem Sie die Funktion genommen und in mehreren Elementen erneut verwendet haben. Im nächsten Schritt schreiben Sie eine wiederverwendbare Funktion, die JSX-Elemente ausgibt, anstatt jedes Element per Hand zu schreiben. Dadurch werden Wiederholungen noch weiter reduziert.

Schritt 4 — Mapping von Daten zur Erstellung von Elementen

In diesem Schritt gehen Sie über die Verwendung von JSX als einfaches Markup hinaus. Sie lernen, es mit JavaScript zu kombinieren, um dynamisches Markup zu erstellen, das Code reduziert und die Lesbarkeit verbessert. Sie gestalten Ihren Code in ein Array um, über das Sie eine Schleife ausführen, um HTML-Elemente zu erstellen.

JSX beschränkt Sie nicht auf eine HTML-ähnliche Syntax. Es bietet Ihnen auch die Möglichkeit, JavaScript direkt in Ihrem Markup zu verwenden. Das haben Sie bereits ausprobiert, indem Sie Funktionen an Attribute übergeben haben. Sie haben auch Variablen zur Wiederverwendung von Daten verwendet. Nun können Sie JSX direkt aus Daten unter Verwendung von Standard-JavaScript-Code erstellen.

Sie müssen in Ihrem Texteditor ein Array der Emoji-Daten in der Datei src/App.js erstellen. Öffnen Sie die Datei, falls Sie diese geschlossen haben:

nano src/App.js

Fügen Sie ein Array ein, das Objekte enthält, die das Emoji und den Namen des Emojis beinhalten. Beachten Sie, dass Emojis von Anführungszeichen umgeben sein müssen. Erstellen Sie dieses Array über der App-Funktion:

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

const displayEmojiName = event => alert(event.target.id);
const emojis = [
  {
    emoji: "😀",
    name: "grinning face"
  },
  {
    emoji: "🎉",
    name: "party popper"
  },
  {
    emoji: "💃",
    name: "woman dancing"
  }
];

function App() {
...
}

export default App;

Nachdem Sie nun über die Daten verfügen, können Sie eine Schleife über diese ausführen. Um JavaScript innerhalb von JSX zu verwenden, müssen Sie es mit geschweiften Klammern umschließen: {}. Es ist das Gleiche wie bei den Funktionen, die Sie in Attribute eingefügt haben.

Um React-Komponenten zu erstellen, müssen Sie die Daten in JSX-Elemente konvertieren. Dazu führen Sie ein Mapping der Daten aus und geben ein JSX-Element aus. Es gibt ein paar Dinge, die Sie beim Schreiben des Codes beachten müssen.

Erstens muss eine Gruppe von Elementen von einem <div>-Container umgeben sein. Zweitens benötigt jedes Element eine spezielle Eigenschaft namens key – Schlüssel. Der key muss ein eindeutiges Datenstück sein. Mit diesem kann React die Elemente verfolgen und dadurch erfahren, wann die Komponente aktualisiert werden muss. Der Schlüssel wird aus dem kompilierten HTML ausgelassen, da er nur internen Zwecken dient. Wann immer Sie mit Schleifen arbeiten, müssen Sie eine einfache Zeichenfolge als Schlüssel einfügen.

Hier ist ein vereinfachtes Beispiel, das eine Liste von Namen auf ein enthaltendes <div> abbildet:

...
const names = [
    "Atul Gawande",
    "Stan Sakai",
    "Barry Lopez"
];

return(
    <div>
        {names.map(name => <div key={name}>{name}</div>)}
    </div>
)
...

Das resultierende HTML würde so aussehen:

...
<div>
    <div>Atul Gawande</div>
    <div>Stan Sakai</div>
    <div>Barry Lopez</div>
</div>
...

Die Konvertierung der Emoji-Liste ist ähnlich. Das <ul> ist der Container. Sie führen ein Mapping von Daten aus und geben ein <li> mit einem Schlüssel des Kurznamens des Emojis aus. Sie ersetzen die hartcodierten Daten in den Tags <button> und <span> durch Informationen aus der Schleife.

Fügen Sie Folgendes in Ihrem Texteditor ein:

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

const displayEmojiName = event => alert(event.target.id);
const emojis = [
  {
    emoji: '😀',
    name: "test grinning face"
  },
  {
    emoji: '🎉',
    name: "party popper"
  },
  {
    emoji: '💃',
    name: "woman dancing"
  }
];

function App() {
  const greeting = "greeting";
  return(
    <div className="container">
      <h1 id={greeting}>Hello, World</h1>
      <p>I am writing JSX</p>
      <ul>
        {
          emojis.map(emoji => (
            <li key={emoji.name}>
              <button
                onClick={displayEmojiName}
              >
                <span role="img" aria-label={emoji.name} id={emoji.name}>{emoji.emoji}</span>
              </button>
            </li>
          ))
        }
      </ul>
    </div>
  )
}

export default App;

Im Code haben Sie über das emojis-Array im <ul>-Tag gemappt und ein <li> ausgegeben. In jedem <li> haben Sie den Namen des Emojis als key-Prop verwendet. Der Button wird die gleiche Funktion wie normalerweise haben. Ersetzen Sie im Element <span> das aria-label und id mit dem name. Der Inhalt des <span>-Tags sollte das Emoji sein.

Speichern Sie die Datei. Ihr Fenster wird aktualisiert und Sie sehen die Daten. Beachten Sie, dass der Schlüssel nicht in dem generierten HTML vorhanden ist.

Das Kombinieren von JSX mit Standard JavaScript bietet Ihnen eine Menge Werkzeuge, um Inhalte dynamisch zu erstellen, und Sie können jedes gewünschte Standard-JavaScript verwenden. In diesem Schritt haben Sie hartkodiertes JSX durch ein Array und eine Schleife ersetzt, um HTML dynamisch zu erstellen. Im nächsten Schritt zeigen Sie Informationen bedingt an, indem Sie die Kurzschlussevaluierung anwenden.

Schritt 5 — Bedingtes Anzeigen von Elementen mit Kurzschlussevaluierung

In diesem Schritt verwenden Sie die Kurzschlussevaluierung, um bestimmte HTML-Elemente unter bestimmten Bedingungen anzuzeigen. Auf diese Weise können Sie Komponenten erstellen, die HTML auf der Grundlage zusätzlicher Informationen aus- oder einblenden können, wodurch Ihre Komponenten flexibel auf verschiedene Situationen reagieren können.

In einigen Situationen kann es notwendig sein, dass eine Komponente Informationen in bestimmten Fällen anzeigt und in anderen nicht. Beispielsweise möchten Sie vielleicht nur dann eine Hinweismeldung für den Benutzer anzeigen, wenn bestimmte Fälle zutreffen, oder Sie möchten eventuell einige Account-Informationen für einen Admin anzeigen, die ein normaler Benutzer nicht sehen soll.

Dazu verwenden Sie die Kurzschlussevaluierung. Das bedeutet, dass Sie eine Bedingung verwenden, und wenn der erste Teil zutrifft, werden die Informationen im zweiten Teil ausgegeben.

Hier folgt ein Beispiel. Wenn Sie nur dann einen Button anzeigen wollen, wenn der Benutzer eingeloggt ist, umschließen Sie das Element mit geschweiften Klammern und fügen die Bedingung davor ein.

{isLoggedIn && <button>Log Out</button>}

In diesem Beispiel verwenden Sie den &&-Operator, der den letzten Wert ausgibt, wenn alles zutrifft. Andernfalls gibt es false aus, was React anweist, kein zusätzliches Markup auszugeben. Wenn isLoggedIn zutrifft ist, zeigt React den Button. Wenn isLoggedIn nicht zutrifft, wird der Button nicht angezeit.

Fügen Sie zum Ausprobieren die folgenden hervorgehobenen Zeilen ein:

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

...

function App() {
  const greeting = "greeting";
  const displayAction = false;
  return(
    <div className="container">
      <h1 id={greeting}>Hello, World</h1>
      {displayAction && <p>I am writing JSX</p>}
      <ul>
...
      </ul>
    </div>
  )
}

export default App;

Sie haben in Ihrem Texteditor eine Variable namens displayAction mit einem Wert von false erstellt. Dann haben Sie das <p>-Tag mit geschweiften Klammern umschlossen. Am Anfang der geschweiften Klammern haben Sie displayAction && eingefügt, um die Bedingung zu erstellen.

Speichern Sie die Datei und Sie sehen, dass das Element in Ihrem Browser verschwindet. Wichtig ist auch, dass es auch nicht in dem generierten HTML erscheint. Dies ist nicht dasselbe wie das Ausblenden eines Elements mit CSS. Es wird im endgültigen Markup überhaupt nicht vorhanden sein.

Im Moment ist der Wert von displayAction hartkodiert, aber Sie können diesen Wert auch als einen State speichern oder als Prop aus einer übergeordneten Komponente übergeben.

In diesem Schritt haben Sie gelernt, wie man bedingt Elemente anzeigt. Dadurch können Sie Komponenten erstellen, die auf der Grundlage anderer Informationen anpassbar sind.

Zusammenfassung

Bis hierher haben Sie eine benutzerdefinierte Anwendung mit JSX erstellt. Sie haben gelernt, wie man HTML-ähnliche Elemente in Ihre Komponente einfügt, diesen Elementen ein Styling gibt, Attribute übergibt, um semantisches und barrierefreies Markup zu erstellen, und Events in die Komponenten eingefügt. Dann haben Sie JavaScript in Ihr JSX gemischt, um Wiederholungen im Code zu verringern und um Elemente bedingt ein- und auszublenden.

Das ist die Grundlage, die Sie benötigen, um zukünftige Komponenten zu erstellen. Mit einer Kombination aus JavaScript und HTML können Sie dynamische Komponenten erstellen, die flexibel sind und es Ihrer Anwendung ermöglichen, zu wachsen und sich zu verändern.

Wenn Sie mehr über React erfahren möchten, besuchen Sie unsere Themenseite React.