seance4 1 cours 631b2e9514e4b

<script type="text/babel"> var p = <p>Hello React</p>; // Code JSX console.log(p); // Affichage dans la console de l’élément React ReactDOM.render(p, document.getElementById("app")); </script> </html>

correspond à l’interpréteur qui traduira le code JSX en code JavaScript), puis on indique quelle partie du code JavaScript est à interpréter par Babel. Pour cela, on inclut l’attribut type="text/babel" dans la balise <script> contenant notre code JavaScript (et JSX).

Le code JavaScript permettant la création des éléments React est écrit en JSX (et sera traduit en JavaScript pur par Babel), tandis que les éléments React ainsi créés seront insérés dans la page HTML au moyen de l’instruction ReactDOM.render().

L’affichage correspond au paragraphe contenant "Hello React", tandis que l’onglet React de la fenêtre des outils de développement montre l’élément React créé suite à la transformation du code JSX par Babel.

Remarquons que l’inclusion de Babel pour interpréter le code JSX ralentit le programme, vu qu’une étape de traduction est nécessaire avant d’exécuter le code JavaScript. Par conséquent, l’utilisation de Babel ne peut être viable que dans le cadre de l’écriture du programme (en mode développement). Cet outil ne peut pas être utilisé dans le cadre d’un déploiement (mode production). Dans ce dernier cas, on utilisera d’autres outils tels que Webpack pour créer un package plus compact.

Le code JSX est facile à lire et à écrire. Il s’écrit comme du code HTML, mais il est saisi dans la partie réservée au code JavaScript (dans la balise <script>). Une même instruction peut s’écrire sur plusieurs lignes et doit obligatoirement commencer par une balise ouvrante et se terminer par balise fermante (ici, <ul> et </ul>).

Ajouts d’attributs dans le code JSX Le code JSX comporte les éléments qui seront affichés dans la page HTML. Ces éléments peuvent avoir des attributs tels que id, style ou className (l’attribut class est remplacé par l’attribut className).

Commençons par ajouter les attributs id et className. Pour cela, on définit la classe CSS red dans la balise <style> de la page. <style type="text/css"> .red { color : red;

La liste définie par <ul> possède bien l’id "list1", tandis que la classe CSS red est bien définie sur la liste (les éléments de liste sont de couleur rouge).