Wie man React-Elemente mit JSX erstellt

Einführung

In diesem Tutorial lernen Sie, wie Sie Elemente mit JSX beschreiben. JSX ist eine Abstraktion, die es Ihnen ermöglicht, HTML-ähnliche Syntax in Ihrem JavaScript-Code zu verwenden. Dadurch können Sie React-Komponenten erstellen, die wie herkömmliches HTML-Markup aussehen. JSX ist die Template-Sprache für React-Elemente und somit die Grundlage für jegliches Markup, das React in Ihrer Anwendung bereitstellt.

Da JSX es Ihnen ermöglicht, JavaScript in Ihrem Markup zu schreiben, können Sie JavaScript-Funktionen und -Methoden verwenden, einschließlich Array-Mapping und Kurzschlussauswertung für Bedingungen.

Im Rahmen dieses Tutorials lernen Sie, Klickereignisse von Schaltflächen direkt im Markup abzufangen und auch solche zu erfassen, deren Syntax nicht exakt dem Standard-HTML entspricht, wie beispielsweise CSS-Klassen. Am Ende des Tutorials verfügen Sie über eine Anwendung, die verschiedene JSX-Funktionen nutzt, um eine Liste von Elementen mit integriertem Klick-Listener anzuzeigen. Dies ist ein gängiges Muster in React-Anwendungen, das Sie im Laufe des Framework-Kurses häufig verwenden werden. Sie lernen außerdem, Standard-HTML-Elemente mit JavaScript zu kombinieren und so zu sehen, wie React die Erstellung kleiner, wiederverwendbarer Codeabschnitte ermöglicht.

Voraussetzungen

• Sie benötigen eine Entwicklungsumgebung, die Node.js ausführt.
• Mit Create React App sollten Sie eine App erstellen können.
• Sie benötigen außerdem Grundkenntnisse in JavaScript.

Schritt 1 – Markup zum React-Element hinzufügen

Wie bereits erwähnt, verfügt React über eine spezielle Auszeichnungssprache namens JSX. Es handelt sich um eine Kombination aus HTML- und JavaScript-Syntax, die etwa so aussieht:

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

Einige JavaScript-Funktionen wie .filter und .map sowie einige Standard-HTML-Funktionen wie <div> Das werden Sie erkennen. Aber es gibt auch andere Bestandteile wie HTML und JavaScript, wie zum Beispiel <card> und Klassenname.

Dies ist JSX, eine spezielle Auszeichnungssprache, die React-Komponenten das Gefühl von HTML mit der Leistungsfähigkeit von JavaScript verleiht.

In diesem Schritt lernen Sie, wie Sie einem bestehenden React-Element HTML-ähnliche Grundelemente hinzufügen. Zunächst fügen Sie einer JavaScript-Funktion Standard-HTML-Elemente hinzu und betrachten anschließend den kompilierten Code im Browser. Außerdem gruppieren Sie Elemente, damit React sie mit minimalem Markup und sauberem HTML-Code kompilieren kann.

Erstellen Sie zunächst ein neues Projekt. Führen Sie dazu das folgende Skript in Ihrer Befehlszeile aus, um ein neues Projekt mit create-react-app zu installieren:

npx create-react-app jsx-tutorial

Nach Abschluss des Projekts wechseln Sie in das folgende Verzeichnis:

cd jsx-tutorial

Starten Sie das Projekt in einem neuen Tab oder Terminalfenster mithilfe des Create React App-Startskripts. Der Browser aktualisiert sich automatisch, um Änderungen widerzuspiegeln. Führen Sie dieses Skript daher während Ihrer gesamten Arbeit aus:

npm start

Sie erhalten einen lokalen Server, der ausgeführt wird. Falls sich das Projekt nicht in einem Browserfenster öffnet, finden Sie es unter http://localhost:3000/. Wenn Sie es von einem Remote-Server ausführen, lautet die Adresse http://Ihre_IP-Adresse:3000.

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

