React lernen, 2. Auflage

Kapitel 5. React mit JSX

Diese Arbeit wurde mithilfe von KI übersetzt. Wir freuen uns über dein Feedback und deine Kommentare: [e-mail]

Im letzten Kapitel sind wir tief in die Funktionsweise von React eingetaucht und haben unsere React-Anwendungen in kleine, wiederverwendbare Teile, sogenannte Komponenten, zerlegt. Diese Komponenten stellen Bäume aus Elementen und anderen Komponenten dar. Die Funktion createElement ist ein guter Weg, um zu sehen, wie React funktioniert, aber als React-Entwickler ist es nicht das, was wir tun. Wir stellen nicht einfach komplexe, kaum lesbare Bäume aus JavaScript-Syntax zusammen und nennen das Spaß. Um effizient mit React arbeiten zu können, brauchen wir noch etwas: JSX.

JSX kombiniert das JS von JavaScript und das X von XML. Es ist eine JavaScript-Erweiterung, mit der wir React-Elemente mithilfe einer Tag-basierten Syntax direkt in unserem JavaScript-Code definieren können. Manchmal wird JSX mit HTML verwechselt, weil sie ähnlich aussehen. JSX ist nur eine weitere Möglichkeit, React-Elemente zu erstellen, damit du dir nicht die Haare raufen musst, um das fehlende Komma in einem komplexen createElement -Aufruf zu finden.

In diesem Kapitel werden wir besprechen, wie man JSX verwendet, um eine React-Anwendung zu erstellen.

React-Elemente als JSX

Das React Team von Facebook hat JSX veröffentlicht, als sie React herausbrachten, um eine prägnante Syntax für die Erstellung komplexer DOM-Bäume mit Attributen zu schaffen. Sie hofften ...