Lorsque React a été introduit pour la première fois, l’une des fonctionnalités qui a attiré l’attention de la plupart des gens (et a suscité le plus de critiques) était JSX. Si vous apprenez React, ou avez déjà vu des exemples de code, vous avez probablement fait une double prise sur la syntaxe. Quelle est cette étrange fusion de HTML et de JavaScript? Est-ce même du vrai code?

Voyons ce qu'est JSX, comment il fonctionne, et pourquoi diable nous voudrions mélanger HTML et JS en premier lieu!

Qu'est-ce que JSX?

] Défini par la documentation React comme une «extension de JavaScript» ou un «sucre de syntaxe pour appeler React.createElement (component, props, ... children)) «, JSX est ce qui facilite l'écriture de vos composants React .

JSX est considéré comme un langage spécifique au domaine (DSL) qui peut ressembler beaucoup à un langage modèle, tel que Moustache, Thymeleaf, Razor, Twig, ou autres.

Voici un exemple de sa syntaxe:

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

Ce qui vient après le signe égal n'est pas une chaîne ou du HTML, plutôt JSX. Il n’est pas rendu directement au HTML, mais à la place des classes React qui sont consommées par le DOM virtuel. Finalement, grâce à la magie mystérieuse du DOM virtuel, il arrivera sur la page et sera rendu en HTML.

Comment ça marche?

JSX est encore juste du JavaScript avec quelques fonctionnalités supplémentaires. Avec JSX, vous pouvez écrire du code qui ressemble beaucoup à HTML ou XML, mais vous avez le pouvoir de mélanger de manière transparente des méthodes et des variables JavaScript dans votre code. JSX est interprété par un transpilateur, tel que Babel et rendu en code JavaScript que l'interface utilisateur (React, dans ce cas) peut comprendre.

Remarque: vous pouvez utiliser le Babel REPL pour convertir l'un des exemples suivants en JavaScript standard.

Vous n'aimez pas JSX? C'est super. Ce n’est techniquement pas nécessaire, et la documentation React inclut en fait une section sur l’utilisation de React Without JSX . Permettez-moi de vous prévenir tout de suite, cependant, ce n’est pas joli. Tu ne me crois pas? Jetez un œil.

JSX:

 class   SitePoint   extend   Component   {
   render  ()   {
     return   (
       < div >  Mon nom est  < span >   { this .  props .  myName }  </  span >   </  div > [19659047]) 
  } 
} 

React Sans JSX:

 class   SitePoint   extend   Component   {
   render  ] ()   {
     return   React .  createElement  (
       "div" 
       null [19659065] "Je m'appelle" 
       React .  createElement  (
         "span" 
         null 
         this  ].  accessoires [19659009].  myName 
      ) 
    ) 
  } 
} 

Bien sûr, en regardant ces petits exemples de code sur cette page, vous pensez peut-être: "Oh, ce n'est pas le cas mauvais, je pourrais faire ça. Mais pourriez-vous imaginer écrire une application entière comme ça?

L'exemple est juste deux éléments HTML imbriqués simples, rien d'extraordinaire. En gros, juste un équivalent imbriqué Hello World . Essayer d'écrire votre application React sans JSX prendrait énormément de temps et, si vous êtes comme la plupart des autres développeurs ici travaillant en tant que personnages dans DevLand ™, cela se transformera très probablement rapidement en un désordre de code spaghetti alambiqué. Beurk!

Utiliser des frameworks et des bibliothèques et des choses comme ça sont censés nous rendre la vie plus facile, pas plus difficile. Je suis sûr que nous avons tous vu la surutilisation et l'abus des bibliothèques ou des frameworks dans nos carrières, mais utiliser JSX avec votre React n'est certainement pas l'un de ces cas.

Pourquoi utiliser JSX?

Il y a plusieurs raisons à cela. JSX est une bonne idée:

Il a une faible barrière à l'entrée . JSX est aussi proche du HTML et du CSS simples qu'il l'est actuellement. Avec JSX, vous pouvez facilement intégrer des éléments de JavaScript dans vos modèles sans avoir à apprendre un langage de modèle supplémentaire et à gérer des niveaux d'abstraction complexes. Toute personne familiarisée avec HTML, CSS et JavaScript ne devrait avoir aucun problème à lire et à comprendre les modèles JSX.