Sie werden einen komplett neuen Satz benutzerdefinierter Komponenten erstellen. Daher müssen Sie zunächst den vorhandenen Boilerplate-Code entfernen, um ein leeres Projekt zu erhalten. Öffnen Sie dazu die Datei „App.js“ in einem Texteditor. Dies ist die Wurzelkomponente, die in die Seite eingebunden wird. Alle weiteren Komponenten basieren auf dieser Komponente.

Öffnen Sie in einem neuen Terminal den Projektordner und öffnen Sie die Datei src/App.js mit folgendem Befehl:

nano src/App.js

Sie sehen dann 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;

Entfernen Sie nun die Zeile `import logo from './logo.svg'` und alles nach der `return`-Anweisung in der Funktion. Ändern Sie die Anweisung so, dass sie `null` zurückgibt. Der endgültige Code sieht dann wie folgt aus:

import React from 'react';
import './App.css';
function App() {
return null;
}
export default App;

Speichern und beenden Sie den Texteditor.

Zum Schluss löschen Sie das Logo. Geben Sie im Terminalfenster folgenden Befehl ein:

rm src/logo.svg

Sie werden diese SVG-Datei in Ihrer Anwendung nicht verwenden und sollten daher nicht benötigte Dateien nach und nach entfernen. Dies sorgt langfristig für einen besser übersichtlichen Code.

Nachdem diese Teile Ihres Projekts nun abgeschlossen sind, können Sie sich mit den JSX-Aspekten befassen. Diese Auszeichnungssprache wird von React kompiliert und schließlich in den HTML-Code umgewandelt, den Sie auf einer Webseite sehen. Vereinfacht gesagt: React nimmt den JSX-Code und erstellt ein Modell, wie Ihre Seite aussehen soll. Anschließend generiert das Unternehmen die notwendigen Elemente und fügt sie der Seite hinzu.

Das bedeutet, dass man etwas schreiben kann, das wie HTML aussieht, und erwarten kann, dass das gerenderte HTML ähnlich aussieht. Es gibt jedoch ein paar Einschränkungen.

Wenn Sie zunächst den Tab oder das Fenster öffnen, in dem Ihr Server läuft, sehen Sie Folgendes:

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

Diese Zeile zeigt an, dass Sie keinen importierten React-Code verwenden. Wenn Sie die Zeile `react import` in Ihren Code einfügen, importieren Sie JavaScript-Code, der JSX in React-Code umwandelt. Ist JSX nicht vorhanden, ist der Import nicht erforderlich.

Ändern wir das Ganze etwas, indem wir ein wenig JSX hinzufügen. Beginnen wir damit, null durch ein „Hallo Welt“-Beispiel zu ersetzen:

import React from 'react';
import './App.css';
function App() {
return <h1>Hello, World</h1>;
}
export default App;

Speichern Sie die Datei. Wenn Sie das Terminal bei laufendem Server betrachten, verschwindet die Warnmeldung. Im Browser wird die Meldung als h1-Element angezeigt.

Dann unter dem Etikett <h1>Fügen Sie einen Absatz-Tag hinzu, der die Zeichenkette &quot;Ich schreibe JSX&quot; enthält. 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 sich JSX über mehrere Zeilen erstreckt, müssen Sie den Ausdruck in Klammern setzen.

Speichern Sie die Datei. Dabei wird im Terminal Ihres Servers eine Fehlermeldung angezeigt:

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 Direktive zurückgeben, muss es sich um ein einzelnes Element handeln. Dieses Element kann verschachtelte Kindelemente enthalten, muss aber ein übergeordnetes Element haben. In diesem Fall geben Sie zwei Elemente zurück.

Die Lösung ist eine kleine Codeänderung. Schließen Sie den Code in ein leeres Tag ein. Ein leeres Tag ist ein HTML-Element ohne Inhalt. Es sieht so aus: <> Die.

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

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 erzeugt zwar ein Element, dieses wird aber beim Kompilieren des Codes nicht in das endgültige Markup aufgenommen. Dadurch bleibt Ihr Code übersichtlich, während React dennoch ein einzelnes Element erhält.

