ReactJSX


Bemerkungen

JSX ist ein Präprozessor-Schritt , der JavaScript um XML-Syntax erweitert. Sie können React definitiv ohne JSX verwenden, aber JSX macht React viel eleganter.

Wie XML haben JSX-Tags einen Tagnamen, Attribute und Kinder. Wenn ein Attributwert in Anführungszeichen eingeschlossen ist, ist der Wert eine Zeichenfolge. Umschließen Sie den Wert andernfalls in geschweifte Klammern, und der Wert ist der eingeschlossene JavaScript-Ausdruck.

Grundsätzlich liefert JSX nur syntaktischen Zucker für die Funktion React.createElement(component, props, ...children) .

Also der folgende JSX-Code:

class HelloMessage extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

ReactDOM.render(<HelloMessage name="Kalo" />, mountNode);

Kompiliert sich mit dem folgenden JavaScript-Code:

class HelloMessage extends React.Component {
  render() {
    return React.createElement(
      "div",
      null,
      "Hello ",
      this.props.name
    );
  }
}

ReactDOM.render(React.createElement(HelloMessage, { name: "Kalo" }), mountNode);

Beachten Sie abschließend, dass die folgende Zeile in JSX weder eine Zeichenfolge noch HTML ist :

const element = <h1>Hello, world!</h1>;

Es heißt JSX und ist eine Syntaxerweiterung für JavaScript . JSX erinnert Sie möglicherweise an eine Vorlagensprache, verfügt jedoch über die volle Funktionalität von JavaScript.

Das React-Team sagt in seinen Dokumenten, dass es empfohlen wird, es zu verwenden, um zu beschreiben, wie die Benutzeroberfläche aussehen sollte.

JSX Verwandte Beispiele