Support TypeScript . TypeScript prend en charge la compilation de fichiers TSX avec vérification de type. Cela signifie que, si vous faites une erreur dans le nom d'un élément ou d'un type d'attribut, la compilation échouera et vous verrez un message d'erreur indiquant votre erreur. Les IDE populaires tels que VS Code prennent également en charge les fichiers TSX et fournissent la complétion de code, la refactorisation et d'autres fonctionnalités utiles. JSX s'occupe des problèmes habituels de nettoyage des sorties pour empêcher les attaques telles que les scripts intersites.

Qu'en est-il d'une séparation des préoccupations?

Il y a une croyance répandue que le mélange de HTML et de JavaScript brise la séparation sacrée des préoccupations principe. Ce jugement suppose qu'il existe une séparation claire entre HTML – qui est responsable de la présentation – et JavaScript – qui est responsable de l'application et de la logique métier. Cependant, cette séparation est basée sur la technologie et non sur leurs préoccupations. JavaScript qui est responsable du rendu d'une liste d'éléments appartient toujours à la couche de présentation et doit être maintenu plus près du modèle que du reste de l'application.

En utilisant JavaScript, nous acceptons le fait que la bordure ne doit pas être dessinée entre HTML et JavaScript, mais plutôt entre logique de présentation et logique applicative, quels que soient les langages utilisés de part et d'autre. Se concentrer sur cela nous empêche de mélanger JavaScript de présentation et de logique métier, imposant ainsi la séparation des préoccupations, réduisant le couplage et améliorant la maintenabilité.

Utilisation de JSX avec React

Commençons par les bases. Comme mentionné précédemment, JSX doit être transpilé en JavaScript normal avant de pouvoir être rendu dans le navigateur. Par conséquent, si vous souhaitez suivre les exemples, vous devez avoir une application React déjà configurée.

Les exemples suivants sont tous accompagnés de démos CodePen exécutables donc si tout ce que vous voulez est d'avoir un jouer rapidement avec le code, cela pourrait être une bonne option pour vous.

Sinon, vous pouvez opter pour l'outil Create React App de Facebook. Pour l'utiliser, vous devez avoir installé Node et npm. Si vous ne l’avez pas fait, accédez à la page de téléchargement de Node.js et récupérez la dernière version de votre système (npm est fourni avec Node). Vous pouvez également consulter notre tutoriel sur l'installation de Node à l'aide d'un gestionnaire de version .

Une fois Node installé, vous pouvez créer une nouvelle application React comme ceci:

 npx create-react-app myapp

Cela créera un dossier myapp . Accédez à ce dossier et démarrez le serveur de développement comme suit:

  cd  myapp
 npm  début

Votre navigateur par défaut s'ouvrira et vous verrez votre nouvelle application React. Pour les besoins de ce didacticiel, vous pouvez utiliser le composant App qui se trouve dans src / App.js .

Passons maintenant au code.

Expressions de base

JSX est extrêmement similaire au HTML simple et utilise la même syntaxe basée sur XML. Voici l'exemple canonique «Hello, World» pour commencer:

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

 ReactDOM .  render  ( element   document .  getElementById  ( 'root' ) ) ; 

See the Pen
jsx-hello-world by SitePoint ( @SitePoint )
sur CodePen .

Notez comment l'élément

est utilisé directement dans le JavaScript normal. Il n'y a pas de guillemets autour, car ce n'est pas une chaîne, mais une expression de langage.

De même, vous pouvez utiliser JavaScript dans les balises JSX en les entourant de parenthèses:

 function   getGreeting  ([19659138] nom )   {
   return   ` Bonjour,  $ { nom } `  ; [19659049]} 

 const  element  =   < h1 >   { getGreeting  ( 'John'  ) }  </  h1 >  ; 

 ReactDOM .  render  ( element [19659122] document .  getElementById  ( 'root' ) ) ; 

See the Pen
jsx-hello-world-with- js par SitePoint ( @SitePoint )
sur CodePen .

Vous pouvez également utiliser JavaScript expressions lors de la spécification de valeurs d'attribut, comme la transmission d'un objet contenant des styles en ligne dans cet exemple. Ceci est utile lorsque vous souhaitez transmettre une valeur d'attribut dynamique:

 const  styles  =   {
  couleur :   'rouge' 
  fontStyle :   'italic' 
} 

 const  element  =   < h1   style  =  { styles }  >  Bonjour le monde!  </  h1 >  ; 

 ReactDOM .  render  ( element   document .  getElementById  ( 'root' ) ) ; 