Speichern Sie den Code und schließen Sie die Datei. Ihr Browser wird neu geladen und die aktualisierte Seite mit dem Absatz-Element angezeigt. Außerdem werden beim Konvertieren des Codes die leeren Tags entfernt.

Nachdem Sie nun etwas grundlegenden JSX-Code zu Ihrer Komponente hinzugefügt und gelernt haben, wie JSX-Code innerhalb einer Komponente verschachtelt werden sollte, besteht der nächste Schritt darin, Ihrer Komponente ein Styling hinzuzufügen.

Schritt 2 – Einem Element mit Attributen ein Styling hinzufügen

In diesem Schritt gestalten Sie die Elemente Ihrer Komponente, um zu lernen, wie HTML-Attribute mit JSX funktionieren. React bietet viele Gestaltungsmöglichkeiten. Einige erfordern das Schreiben von CSS in JavaScript, andere verwenden Präprozessoren. In diesem Tutorial arbeiten Sie mit CSS-Klassen und importiertem CSS.

Nachdem Sie nun Ihren Code haben, ist es an der Zeit, ihn zu formatieren. Öffnen Sie die Datei App.css in Ihrem Texteditor:

nano src/App.css

Da Sie mit neuem JSX arbeiten, verweist das aktuelle CSS auf Elemente, die nicht mehr existieren. Da Sie das CSS nicht benötigen, können Sie es entfernen.

Nach dem Löschen des Codes erhalten Sie eine leere Datei.

Als Nächstes formatieren Sie den Text. Fügen Sie dazu in src/App.css folgenden Code ein:

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

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

Speichern Sie die Datei und beenden Sie das Fenster. Der Browser wird neu geladen, aber es ändert sich nichts. Bevor die Änderung sichtbar wird, 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 ist bereits mit der Importzeile “./App.css” importiert. Das bedeutet, dass Webpack den Code importiert, um ein endgültiges Stylesheet zu erstellen. Um das CSS jedoch auf Ihre Elemente anzuwenden, müssen Sie die Klassen hinzufügen.

Suchen Sie zunächst in Ihrem Texteditor die leeren Tags. <> Zu <div> Ändern.

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 – <> – durch div-Tags ersetzt. Leere Tags sind zwar nützlich, um Ihren Code zu gruppieren, ohne zusätzliche Tags hinzuzufügen, aber hier sollten Sie div verwenden, da leere Tags keine HTML-Attribute akzeptieren.

Als Nächstes müssen Sie den Klassennamen hinzufügen. Hier beginnt sich JSX von HTML zu unterscheiden. Wenn Sie einem regulären HTML-Element eine Klasse hinzufügen möchten, gehen Sie folgendermaßen vor:

<div class="container">

Da JSX jedoch auf JavaScript basiert, gibt es einige Einschränkungen. Eine davon ist, dass JavaScript reservierte Schlüsselwörter kennt. Das bedeutet, dass bestimmte Wörter in JavaScript-Code nicht verwendet werden können. Beispielsweise kann keine Variable namens `null` erstellt werden, da dieses Wort bereits reserviert ist.

Eines der reservierten Wörter ist `class`. React umgeht dieses reservierte Wort mit einer kleinen Änderung. Anstatt die Eigenschaft `class` hinzuzufügen, verwendet man die Eigenschaft `className`. Als Faustregel gilt: Wenn eine Eigenschaft nicht wie erwartet funktioniert, versuchen Sie es mit der CamelCase-Schreibweise. Eine weitere Eigenschaft, die etwas anders funktioniert, ist die `for`-Eigenschaft, die Sie für Tags verwenden. Es gibt noch einige weitere, aber glücklicherweise ist die Liste relativ kurz.

