Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

ReactJS lernen

JSX vs. HTML

Testen Sie unsere 2016 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Um die Entwicklung mit React für den Entwickler möglichst einfach und übersichtlich zu gestalten, wird dort JSX verwendet. JSX orientiert sich zwar an der HTML-Syntax, weist aber trotzdem einige Unterschiede im Vergleich zu HTML auf.
03:23

Transkript

JSX ist zwar keine zwingende Voraussetzung zur Nutzung von React, bietet sich aber in den meisten Fällen an und verspricht eine sehr übersichtliche Schreibweise für das Rendern von einfachen HTML-Elementen sowie von React-Komponenten. Im Allgemeinen ist die Syntax stark an HTML angelehnt, es bestehen jedoch einige Unterschiede. Im Gegensatz zu klassischem HTML ist da beispielsweise das style-Attribut, das ein JavaScript-Objekt erhält anstelle eines Strings. Das lässt sich einerseits effizienter verarbeiten als ein String, der zuerst geparst werden müsste. Und andererseits soll es gleichzeitig zum Schutz und zur Vermeidung von Cross-Site-Scripting-Attacken dienen. Um ein allgemein konsistentes Gefühl in der Benutzung von React beziehungsweise in der Benutzung von JavaScript zu erzielen, werden Namen im Allgemeinen in camelCase geschrieben. Das heißt, wenn innerhalb eines Worts ein neues Wort beginnt, wird dieses mit einem Großbuchstaben geschrieben. Ausgenommen hiervon sind Attribute, die mit data- beginnen oder mit area-. Einige Attribute, die umbenannt wurden, sind einerseits class-Attribut. Dieses heißt in JSX className, einfach um Probleme mit reservierten Ausrücken in JavaScript zu vermeiden. Und andererseits das for-Attribut, das in JSX htmlFor genannt wird. Eine besondere Funktion in JSX ist der sogenannte Object-Spread-Operator. Das sind die drei Punkte, die hier zu sehen sind. Wenn Sie also beispielsweise einer Komponente in JSX-Schreibweise Props mitgeben möchten und bereits ein Objekt haben, das die entsprechenden Props mit den richtigen Keys benannt enthält, können Sie dieses Objekt, in diesem Fall die Variable props, nehmen und mit einer geschweiften Klammer und drei vorangestellten Punkten direkt in das Tag Ihrer gewünschten Komponente einfügen. Wenn wir uns das also kurz im Beispiel ansehen. Hier in der App beispielsweise rendern wir Produkte mit einer description und einem title. Wir sehen ja hier, dass wir die Props bereits in Form eines Objekts vorliegen haben, nämlich mit den Keys title und description. Und hier unten beim Rendern sehen wir eigentlich schon die Redundanz. Wir geben nämlich dem Attribut description p.description mit und dem Attribut title geben wir p.title mit. Das alles lässt sich auch mit dem Object-Spread-Operator kürzer schreiben, indem wir jetzt das Objekt p nehmen, innerhalb von geschweiften Klammern schreiben und drei Punkte voranstellen. Jetzt können wir das Ganze speichern und kompilieren. Und nochmal aktualisieren. Und wir sehen, alles funktioniert weiterhin genauso wie erwartet. Wenn wir hier noch eine kleine Änderung durchführen, dann sehen wir auch, dass diese hier richtig angekommen ist. Sie haben nun gelernt, dass JSX stark an HTML angelehnt ist, jedoch bei einige Attributen Vorsicht geboten ist, da diese umbenannt wurden. Außerdem haben Sie erfahren, wie Sie mithilfe des Object-Spread-Operators eine Kurzschreibweise zur Übergabe von Props verwenden können.

ReactJS lernen

Sehen Sie, wie Ihre Anwendung mit der Hilfe von ReactJS von einem virtuellen DOM (Document Object Model) profitiert.

2 Std. 20 min (19 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Exklusiv für Abo-Kunden
Erscheinungsdatum:05.08.2016

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!