JSX (JavaScript eXtended)

Liens_Web:

Definission de JSX

Le JSX est l’encapsulation d’un pseudo HTML dans du Javascript. cela permet donc de simplifier l’écriture. C’est ce que l’on appel du « sucre syntaxique ».

On écris le html directement dans le code JavaScript, ce qui nous permet d’y inclure directement des composants React.

 1 //Expression en JSX
 2 const element = (
 3     <h1 className="greeting">
 4         Je s'appel Groot !
 5     </h1>
 6 );
 7
 8 //Expression en REACT
 9 const element = React.createlement(
10     'h1',
11     {className: 'greeting'},
12     'Je s'appelle Groot !'
13 );

Ces deux expressions sont équivlente.

Il est possible d’ajouter des commentaire dans une expression JSX. Les commentaire s’écrivent comme pour le JavaScript mais entourés d’accolades.

1 const element = (
2     <h1>
3         {/* un super commentaire bien pertinent */}
4         Je s'appelle Groot !
5     </h1>
6 );

Interpréter le JSX dans un navigateur

Le JSX n’est pas nativement interpréter par les navigateurs. Pour interpréter le JSX dans le navigateur, il faut le prévoir dans le HTML en ajoutant une la bibliothèque « Babel » au moyen de la balise <src= »… »>. Il faut également inclure l’attribut type= »text/babel » dans la balise script contenant le JSX.

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <!-- CDN React - Development -->
 6         <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
 7         <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
 8
 9         <!-- imort de Babel (Dev uniquement) -->
10         <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
11     </head>
12     <body>
13         <div id="app"></div>
14     </body>
15
16     <!-- Balise 'script' avec l'option 'text/babel -->
17     <script type="text/babel">
18         const element = (
19             <h1>
20                 Je s'appel Groot !
21             </h1>
22         );
23         ReactDOM.render(element, document.getElementById("app"));
24     </script>
25 </html>

Avertissement

L’inclusion de Babel pour interpréter le JSX ralentie le programme. En effet, cela ajoute une étape de traduction supplémentaire au processus.

L’inclusion de Babel est donc a reserver à la phase de Developpement. En phase de production on utilisera d’autres outils tel que Webpack pour créer un package.

Details syntaxique

  • Le mot clef “class” habituellement utilisé dans le html ne peut pas être utilisé en JSX car c’est égallement un mot clef utilisé en Javascript. Dans les expressions JSX, ce mot clef est remplacé par « className ».

  • Les mots clefs composés (séparé par « _ ») utilisés en CSS sont systématiquement remplacé par le formatage en lowerCamelCase

  • JSX (et donc React) considère les composants commençant par des lettres minuscules comme des balises DOM. Par exemple, <div /> représente une balise HTML div, mais <Welcome /> représente un composant, et exige que l’identifiant Welcome existe dans la portée courante.

  • Toutes les balises auto-fermantes doivent être fermées avec « / » avant le « > »

    1 <!-- Balise auto-fermantes en HTML -->
2 <input type="text">
3
4 <!-- Balise auto-fermantes en JSX -->
5 <input type="text" />

  • Le JSX n’accepte de retourner qu’un seule élément parent à la fois

     1 // Code en erreur
 2 import React, { Component } from 'react'
 3
 4 class App extends Component {
 5     render() {
 6         return (
 7             {/* Premier composant parent */}
 8             <div>
 9                 <h1>Je s'appelle Groot !<h1/>
10             <div/>
11
12             {/* Second composant parent (Interdit !) */}
13             <h2>Je s'appelle Pierre<h2/>
14         )
15     }
16
17 export default App

Pour eviter ce problème, on import « Fragment » depuis React et on entoure le JSX d’une balise « <Fragment></Fragment> »

 1 // Code valide
 2 import React, { Component, Fragment } from 'react'
 3
 4 class App extends Component {
 5     render() {
 6         return (
 7             <Fragment>
 8                 {/* Premier composant parent */}
 9                 <div>
10                     <h1>Je s'appelle Groot !<h1/>
11                 <div/>
12
13                 {/* Second composant parent (Interdit !) */}
14                 <h2>Je s'appelle Pierre<h2/>
15             </Fragment>
16         )
17     }
18
19 export default App