Editions ENI Livres | Vidéos | e-Formations
Bien démarrer avec React
Notions essentielles de JavaScript
Le langage JavaScript a beaucoup évolué et ne se limite plus simplement aux navigateurs. Nous allons voir dans cette section les éléments utilisés fréquemment dans le contexte d’une application React.
Nous n’allons pas couvrir l’ensemble du langage, mais insister sur les points importants. Ce chapitre se veut théorique avec quelques exemples qui vont permettre de comprendre le fonctionnement de React, de JavaScript et du navigateur.
Il est important de préciser que cette section peut constituer un rappel ou une introduction aux concepts importants de JavaScript, mais ne suffira pas si vous n’avez jamais pratiqué le langage avant. Dans ce cas, il peut être intéressant de commencer par une vraie introduction à JavaScript afin de maîtriser rapidement React.
1. Le DOM (Document Object Model)
Cette notion importante s’applique dans l’environnement d’un navigateur web. Le DOM est l’interface de programmation qui permet de modifier un document web. Il s’agit d’un arbre dans lequel nous retrouvons les éléments présents dans une page. Chaque élément de cet arbre est un nœud, nous parlons également de DOM tree. Le nœud racine dans le contexte d’une page web est la balise <html> et elle possède deux enfants directs <head> et <body>.
Le DOM n’est pas le sujet principal de cet ouvrage. Cependant, vous avez besoin de savoir utiliser les méthodes de base pour suivre aisément. Plus vous saurez comment fonctionne le DOM et mieux vous comprendrez ce que fait React.
Le DOM nous permet d’interagir avec les éléments d’une page web grâce à son API. Vous pouvez sélectionner tous les liens présents dans une page de cette manière :
document.querySelectorAll('a') //Renvoie tous les nœuds <a> Manipuler directement le DOM peut s’avérer fastidieux lorsque vous avez beaucoup d’éléments à modifier et qu’il faut synchroniser le tout avec une source de données. De nos jours, quand un framework ou une librairie web est utilisé, il permet bien souvent de s’abstraire de ce travail de modification et de synchronisation du DOM. Il n’est plus...
Prérequis, concepts et outils pour développer
1. Installation des outils nécessaires
a. NodeJS
NodeJS, avec son gestionnaire de paquet npm (Node Package Manager), va nous permettre de faire tourner justement tous les autres outils qui vont servir à développer. C’est la brique de base que toutes les librairies installées vont utiliser, notamment lorsque nous mettrons en place les outils de build.
Il est préférable d’avoir au minimum la version 14. Il faut se rendre sur https://nodejs.org qui est le site officiel. Sur la page d’accueil, il suffira de télécharger la dernière version stable (LTS) correspondant à votre système d’exploitation. Il s’agit de la 18.13 à ce jour. npm sera installé avec node.
b. Éditeur
Il faudra un éditeur de code, le plus répandu dans la communauté du développement frontend est VSCode. Cela s’explique par le nombre important d’extensions dont certaines seront présentées dans ce livre. Ce n’est évidemment pas imposé, vous pouvez choisir l’éditeur de votre choix, il est important de se sentir à l’aise et de maîtriser son outil. Si vous préférez un environnement de développement « intégré », WebStorm est une possibilité, dont la licence...
Une application basique
1. Le minimum de code pour une application React
Avant de plonger dans une configuration plus avancée, il convient de résumer ce dont nous avons besoin pour développer le frontend. D’abord, un document web, commençons avec un simple fichier HTML.
Dans les exemples de code fourni, vous pouvez ouvrir le dossier 01-premiere-page-react. Afin de gagner du temps, ouvrez ce dossier directement dans VSCode ou l’éditeur de votre choix. Vous constaterez aussi la présence d’un fichier CSS, les styles étant fournis avec les exemples. Mais ne vous en préoccupez pas, le but est de se concentrer sur React.
La librairie React se résume à un seul fichier JavaScript qui peut être importé dans n’importe quel document HTML à l’aide de la balise <script>. Ce fichier à lui seul ne suffira pas dans le contexte d’un navigateur web, car il n’embarque pas les fonctionnalités de modification du DOM. Il convient donc de charger une seconde librairie appelée ReactDOM.
<script src="https://unpkg.com/react@18.2.0/umd/react.development.js">
</script>
<script src="https://unpkg.com/react-dom@18.2.0/umd/
react-dom.development.js"></script> Le site unpkg.com est un service de distribution de paquets pour les développeurs web. Il permet de servir directement...
Environnement de développement
1. Introduction au JSX
JSX est une extension de la syntaxe du langage JavaScript. Très utilisée en React, elle permet de décrire la structure de l’interface utilisateur avec une syntaxe qui ressemble à du HTML. Voici un exemple simple d’un composant React écrit avec JSX :
function Bonjour() {
return <h1>Bonjour !</h1>;
} Dans cet exemple, <h1>Bonjour !</h1> est une expression JSX qui décrit un élément HTML h1.
Le contenu JSX peut être stocké dans une variable ou même renvoyé depuis une fonction. Ce sujet est développé dans le chapitre Découvrir le JSX.
Un des avantages de l’utilisation de JSX est que le code React est plus lisible et expressif qu’avec des createElement. Notons que, pour que le code JSX soit interprété par les navigateurs, il doit être transformé en appel de fonction JavaScript standard, souvent via des bundlers comme Webpack ou des compilateurs comme Babel. Dans le cas de React, le JSX est transformé en appels React.createElement, pour créer la représentation de l’élément du DOM en JavaScript. Voici à quoi ressemblerait la transformation de notre exemple :
function Bonjour() {
return React.createElement('h1', null, 'Bonjour !');
} 2. Initialisation d’un projet avec Vite
Désormais, nous allons utiliser un outil qui facilitera le processus de développement. Tout d’abord, assurez-vous d’avoir installé Node.js et npm votre machine. Il existe plusieurs solutions pour créer un projet, mais pendant longtemps, dans la documentation de React, il était recommandé d’utiliser Create React App (https://github.com/facebook/create-react-app). Cet outil permet...
