Faire connaissance avec React

Qu’est-ce que React ?

Avant de plonger dans le fonctionnement concret de React, il est important de bien saisir son essence. Pourquoi choisir React pour développer des applications web ? Aux débuts du développement web avec JavaScript, et jusqu’à assez récemment en réalité, il était commun pour les développeurs de manipuler directement le DOM (Document Object Model, représentation de la structure d’une page web). Il était normal de programmer à la main des fonctions JavaScript qui faisaient apparaître des éléments HTML, les mettaient à jour, les manipulaient, et/ou les détruisaient. Une telle approche a certes permis au Web de fonctionner pendant près d’une vingtaine d’années, mais il est évident qu’avec l’essor d’applications web de plus en plus sophistiquées, de plus en plus robustes, et disposant de plus en plus de fonctionnalités, la manipulation directe du DOM posait de nombreux problèmes. Des bibliothèques comme jQuery servaient bien davantage de palliatifs que de réelles solutions à ces problèmes.

Ces problèmes sont, pêle-mêle, l’absence de séparation entre l’affichage et la logique interne, l’absence de réutilisabilité des composants (le concept n’existait pas)...

La syntaxe JSX/TSX

Pour la création de composants et d’interfaces déclaratives, React utilise un langage particulier : le JSX (pour JavaScript Syntax eXtension), ou sa variante TypeScript, le TSX (le terme JSX continuera d’être utilisé par la suite, y compris malgré l’utilisation de TypeScript). Comme son nom l’indique, le JSX est une extension du langage JavaScript qui permet d’insérer des éléments HTML directement au sein d’un code JavaScript. Toutefois, il est commun de ne pas séparer conceptuellement JavaScript et HTML dans ce cas : le JSX est bel et bien un langage à part entière même s’il ressemble à une fusion de HTML et JavaScript. Cette fusion lui vaut d’ailleurs d’être boudé par certains développeurs qui le considèrent plus « brouillon » que la manière de gérer des composants dans d’autres bibliothèques et frameworks tels qu’Angular, qui sépare strictement l’interface HTML du code JavaScript ou TypeScript. Et il est vrai que c’est à la fois la meilleure qualité et le meilleur défaut de React et JSX : si le JSX est relativement simple à prendre en main, il est bien plus difficile de le maîtriser et d’éviter de mauvaises pratiques de code (cf. chapitre Structurer...

Création d’un premier projet

Pour commencer à développer en React, les prérequis sont d’avoir Node.js et npm ou tout autre gestionnaire de packages (yarn, pnpm, etc.) installés sur le poste de développement. On peut vérifier leur installation en ouvrant l’invite de commande, via les commandes node -v et npm -v. Par défaut, nous utiliserons npm ici. Pour créer un premier projet, il existe deux possibilités. Traditionnellement, l’on utilisait l’utilitaire React CRA (Create React App) pour générer des applications React. Néanmoins cette approche est de moins en moins employée, au profit d’alternatives comme Vite, Parcel, etc. Il apparaît important de mentionner CRA brièvement car, même si l’on ne crée plus d’applications React via cet utilitaire, il peut arriver de devoir travailler sur des projets professionnels qui ont démarré en l’utilisant.