Maison > Article > interface Web > qu'est-ce que réagir jsx

qu'est-ce que réagir jsx

藏色散人original: 2020-11-10 11:47:262167parcourir

react jsx est une extension de syntaxe JavaScript qui ressemble beaucoup à XML. React utilise JSX pour remplacer le JavaScript standard : 1. JSX s'exécute plus rapidement ; être trouvé pendant le processus de compilation ; 3. Utiliser JSX pour écrire des modèles est plus rapide.

L'environnement d'exploitation de ce tutoriel : système Windows10, React16, cet article est applicable à toutes les marques d'ordinateurs.

Recommandé : "Vidéo de programmation"

React JSX

React utilise JSX pour remplacer le JavaScript standard.

JSX est une extension de syntaxe JavaScript qui ressemble beaucoup à XML.

Nous n'avons pas nécessairement besoin d'utiliser JSX, mais il présente les avantages suivants :

JSX fonctionne plus rapidement car il est optimisé après avoir été compilé en code JavaScript.
Il est de type sécurisé et des erreurs peuvent être trouvées lors de la compilation.
L'écriture de modèles à l'aide de JSX est plus simple et plus rapide.

Jetons un coup d'œil au code suivant :

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

Cela peut paraître étrange. La syntaxe des balises n'est ni une chaîne ni du HTML.

Cela s'appelle JSX, une extension de syntaxe pour JavaScript. Nous vous recommandons d'utiliser JSX pour décrire les interfaces utilisateur dans React.

JSX est implémenté dans JavaScript.

Nous savons que les éléments sont les plus petites unités qui composent les applications React, et JSX est utilisé pour déclarer des éléments dans React.

Différents des éléments DOM du navigateur, les éléments de React sont en fait des objets ordinaires. React DOM peut garantir que le contenu des données du DOM du navigateur est cohérent avec les éléments React.

Pour restituer les éléments React dans le nœud DOM racine, nous les rendons sur la page en les transmettant tous les deux à la méthode ReactDOM.render() :

Instance React

var myDivElement = <div className="foo" />;
ReactDOM.render(myDivElement, document.getElementById(&#39;example&#39;));

Remarque :

Étant donné que JSX est JavaScript, certains identifiants comme class et for ne sont pas recommandés comme noms d'attribut XML. Au lieu de cela, React DOM utilise className et htmlFor pour les attributs correspondants.

Utiliser JSX

JSX ressemble au HTML, nous pouvons regarder l'exemple :

ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById(&#39;example&#39;)
);

Nous pouvons imbriquer plusieurs balises HTML dans le code ci-dessus, nous devons utiliser un div L'élément l'enveloppe. L'élément p dans l'exemple ajoute l'attribut personnalisé data-myattribute. Pour ajouter un attribut personnalisé, vous devez utiliser le préfixe data-.

Instance React

ReactDOM.render(
    <div>
    <h1>PHP中文网</h1>
    <h2>欢迎学习 React</h2>
    <p data-myattribute = "somevalue">这是一个很不错的 JavaScript 库!</p>
    </div>
    ,
    document.getElementById(&#39;example&#39;)
);

Fichier séparé

Votre code React JSX peut être placé sur un fichier séparé, par exemple, nous créons un fichier helloworld_react.js avec le code suivant :

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById(&#39;example&#39;)
);

Introduisez ensuite le fichier JS dans le fichier HTML :

Instance React

<body>
  <div id="example"></div>
<script type="text/babel" src="helloworld_react.js"></script>
</body>

Expression JavaScript

On peut utiliser des expressions JavaScript en JSX. Les expressions sont écrites entre accolades {}. Les exemples sont les suivants :

Exemple de React

ReactDOM.render(
    <div>
      <h1>{1+1}</h1>
    </div>
    ,
    document.getElementById(&#39;example&#39;)
);

Les instructions If else ne peuvent pas être utilisées dans JSX, mais des expressions conditionnelles (opération ternaire) peuvent être utilisées à la place. Dans l'exemple suivant, si la variable i est égale à 1, le navigateur affichera vrai. Si la valeur de i est modifiée, il affichera faux.

Exemple de réaction

ReactDOM.render(
    <div>
      <h1>{i == 1 ? &#39;True!&#39; : &#39;False&#39;}</h1>
    </div>
    ,
    document.getElementById(&#39;example&#39;)
);

Style

Styles en ligne recommandés par React. Nous pouvons utiliser la syntaxe camelCase pour définir les styles en ligne. React ajoutera automatiquement des px après avoir spécifié le numéro de l'élément. L'exemple suivant montre l'ajout du style en ligne myStyle à l'élément h1 :

Exemple React

var myStyle = {
    fontSize: 100,
    color: &#39;#FF0000&#39;
};
ReactDOM.render(
    <h1 style = {myStyle}>PHP中文网</h1>,
    document.getElementById(&#39;example&#39;)
);

Comments

Les commentaires doivent être écrits entre accolades. L'exemple est le suivant. :

Instance React

ReactDOM.render(
    <div>
    <h1>PHP中文网</h1>
    {/*注释...*/}
     </div>,
    document.getElementById(&#39;example&#39;)
);

Array

JSX permet d'insérer des tableaux dans des modèles, et le tableau développera automatiquement tous les membres :

Instance React

var arr = [
  <h1>PHP中文网</h1>,
  <h2>学的不仅是技术，更是梦想！</h2>,
];
ReactDOM.render(
  <div>{arr}</div>,
  document.getElementById(&#39;example&#39;)
);

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment installer jqueryArticle suivant：Comment installer jquery

Articles Liés

Voir plus