Nachdem Sie nun wissen, wie das Klassenattribut in React verwendet wird, können Sie Ihren Code aktualisieren, um Stile einzubinden. Fügen Sie in Ihrem Texteditor dem öffnenden div-Tag `className="container"` hinzu.

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. Dadurch wird die Seite neu geladen und der Inhalt zentriert.

Das Attribut `className` ist React-spezifisch. Die meisten HTML-Attribute lassen sich ohne Änderungen in JSX einfügen. Gehen Sie beispielsweise zurück zu Ihrem Texteditor und fügen Sie dem Element die ID „greeting“ hinzu. <h1> Fügen Sie Ihren eigenen Code hinzu. Er wird wie Standard-HTML aussehen:

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. Das war's.

JSX sieht bisher wie herkömmliches Markup aus, aber der Vorteil von JSX liegt darin, dass es die Leistungsfähigkeit von JavaScript mit der Optik von HTML vereint. Das bedeutet, dass Sie Variablen zuweisen und in Ihren Eigenschaften auf sie zugreifen können. Um auf eine Eigenschaft zuzugreifen, setzen Sie sie in geschweifte Klammern – {} – anstatt in Anführungszeichen.

Fügen Sie in Ihrem Texteditor die folgenden hervorgehobenen Zeilen hinzu, um auf ein Feature zu verweisen:

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 oberhalb der return-Anweisung eine Variable namens greeting mit dem Wert &quot;greeting&quot; erstellt und diese dann der Variable im id-Attribut des Tags zugewiesen. <h1> Du hast dich selbst empfohlen.

Speichern Sie die Datei und beenden Sie das Programm. Die Seite bleibt unverändert, enthält aber ein ID-Tag.

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

Um dies zu demonstrieren, erstellen Sie eine Seite mit einer Liste von Emojis. Diese Emojis sind in ein <a>-Element eingeschlossen. Wenn Sie auf ein Emoji klicken, wird dessen CLDR-Kurzname angezeigt..

Um zu beginnen, müssen Sie der Seite einige weitere Elemente hinzufügen. Öffnen Sie die Datei src/App.js in Ihrem Texteditor. Lassen Sie sie vorerst geöffnet.

nano src/App.js

Fügen Sie zunächst eine Liste von Emojis hinzu, indem Sie die folgenden Markierungen hinzufü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;

Hier ist ein Etikett.