Voir le stylo
jsx-hello-world-styled de SitePoint ( @SitePoint )
sur CodePen .

Remarque: si vous besoin de passer une liste dynamique d'attributs, vous pouvez utiliser l'opérateur de diffusion:

.

Bien sûr, comme avec le HTML normal, les éléments JSX peuvent contenir des enfants. Il peut s'agir de chaînes littérales, d'autres éléments ou d'expressions JavaScript:

 function   getGreeting  ()   {
   return   (
     < h2 [19659009]>  Bienvenue sur le site Web  </  h2 >  
  ) 
} 

 const  element  =   <  div > 
   < h1 >  Bonjour!  </  h1 > 
   { getGreeting  () }  
 </  div >  ; 

 ReactDOM .  render  ( element   document  ].  getElementById  ( 'root' ) ) ; 

See the Pen
jsx-children by SitePoint ( @ SitePoint )
on CodePen .

Déclarations conditionnelles

Le fait que vous puissiez incorporer des expressions JavaScript et transmettre des éléments JSX ouvre de nombreuses possibilités pour structurer votre code. Un cas d'utilisation fréquent est l'affichage conditionnel d'un élément à un utilisateur connecté – tel qu'un message personnalisé – ou une erreur de validation. JSX ne prend pas en charge les instructions standard if mais vous pouvez utiliser l'opérateur ternaire :

 const  logIn  =   true ; [19659148] const  élément  =   < div > 
   < h1 >  Bonjour!  </  h1 > 
   < h2 > 
     { ( connecté )  ?   "Bienvenue à nouveau"  :   "Ravi de vous rencontrer" }  
   </  h2 > 
 </  div >  ; 

 ReactDOM .  render  ( element   document  ].  getElementById  ( 'root' ) ) ; 

See the Pen
jsx-conditionitional-example by SitePoint ( ] @SitePoint )
sur CodePen .

Une expression peut renvoyer false true null ou undefined pour éviter le rendu d'un élément. Le renvoi de valeurs fausses, telles que 0 ou une chaîne vide, restituera l'élément:

 const  error  =   true ; 

 const  élément  =   < div > 
   < étiquette > 
    Nom:
     < entrée   /> 
     { error ?   < div   style  =  { { color :   'red' } }  >  Nom invalide  </  div >   :   null }  
   </  étiquette > 
 </  div >  ; 

 ReactDOM .  render  ( element   document  ].  getElementById  ( 'root' ) ) ; 

See the Pen
jsx-conditional-display de SitePoint ( ] @SitePoint )
sur CodePen .

Notez les doubles accolades utilisées dans l'attribut style . Voici la syntaxe pour passer un objet en ligne comme valeur: la paire extérieure désigne l'expression et la paire intérieure est l'objet lui-même.

Dans l'extrait ci-dessus, nous voyons ceci:

 { error ?   < div   style  =  { { color :   'red' } }  >  Nom invalide  </  div >   :   null } 

Ceci peut être raccourci encore plus, à ceci:

 { error  &&   < div   style  =  { { color :   'red' } }  >  Nom invalide  </  div >  } 

Cela fonctionne parce que dans JavaScript, true && expression s'évalue toujours à expression et false && expression toujours s donne la valeur faux .

Mais bien que ce modèle soit assez courant n’oubliez pas la lisibilité . Respectez les conventions de code convenues et comprises par votre équipe. N'en faites pas trop avec l'imbrication de constructions conditionnelles. Souvent, les gens placent un opérateur ternaire dans un autre pour enregistrer quelques lignes de code au détriment de la lisibilité. Refactoriser ce code en extrayant des blocs dans des variables ou des fonctions séparées.

Boucles

Un autre cas d'utilisation fréquent est de rendre une liste d'éléments répétitifs. Avec JSX, vous ne pouvez pas utiliser pour les boucles mais vous pouvez parcourir un tableau en utilisant la méthode array map () . Par exemple, voici une manière simple d'afficher une liste d'articles:

 const  items  =   [
   'Bread' 
   'Milk' 
   'Eggs' 
] 

 const  element  =   < div > 
  Liste d'épicerie:
   < ul > 
     { éléments .  carte  ( élément   =>   < li >   { élément }  </  li >  ) }  
   </  ul > 
 </  div >  ; 

 ReactDOM .  render  ( element   document  ].  getElementById  ( 'root' ) ) ; 

