ReactJS - JSX

React utilise JSX pour la création de modèles au lieu de JavaScript standard. Il n'est pas nécessaire de l'utiliser, cependant, voici quelques avantages qui l'accompagnent.

• Il est plus rapide car il effectue une optimisation lors de la compilation du code en JavaScript.

• Il est également de type sécurisé et la plupart des erreurs peuvent être détectées lors de la compilation.

• Il est plus facile et plus rapide d'écrire des modèles, si vous êtes familier avec HTML.

Utilisation de JSX

JSX ressemble à un HTML normal dans la plupart des cas. Nous l'avons déjà utilisé dans le chapitre Configuration de l'environnement. Regardez le code deApp.jsx où nous retournons div.

App.jsx

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            Hello World!!!
         </div>
      );
   }
}
export default App;

Même s'il est similaire au HTML, il y a deux choses que nous devons garder à l'esprit lorsque vous travaillez avec JSX.

Éléments imbriqués

Si nous voulons retourner plus d'éléments, nous devons l'envelopper avec un élément conteneur. Remarquez comment nous utilisonsdiv comme emballage pour h1, h2 et p éléments.

App.jsx

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>Header</h1>
            <h2>Content</h2>
            <p>This is the content!!!</p>
         </div>
      );
   }
}
export default App;

Les attributs

Nous pouvons utiliser nos propres attributs personnalisés en plus des propriétés et attributs HTML normaux. Lorsque nous voulons ajouter un attribut personnalisé, nous devons utiliserdata-préfixe. Dans l'exemple suivant, nous avons ajoutédata-myattribute comme attribut de p élément.

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>Header</h1>
            <h2>Content</h2>
            <p data-myattribute = "somevalue">This is the content!!!</p>
         </div>
      );
   }
}
export default App;

Expressions JavaScript

Les expressions JavaScript peuvent être utilisées à l'intérieur de JSX. Nous avons juste besoin de l'envelopper avec des accolades{}. L'exemple suivant rendra2.

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>{1+1}</h1>
         </div>
      );
   }
}
export default App;

Nous ne pouvons pas utiliser if else instructions dans JSX, à la place, nous pouvons utiliser conditional (ternary)expressions. Dans l'exemple suivant, variablei égale à 1 donc le navigateur rendra true, Si nous le changeons en une autre valeur, il rendra false.

import React from 'react';

class App extends React.Component {
   render() {
      var i = 1;
      return (
         <div>
            <h1>{i == 1 ? 'True!' : 'False'}</h1>
         </div>
      );
   }
}
export default App;

Coiffant

React recommande d'utiliser des styles en ligne. Lorsque nous voulons définir des styles en ligne, nous devons utilisercamelCasesyntaxe. React ajoutera également automatiquementpxaprès la valeur numérique sur des éléments spécifiques. L'exemple suivant montre comment ajoutermyStyle en ligne à h1 élément.

import React from 'react';

class App extends React.Component {
   render() {
      var myStyle = {
         fontSize: 100,
         color: '#FF0000'
      }
      return (
         <div>
            <h1 style = {myStyle}>Header</h1>
         </div>
      );
   }
}
export default App;

commentaires

Lors de la rédaction de commentaires, nous devons mettre des accolades {}lorsque nous voulons écrire un commentaire dans la section enfants d'une balise. C'est une bonne pratique de toujours utiliser{} lors de l'écriture de commentaires, car nous voulons être cohérents lors de l'écriture de l'application.

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>Header</h1>
            {//End of the line Comment...}
            {/*Multi line comment...*/}
         </div>
      );
   }
}
export default App;

Convention de dénomination

Les balises HTML utilisent toujours lowercase noms de balises, tandis que les composants React commencent par Uppercase.

Note - Vous devriez utiliser className et htmlFor comme noms d'attributs XML au lieu de class et for.

Ceci est expliqué sur la page officielle de React comme -

Puisque JSX est JavaScript, des identifiants tels que class et forsont déconseillés en tant que noms d'attributs XML. Au lieu de cela, les composants DOM de React attendent des noms de propriétés DOM tels queclassName et htmlFor, respectivement.