Sie haben eine Liste von Emojis erstellt, die gespeichert werden sollen. Jedes Emoji befindet sich in einem Element.
• Es befindet sich separat und ist vom Element umschlossen. Im nächsten Schritt fügen Sie diesem Button ein Ereignis hinzu..

  Sie können Emojis auch mit einem Tag verwenden. <span> Sie haben es mit einigen weiteren Eigenschaften versehen. Jedes &lt;span&gt;-Element besitzt ein &lt;span&gt;-Attribut mit der Rolle „img“. Dies signalisiert der zugreifenden Software, dass sich das Element wie ein Bild verhält. Darüber hinaus hat jedes &lt;span&gt;-Element … <span> Es besitzt ein Aria-Tag und ein ID-Attribut namens „emoji“. Das Aria-Tag teilt Besuchern mit, die Bildschirmleseprogramme verwenden, was angezeigt wird. Die ID wird später beim Schreiben von Ereignissen benötigt.

  Wenn Sie Code auf diese Weise schreiben, verwenden Sie semantische Elemente, was dazu beiträgt, dass die Seite barrierefrei bleibt und von Bildschirmleseprogrammen leicht interpretiert werden kann.

  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

  Um den Standardhintergrund und -rahmen der Schaltflächen zu entfernen und gleichzeitig die Schriftgröße zu erhöhen, fügen Sie den folgenden hervorgehobenen Code hinzu:

  .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 Schriftgröße, Rand und andere Parameter verwendet, um das Aussehen der Schaltflächen anzupassen und die Schriftart zu ändern. Außerdem haben Sie die Listenstile entfernt und dem Element die Anweisung `display:` hinzugefügt.

  Biegen Sie es so, dass es waagerecht ist.

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

  

  Sie haben nun mit verschiedenen JSX-Elementen gearbeitet, die wie normales HTML aussehen. Sie haben Klassen, IDs und aria-Tags hinzugefügt und mit Daten als Zeichenketten und Variablen gearbeitet. React verwendet aber auch Attribute, um festzulegen, wie Ihre Elemente auf Benutzerereignisse reagieren sollen. Als Nächstes gestalten Sie die Seite interaktiv, indem Sie dem Button Ereignisse hinzufügen.

  Schritt 3 – Ereignisse zu Elementen hinzufügen

  In diesem Schritt fügen Sie Elementen Ereignisse mithilfe spezifischer Attribute hinzu und protokollieren ein Klickereignis auf einem Button-Element. Sie lernen, wie Sie Ereignisinformationen erfassen, um eine andere Aktion auszulösen oder andere Informationen innerhalb des Dateibereichs zu verwenden.

  Nachdem Sie nun eine Hauptseite mit Informationen erstellt haben, ist es an der Zeit, Ereignisse hinzuzufügen. Es gibt zahlreiche Ereignisbehandler, die Sie HTML-Elementen hinzufügen können. React bietet Ihnen Zugriff auf all diese Funktionen. Da Ihr JavaScript-Code im Markup enthalten ist, können Sie schnell Ereignisse hinzufügen und gleichzeitig Ihren Code übersichtlich halten.

  Fügen Sie zunächst einen onclick-Ereignishandler hinzu. Dadurch können Sie JavaScript-Code direkt in Ihr Element einfügen, anstatt einen Ereignislistener anzuhängen:

  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 in CamelCase geschrieben, d. h. Sie haben es als onClick hinzugefügt. Diese onClick-Eigenschaft verwendet eine anonyme Funktion, um die Informationen über das angeklickte Element abzurufen.

  Sie haben eine anonyme Pfeilfunktion hinzugefügt, die das Ereignis des angeklickten Buttons empfängt, und das Ereignis hat ein Ziel, das das Element ist. <span> Die benötigten Informationen befinden sich in der Eigenschaft `id`, auf die Sie mit `event.target.id` zugreifen können. Sie können die Benachrichtigung mit der Funktion `alert()` aktivieren.

  Speichern Sie die Datei. Klicken Sie in Ihrem Browser auf eines der Emojis, um eine Benachrichtigung mit dem Namen zu erhalten.

  

  Sie können einen Durchlauf vermeiden, indem Sie die Funktion nur einmal deklarieren und sie jeder onClick-Aktion übergeben. Da die Funktion ausschließlich von Eingabe und Ausgabe abhängt, können Sie sie außerhalb der Hauptkomponentenfunktion deklarieren. Anders ausgedrückt: Die Funktion benötigt keinen Zugriff auf den Komponentenbereich. Der Vorteil dieser Trennung liegt darin, dass Ihre Komponentenfunktion etwas kürzer wird und Sie die Funktion bei Bedarf später in eine separate Datei auslagern können.

  Erstellen Sie in Ihrem Texteditor eine Funktion namens displayEmojiName, die das Ereignis abfängt und die Funktion alert() mit einem Bezeichner aufruft. Übergeben Sie diese Funktion anschließend an jede onClick-Eigenschaft.

  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. Wenn Sie in Ihrem Browser auf ein Emoji klicken, wird Ihnen dieselbe Warnung angezeigt.

  In diesem Schritt haben Sie jedem Element Ereignisse hinzugefügt. Sie haben auch gesehen, dass JSX leicht abweichende Namen für Elementereignisse verwendet, und Sie haben begonnen, wiederverwendbaren Code zu schreiben, indem Sie eine Funktion für mehrere Elemente wiederverwendet haben. Im nächsten Schritt schreiben Sie eine wiederverwendbare Funktion, die die JSX-Elemente zurückgibt, anstatt jedes Element manuell zu definieren. Dadurch wird die Redundanz weiter reduziert.

  Schritt 4 – Datenzuordnung zur Erstellung von Elementen

  In diesem Schritt lernen Sie, JSX nicht nur als einfache Auszeichnungssprache zu verwenden. Sie lernen, es mit JavaScript zu kombinieren, um dynamische Auszeichnungssprache zu erstellen, die den Code reduziert und die Lesbarkeit verbessert. Sie wandeln Ihren Code in ein Array um, das Sie durchlaufen, um HTML-Elemente zu erzeugen.

  JSX schränkt Sie nicht so stark ein wie HTML. Es ermöglicht Ihnen außerdem, JavaScript direkt in Ihrem Markup zu verwenden. Sie haben dies bereits ausprobiert, indem Sie Funktionen an Attribute übergeben haben. Auch die Wiederverwendung von Daten mithilfe von Variablen ist Ihnen bekannt. Nun ist es an der Zeit, JSX direkt aus Daten mithilfe von Standard-JavaScript-Code zu erstellen.

  Erstellen Sie in Ihrem Texteditor ein Array mit Emoji-Daten in der Datei src/App.js. Falls Sie die Datei geschlossen haben, öffnen Sie sie erneut.

  nano src/App.js

  Füge ein Array hinzu, das Objekte mit dem jeweiligen Emoji und dessen Namen enthält. Beachte, dass die Emojis in Anführungszeichen stehen müssen. Erstelle dieses Array oberhalb 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 die Daten haben, können Sie sie durchlaufen. Um JavaScript innerhalb von JSX zu verwenden, müssen Sie es in geschweifte Klammern setzen: {}. Dies ist vergleichbar mit dem Hinzufügen von Funktionen zu Attributen.

  Um React-Komponenten zu erstellen, müssen Daten in JSX-Elemente umgewandelt werden. Dazu werden die Daten gemappt und ein JSX-Element zurückgegeben. Beim Schreiben des Codes sind einige Punkte zu beachten.

  Zunächst muss eine Gruppe von Elementen durch einen Container repräsentiert werden. <div> Zweitens benötigt jedes Element eine spezielle Eigenschaft, den sogenannten Schlüssel. Der Schlüssel sollte ein eindeutiges Datum sein, mit dem React die Elemente verfolgen und die Komponente aktualisieren kann. Der Schlüssel wird aus dem kompilierten HTML entfernt, da er nur intern verwendet wird. Verwenden Sie beim Arbeiten mit Schleifen immer einen einfachen String als Schlüssel.

  Hier ist ein einfaches Beispiel, das eine Namensliste zeigt. <div> Es kartiert:

  ...
  const names = [
  "Atul Gawande",
  "Stan Sakai",
  "Barry Lopez"
  ];
  return(
  <div>
  {names.map(name => <div key={name}>{name}</div>)}
  </div>
  )
  ...

  Der resultierende HTML-Code sieht folgendermaßen aus:

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

  Die Umrechnung der Emoji-Liste wird ähnlich erfolgen. <ul> Es wird ein Container sein. Sie ordnen die Daten zu und ein <li> Gib das Emoji mit dem Kurznamen zurück. Kodiere die Daten in den Tags. <button> Und <span> Sie ersetzen diese durch die Ringinformationen.

  Fügen Sie in Ihrem Texteditor Folgendes hinzu:

  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;

  Klicken Sie im Code auf das Emoji-Array im Tag <ul> Karte und eins <li> Rückgabe. In jeder Hinsicht. <li> Sie haben den Emoji-Namen als Primärschlüssel verwendet. Die Schaltfläche hat weiterhin dieselbe Funktionalität wie gewohnt. Im Element <span>Ersetzen Sie aria-label und id durch den Namen. Taggen Sie den Inhalt. <span> Es sollte ein Emoji sein.

  Speichern Sie die Datei. Das Fenster wird aktualisiert und die Daten werden angezeigt. Beachten Sie, dass der Schlüssel im generierten HTML-Code nicht enthalten ist.

  

  Die Kombination von JSX mit Standard-JavaScript bietet zahlreiche Möglichkeiten zur dynamischen Inhaltsgenerierung. Dabei können Sie beliebiges Standard-JavaScript verwenden. In diesem Schritt haben Sie den fest codierten JSX-Code durch ein Array und eine Schleife ersetzt, um HTML dynamisch zu generieren. Im nächsten Schritt zeigen Sie die Informationen bedingt mithilfe einer Kurzform an.

  Schritt 5 – Bedingte Anzeige kurzgeschlossener Elemente

  In diesem Schritt verwenden Sie Shortcodes, um HTML-Elemente bedingt anzuzeigen. Dadurch können Sie Komponenten erstellen, die HTML-Elemente basierend auf zusätzlichen Informationen ein- oder ausblenden können. Dies verleiht Ihren Komponenten die Flexibilität, verschiedene Situationen zu bewältigen.

  Es gibt Situationen, in denen eine Komponente Informationen nur in bestimmten Fällen anzeigen soll. Beispielsweise möchten Sie dem Benutzer möglicherweise nur dann eine Warnmeldung anzeigen, wenn bestimmte Bedingungen erfüllt sind, oder Sie möchten einem Administrator bestimmte Kontoinformationen anzeigen, die für normale Benutzer nicht sichtbar sein sollen.

  Dazu verwendet man einen Kurzschluss. Das heißt, man verwendet eine Bedingung, und wenn der erste Teil wahr ist, gibt die Funktion die Information des zweiten Teils zurück.

  Hier ein Beispiel. Wenn Sie eine Schaltfläche nur dann anzeigen möchten, wenn der Benutzer angemeldet ist, umschließen Sie dieses Element mit geschweiften Klammern und fügen eine Bedingung hinzu.

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

  In diesem Beispiel verwenden Sie den &&-Operator. Dieser gibt den letzten Wert zurück, wenn alle Bedingungen erfüllt sind. Andernfalls gibt er false zurück, wodurch React angewiesen wird, kein zusätzliches Markup zurückzugeben. Wenn isLoggedIn true ist, zeigt React die Schaltfläche an. Wenn isLoggedIn false ist, wird die Schaltfläche nicht angezeigt.

  Um dies auszuprobieren, fügen Sie die folgenden hervorgehobenen Zeilen hinzu:

  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;

  In Ihrem Texteditor haben Sie eine Variable namens displayAction mit dem Wert false erstellt. Dann das Tag <p> Sie haben displayAction in geschweifte Klammern eingeschlossen. Am Anfang der geschweiften Klammern haben Sie &amp;&amp; hinzugefügt, um eine Bedingung zu erstellen.

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

  

  Derzeit ist der Wert für displayAction fest codiert, Sie können diesen Wert aber auch als Zustand speichern oder ihn als Basiswert von einer übergeordneten Komponente übergeben.

  In diesem Schritt haben Sie gelernt, wie Sie Elemente bedingt anzeigen. Dadurch können Sie Komponenten erstellen, die anhand anderer Informationen angepasst werden können.

  Ergebnis

  An diesem Punkt haben Sie eine eigene Anwendung mit JSX erstellt. Sie haben gelernt, wie Sie HTML-ähnliche Elemente zu Ihren Komponenten hinzufügen, diese Elemente mit Stilen versehen, Attribute übergeben, um semantisches und barrierefreies Markup zu erstellen, und Ereignisse an Komponenten anhängen. Anschließend haben Sie JavaScript mit Ihrem JSX kombiniert, um Code-Duplizierung zu vermeiden und Elemente bedingt ein- und auszublenden.

  Dies ist die Grundlage, die Sie für die Entwicklung zukünftiger Komponenten benötigen. Durch die Kombination von 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.