See the Pen
jsx-map by SitePoint ( @ SitePoint )
sur CodePen .

De toute évidence, vous pouvez également utiliser d'autres méthodes de tableau dans le code, et il peut être tentant de glisser dans une logique de filtrage ou autre calculs. Ne cédez pas à ça! Souvenez-vous du principe de séparation des préoccupations et séparez cette logique du code de rendu. Cela rendra votre code plus facile à lire, à comprendre et à tester.

Composants personnalisés

Les deux sections à venir sont plus spécifiques à React, mais cela vaut toujours la peine de les parcourir pour bien comprendre comment tout s'emboîte.

Les exemples de code précédents sont extrêmement simplistes, car ils ne rendent qu'un petit ensemble d'éléments HTML standard. En réalité, votre application sera constituée de composants personnalisés qui contiendront la vue et la logique propres à votre application. React vous permet de définir des composants personnalisés et de les utiliser dans le balisage en tant qu'éléments HTML normaux. Un élément personnalisé peut être défini comme une fonction ou une classe ES6.

Remarque: selon les conventions de dénomination de React, les éléments personnalisés doivent commencer par une majuscule, pour les distinguer des éléments standard. [19659007] function FunctionComponent () {
return < h2 > Ceci est un composant de fonction. [19659011] </ h2 >
}

class ClassComponent extend React . Component {
render () {
return < h2 > Ceci est un composant de classe. </ h2 >
}
}

const element = < div >
< FunctionComponent />
< ClassComponent />
</ div > ;

ReactDOM . render ( element document ]. getElementById ( 'root' ) ) ;

See the Pen
jsx-custom-components by SitePoint ( ] @SitePoint )
sur CodePen .

Gestion des événements

JSX fournit un moyen de lier des événements similaires au HTML normal. Vous pouvez définir une propriété sur un élément (les mêmes noms de propriété que pour le HTML normal mais camelCased) et passer une fonction comme valeur. Dans React, la fonction de rappel recevra un objet SyntheticEvent comme premier paramètre, qui est une abstraction au-dessus de l'objet événement normal du navigateur:

 function   handleEvent  ( e )   {
   alert  ( 'Button clicked!' ) ; 
   console .  log  ( e ) ; 
} 

 const  element  =   < button   onClick  =  { handleEvent }  >  Test clic  </  bouton >  ; 

 ReactDOM .  render [19659009] ( élément   document .  getElementById  ( 'root' ) ) ; 

Voir le Pen
jsx-events par SitePoint ( @SitePoint )
sur CodePe n .

Remarque: faites attention à la valeur de this lors du passage des gestionnaires d'événements. Lorsque vous définissez votre composant en tant que classe ES6, vous définissez généralement les gestionnaires d'événements en tant que méthodes de la classe. Les méthodes passées par valeur ne sont pas liées à une valeur spécifique de cette donc pour conserver le contexte actuel, vous devez les lier explicitement. Voir la documentation de React pour plus de détails sur la façon de procéder.

Pas seulement pour React

JSX avec React est assez bien. Mais que se passe-t-il si vous utilisez un autre framework ou une autre bibliothèque, mais que vous souhaitez toujours l'utiliser? Eh bien, vous avez de la chance, car JSX n’est pas techniquement lié à React. Il ne s’agit toujours que de DSL ou de «sucre de syntaxe», vous vous souvenez? Voici quelques autres projets utilisant JSX:

• Vous pouvez utiliser JSX dans la fonction render de Vue à l'aide du préréglage @ vue / babel-preset-jsx Babel.
• ] Certains autres frameworks qui se positionnent comme des alternatives minimalistes compatibles React comme Preact Inferno ou Hyperapp utilisent JSX pour leur couche de rendu.
• ] MDX vous permet d'utiliser JSX dans des fichiers Markdown pour ajouter des éléments JS interactifs.

J'espère que cette introduction à JSX vous a aidé à mieux comprendre ce qu'est JSX, comment il peut vous aider et comment il peut être utilisé pour créer vos applications. Maintenant, reviens là-bas et fabrique des trucs sympas!