Introduction | smnarnold

React est une librairie développée par Facebook permettant de construire plus efficacement des interfaces utilisateurs interactives grâce au principe de "two-way binding". Autrement dit, dès qu’une donnée stockée dans une variable change, React se charge d’aller la mettre à jour partout où elle est affichée.

Qui l'utilise?

Prérequis

Avant se lancer dans React, assurez-vous d'avoir une bonne compréhension des notions JavaScript suivantes:

Puisqu'elles sont utilisées régulièrement avec React.

Installation via CDN

Comme pour toute librairie, afin d'avoir accès à ses fonctionnalités, il est nécessaire de l'inclure dans son projet. Le CDN est probablement la méthode la plus simple. Particulièrement via le site unpkg, en incluant les librairies React, ainsi que React DOM:

https://unpkg.com/browse/react@18.2.0/umd/react.development.js
https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js

Installation via npm

Il est aussi possible de télécharger ces librairies via npm avec les commandes suivantes:

npm i react
npm i react-dom

et des les importer dans le projet ainsi:

import { useState } from 'react';
import { createRoot } from 'react-dom/client';

npx create-react-app

L'option la plus confortable et efficace consiste à générer un environnement de développement via npx et le create-react-app.

Par exemple, pour créer une app React intitulée "mon-app", il est possible de simplement rouler la commande suivante:

npx create-react-app mon-app

Cette commande démarrera un générateur effectuant différentes tâches afin de sauver du temps au concepteur:

Créer un dossier 📁 correspondant au nom attribué à votre app (mon-app).
Rouler la commande npm init.
Télécharger via npm les paquets React mentionnés plus haut, ainsi que plusieurs autres paquets utiles au développement d'une app React.
Créer une arborescence de dossiers et de fichiers de base (HTML, CSS, JS).
Créer des commandes npm de base pour simplifier la vie du concepteur.
Etc.

Une fois l'app créée, le concepteur doit se déplacer à l'intérieur du dossier de celle-ci via la commande:

cd mon-app

Afin d'avoir accès aux commandes qui ont été générées.

Développement

Pour commencer le développement, il suffit à partir du dossier du projet de rouler la commande:

npm start

Ci cette commande est effectuée correctement, le navigateur devrait ouvrir un nouvel onglet affichant la page générique de l'app React qui vient d'être créée.

Remarquez comment cet onglet se rafraîchit dès qu'un changement est effectué au code, tout comme le fait CodePen. Ce comportement est appelé "Hot reloading" et a été mis en place par la commande create-react-app afin de simplifier le développement de l'app.

Optimisation

Afin d'optimiser la performance d'une application avant de la déployer en ligne, il est possible de rouler la commande:

npm run build

Celle-ci compresse et minifie tous les fichiers du projet (réduisant ainsi leur poids, ce qui augmentera leur vitesse de chargement) et les exporte dans un dossier intitulé "build" 📁. Il ne reste qu'à déposer le contenu du dossier sur le serveur.

create-react-app