JavaScript, langage permettant des interactions faciles entre une page web et l’utilisateur, a connu diverses évolutions ces dernières années, dont la plus significative est celle de la version ES6 (abréviation de « ECMAScript 6 »). Cette nouvelle version concerne particulièrement :
•les variables : déclaration, portée et mise en forme dans les chaînes de caractères ;
•les fonctions : paramètres par défaut, nouvelle forme de déclaration des fonctions ;
•les objets et les tableaux : déstructuration et opérateur… ;
•les classes d’objets : création et dérivation ;
•les promesses : utilisation du processus asynchrone ;
•les modules : pour mieux structurer le code JavaScript.
React utilise de façon intensive ces nouveaux éléments. Ils seront détaillés dans les paragraphes suivants afin d’écrire et comprendre plus facilement le code React qui sera utilisé dans ce livre.
Quel éditeur de code utiliser ?
Vous pouvez utiliser n’importe quel éditeur de code, et si vous n’avez pas encore fait votre choix, nous vous conseillons d’utiliser Visual Studio Code (gratuit et maintenu par Microsoft).
Dans la suite du chapitre, nous utiliserons un fichier index.html qui contiendra le code JavaScript utilisé (au moyen de balises <script>). La structure de ce fichier est la suivante.
Fichier index.html
<html>
<head>
</head>
<body>
</body>
<script>
// Ici, le code JavaScript
// ...
</script>
</html>
Pour exécuter ce fichier HTML, vous disposez de deux méthodes :
•le sélectionner dans le gestionnaire de fichiers et le faire glisser dans la fenêtre d’un navigateur ;
•saisir l’URL http://localhost/react dans la barre d’adresses du navigateur, en supposant que vous avez au préalable lancé un serveur (PHP, Node.js, J2EE, etc.) et déposé le fichier index.html dans le répertoire react du serveur.
Dans ce chapitre, nous utilisons la première méthode.
Bien sûr, ce fichier ne contenant aucune ligne de code pour l’instant, son exécution produit une page blanche à l’écran.
Le mot-clé const permet de définir une constante qui, par définition, ne pourra plus être modifiée. En cas de modification par le programme, une erreur JavaScript est provoquée.
Écrivons le code suivant dans le fichier index.html, dans la partie réservée (balise <script>).
Utilisation de const
const nom = "Sarrion";
console.log(nom);
nom = "Martin"; // Erreur
La modification de la constante nom provoque une erreur que l’on peut voir dans un navigateur, par exemple Chrome (figure 1-1), ...
