JSX

Téléchargez reactjs eBook

Remarques

JSX est une étape de préprocesseur qui ajoute la syntaxe XML à JavaScript. Vous pouvez certainement utiliser React sans JSX, mais JSX rend React beaucoup plus élégant.

Tout comme XML, les balises JSX ont un nom de balise, des attributs et des enfants. Si une valeur d'attribut est entre guillemets, la valeur est une chaîne. Sinon, placez la valeur entre accolades et la valeur est l'expression JavaScript incluse.

Fondamentalement, JSX ne fournit que du sucre syntaxique pour la fonction React.createElement(component, props, ...children) .

Donc, le code JSX suivant:

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

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

Compile jusqu'au code JavaScript suivant:

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

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

En conclusion, notez que la ligne suivante dans JSX n'est ni une chaîne ni un HTML :

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

Il s'appelle JSX, et c'est une extension de syntaxe pour JavaScript . JSX peut vous rappeler un langage de modèle, mais il est livré avec toute la puissance de JavaScript.

L'équipe React indique dans ses documents qu'ils recommandent de l'utiliser pour décrire ce que l'interface utilisateur devrait ressembler.

Exemples Liés

Stats

63 Contributors: 2
Friday, March 3, 2017
Sous licence: CC-BY-SA

Non affilié à Stack Overflow
Rip Tutorial: info@zzzprojects.com

Télécharger le eBook