Markup mit JSX schreiben
JSXist eine Syntaxerweiterung für JavaScript, die es ermöglicht, HTML-ähnliches Markup innerhalb einer JavaScript-Datei zu schreiben. Obwohl es andere Möglichkeiten gibt, Komponenten zu schreiben, bevorzugen die meisten React-Entwickler die Prägnanz von JSX, und die meisten Codebasen verwenden es.
Sie werden lernen
- Warum React Markup mit Rendering-Logik vermischt
- Wie sich JSX von HTML unterscheidet
- Wie man Informationen mit JSX anzeigt
JSX: Markup in JavaScript einfügen
Das Web wurde auf HTML, CSS und JavaScript aufgebaut. Viele Jahre lang haben Webentwickler Inhalte in HTML, Design in CSS und Logik in JavaScript verwaltet – oft in separaten Dateien! Inhalte wurden in HTML ausgezeichnet, während die Logik der Seite separat in JavaScript lebte:
HTML
JavaScript
Aber als das Web interaktiver wurde, bestimmte die Logik zunehmend den Inhalt. JavaScript war für das HTML verantwortlich! Deshalbleben in React Rendering-Logik und Markup zusammen am selben Ort – in Komponenten.
Sidebar.jsReact-Komponente
Form.jsReact-Komponente
Wenn die Rendering-Logik und das Markup eines Buttons zusammenbleiben, wird sichergestellt, dass sie bei jeder Bearbeitung synchron bleiben. Umgekehrt sind nicht zusammenhängende Details, wie das Markup des Buttons und das Markup einer Seitenleiste, voneinander isoliert, was es sicherer macht, eines von beiden unabhängig zu ändern.
Jede React-Komponente ist eine JavaScript-Funktion, die etwas Markup enthalten kann, das React im Browser rendert. React-Komponenten verwenden eine Syntaxerweiterung namens JSX, um dieses Markup darzustellen. JSX sieht HTML sehr ähnlich, ist aber etwas strenger und kann dynamische Informationen anzeigen. Der beste Weg, dies zu verstehen, ist, etwas HTML-Markup in JSX-Markup umzuwandeln.
Hinweis
JSX und React sind zwei verschiedene Dinge. Sie werden oft zusammen verwendet, aber mankannsie unabhängig voneinander verwenden. JSX ist eine Syntaxerweiterung, während React eine JavaScript-Bibliothek ist.
HTML in JSX umwandeln
Angenommen, Sie haben etwas (vollkommen gültiges) HTML:
Und Sie möchten es in Ihre Komponente einfügen:
Wenn Sie es einfach kopieren und einfügen, wird es nicht funktionieren:
Das liegt daran, dass JSX strenger ist und ein paar mehr Regeln hat als HTML! Wenn Sie die obigen Fehlermeldungen lesen, werden sie Sie bei der Korrektur des Markups anleiten, oder Sie können der folgenden Anleitung folgen.
Hinweis
Meistens helfen Ihnen die Bildschirmfehlermeldungen von React dabei, das Problem zu finden. Lesen Sie sie, wenn Sie nicht weiterkommen!
Die Regeln von JSX
1. Ein einzelnes Wurzelelement zurückgeben
Um mehrere Elemente aus einer Komponente zurückzugeben,umschließen Sie sie mit einem einzelnen Elterntag.
Sie können zum Beispiel ein<div>verwenden:
Wenn du deinem Markup kein zusätzliches<div>hinzufügen möchtest, kannst du stattdessen<>und</>schreiben:
Dieses leere Tag wirdFragmentgenannt. Fragmente ermöglichen es dir, Elemente zu gruppieren, ohne Spuren im HTML-Baum des Browsers zu hinterlassen.
2. Schließe alle Tags
JSX erfordert, dass Tags explizit geschlossen werden: Selbstschließende Tags wie<img>müssen zu<img />werden, und umschließende Tags wie<li>orangesmüssen als<li>oranges</li>geschrieben werden.
So sehen Heddy Lamarrs Bild und die Listeneinträge geschlossen aus:
3. camelCase fürfast alles!
JSX wird in JavaScript umgewandelt und in JSX geschriebene Attribute werden zu Schlüsseln von JavaScript-Objekten. In deinen eigenen Komponenten wirst du diese Attribute oft in Variablen auslesen wollen. Aber JavaScript hat Einschränkungen bei Variablennamen. Zum Beispiel dürfen ihre Namen keine Bindestriche enthalten oder reservierte Wörter wieclasssein.
Deshalb werden in React viele HTML- und SVG-Attribute in camelCase geschrieben. Zum Beispiel verwendest du stattstroke-width strokeWidth. Daclassein reserviertes Wort ist, schreibst du in React stattdessenclassName, benannt nach derentsprechenden DOM-Eigenschaft:
Du kannstalle diese Attribute in der Liste der DOM-Komponenten-Props finden.Wenn du einen falsch schreibst, keine Sorge – React gibt eine Nachricht mit einer möglichen Korrektur in derBrowser-Konsole aus.
Profi-Tipp: Verwende einen JSX-Konverter
Die Umwandlung all dieser Attribute in bestehendem Markup kann mühsam sein! Wir empfehlen die Verwendung einesKonverters, um dein bestehendes HTML und SVG in JSX zu übersetzen. Konverter sind in der Praxis sehr nützlich, aber es lohnt sich trotzdem zu verstehen, was vor sich geht, damit du JSX bequem selbst schreiben kannst.
Hier ist dein Endergebnis:
Zusammenfassung
Jetzt weißt du, warum JSX existiert und wie du es in Komponenten verwendest:
- React-Komponenten gruppieren Rendering-Logik zusammen mit Markup, da diese zusammengehören.
- JSX ähnelt HTML, mit ein paar Unterschieden. Sie können einenKonverterverwenden, falls nötig.
- Fehlermeldungen weisen Sie oft in die richtige Richtung, um Ihr Markup zu korrigieren.
Probieren Sie einige Herausforderungen aus
Challenge 1 of 1:Convert some HTML to JSX #
Dieses HTML wurde in eine Komponente eingefügt, aber es ist kein gültiges JSX. Korrigieren Sie es:
Ob Sie es manuell oder mit dem Konverter machen, bleibt Ihnen überlassen!