React ist seit langem eine beliebte JavaScript-Bibliothek und gehört mit Sicherheit zu den beliebtesten der Welt. Da beliebte Frameworks wie Next.js und Remix auf React aufbauen und die Möglichkeit bietet, mobile Entwicklung mit React-Native durchzuführen, wird diese Bibliothek auch nicht so schnell verschwinden. Das Problem dabei ist jedoch, dass die meisten Anfänger zu React strömen und anfangen, es zu lernen, ohne wirklich zu verstehen, wie es funktioniert. Also lasst uns eintauchen.

Wie JSX funktioniert

In React ist JSX (JavaScript XML) eine Syntax, die HTML ähnelt, aber in JavaScript funktioniert. Da es sich selbst nicht um gültiges JavaScript handelt, verwendet React einen Transpiler (normalerweise Babel), um JSX in Standard-JavaScript zu konvertieren. Dieser JavaScript-Code wird letztendlich vom Browser interpretiert.

Wenn Sie JSX schreiben, wird es in React.createElement()-Funktionsaufrufe umgewandelt. Diese Funktionsaufrufe erzeugen React-Elemente, die die Bausteine ​​einer React-Anwendung sind. Jedes Element stellt einen Teil der Benutzeroberfläche dar.

Hier ist ein Beispiel dafür, wie das aussieht:

JSX in einer React-Komponente

const element = (
  

    
Hello, React!
    
This is a paragraph.
  
);

JSX in JavaScript umgewandelt:

const element = React.createElement(
  'div',
  null,
  React.createElement('h1', null, 'Hello, React!'),
  React.createElement('p', null, 'This is a paragraph.')
);

React nimmt diese verschachtelten React.createElement()-Aufrufe und konvertiert sie in die entsprechenden HTML-Elemente im DOM des Browsers.

Abschluss

JSX erleichtert das Schreiben von React-Komponenten, indem es Ihnen ermöglicht, eine HTML-ähnliche Syntax zu schreiben, aber es handelt sich lediglich um syntaktischen Zucker für React.createElement()-Aufrufe, die die Struktur Ihrer App mithilfe von JavaScript erstellen. Dies ermöglicht es React, die Benutzeroberfläche über seinen Virtual DOM-Mechanismus effizient zu verwalten.

Wenn Ihnen dieser Artikel gefallen hat, könnte Ihnen auch mein kostenloser Newsletter gefallen, den ich jede Woche an Entwickler wie Sie verschicke. Hier können Sie sich anmelden.