JSX und Components

Teil des React-Kurses

In der letzten Lektion hast du gesehen, wie eine Komponente etwas zurückgibt, das wie HTML aussieht: return <h1>Hello, React</h1>;. Das sollte sich ein wenig falsch angefühlt haben. JavaScript-Funktionen geben Werte zurück, Zahlen, Strings oder Objekte, keine spitzen Klammern.

JSX steht für JavaScript XML. Es ist eine Syntaxerweiterung, mit der du etwas, das wie ein HTML-Tag aussieht, direkt in JavaScript-Code schreiben kannst. Ein Build-Tool (dieselbe Art Compiler, die in der vorigen Lektion erwähnt wurde) liest <h1>Hello</h1> und macht daraus einen ganz normalen JavaScript-Funktionsaufruf, lange bevor dein Browser etwas davon sieht, ungefähr createElement("h1", null, "Hello").