Réagir à JSX


React utilise JSX au lieu du JavaScript classique.

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.

Utilisation de JSX

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

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

Nous pouvons l'imbriquer dans ce qui précède code Plusieurs balises HTML doivent être enveloppées avec un élément div. L'élément p dans l'exemple a un attribut personnalisé data-myattribute ajouté pour ajouter un attribut personnalisé, vous devez utiliser le data-. préfixe.

Instance

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>php中文网 React 实例</title>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react.min.js"></script>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.min.js"></script>
    <script src="http://static.php.cn/assets/react/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      ReactDOM.render(
      	<div>
      	<h1>php中文网</h1>
      	<h2>欢迎学习 React</h2>
        <p data-myattribute = "somevalue">这是一个很不错的 JavaScript 库!</p>
        </div>
      	,
      	document.getElementById('example')
      );
    </script>
  </body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Fichier indépendant

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

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

Puis introduisons. ceci dans le fichier HTML JS :

Instance

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react.min.js"></script>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.min.js"></script>
    <script src="http://static.php.cn/assets/react/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
  <script type="text/babel" src="helloworld_react.js"></script>
  </body>
</html>

Exécuter l'instance»

Cliquez sur le bouton "Exécuter l'instance" pour visualiser l'instance en ligne

Expressions JavaScript

Nous pouvons utiliser des expressions JavaScript dans JSX. Les expressions sont écrites entre accolades {}. Les exemples sont les suivants :

Instance

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>php中文网 React 实例</title>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react.min.js"></script>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.min.js"></script>
    <script src="http://static.php.cn/assets/react/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      ReactDOM.render(
      	<div>
      	  <h1>{1+1}</h1>
        </div>
      	,
      	document.getElementById('example')
      );
    </script>
  </body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

ne peut pas utiliser l'instruction if else dans JSX. Vous pouvez utiliser l'expression conditionnelle (opération ternaire) à la place. Dans l'exemple suivant, si la variable i est égale à 1, le navigateur affichera true Si la valeur de i est modifiée, il affichera true. 🎜>false

.

Instance
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>php中文网 React 实例</title>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react.min.js"></script>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.min.js"></script>
    <script src="http://static.php.cn/assets/react/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
	  var i = 1;
      ReactDOM.render(
      	<div>
      	  <h1>{i == 1 ? 'True!' : 'False'}</h1>
        </div>
      	,
      	document.getElementById('example')
      );
    </script>
  </body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Styles

React recommande d'utiliser des styles en ligne. Nous pouvons utiliser la syntaxe camelCase pour définir les styles en ligne. React ajoutera automatiquement 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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>php中文网 React 实例</title>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react.min.js"></script>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.min.js"></script>
    <script src="http://static.php.cn/assets/react/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      var myStyle = {
         fontSize: 100,
         color: '#FF0000'
      };
      ReactDOM.render(
      	<h1 style = {myStyle}>php中文网</h1>,
      	document.getElementById('example')
      );
    </script>
  </body>
</html>
<🎜>
Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Commentaires

Les commentaires doivent être écrit entre accolades, les exemples sont les suivants :

Instance

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>php中文网 React 实例</title>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react.min.js"></script>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.min.js"></script>
    <script src="http://static.php.cn/assets/react/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      ReactDOM.render(
      	<div>
            <h1>php中文网</h1>
            {/*注释...*/}
         </div>,
      	document.getElementById('example')
      );
    </script>
  </body>
</html>

Exécuter l'instance»

Cliquez sur le bouton "Exécuter Bouton "Instance" pour afficher l'instance en ligne

Array

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

Instance

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>php中文网 React 实例</title>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react.min.js"></script>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.min.js"></script>
    <script src="http://static.php.cn/assets/react/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      var arr = [
        <h1>php中文网</h1>,
        <h2> php中文网</h2>,
      ];
      ReactDOM.render(
        <div>{arr}</div>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

Exécuter l'instance»

Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne

Balise HTML vs composant React

React peut restituer des balises HTML (chaînes) ou des composants React (classes).

Pour afficher les balises HTML, utilisez simplement les noms de balises minuscules dans JSX. 

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

Pour restituer un composant React, créez simplement une variable locale commençant par une lettre majuscule. 

var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent someProperty={true} />;
ReactDOM.render(myElement, document.getElementById('example'));

Le JSX de React utilise des conventions majuscules et minuscules pour différencier les classes de composants natifs des balises HTML.

Remarque :

Étant donné que JSX est JavaScript, certains identifiants comme class et for ne sont pas recommandés en tant que XML Nom de la propriété. Au lieu de cela, React DOM utilise className et htmlFor pour les attributs correspondants.