JSX

Download reactjs eBook

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 <div>Hello {this.props.name}</div>;
  }
}

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

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

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

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

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.

Verwandte Beispiele

Stats

63 Contributors: 2
Friday, March 3, 2017
Lizenziert unter: CC-BY-SA

Nicht angeschlossen an Stack Overflow
Rip Tutorial: info@zzzprojects.com

EBook herunterladen