Démarrer avec React

06/08/20 dannyEnglish Version

Qu’allons nous faire ?

Nous allons réaliser un projet avec la librairie React version 16.13.1


Avant de commencer

React est une bibliothèque JavaScript libre développée par Facebook.

Les versions successives ont été les suivantes :

  • React est sortie le 29 mai 2013
  • React 0.3.0 est sortie le 2 juillet 2013
  • React 0.13.0 est sortie le 19 avril 2015
  • React 0.14.0 est sortie le 9 octobre 2015
  • React 15.0.0 est sortie le 8 avril 2016
  • React 16.0.0 est sortie le 26 septembre 2017
  • React 16.13.1 est sortie le 19 mars 2020

Conditions préalables

Les outils nécessaires pour réaliser ce didacticiel sont

  • React version 16.13.1
  • Visual studio code version 1.49.1
  • node.js version 12.18.3 LTS (Long Term Support)
  • npm (node package manager) version 6.14.8

Les dernières versions de ces outils sont disponibles ci-dessous


Initialisation du projet

La documentation React est accessible sur le site officiel
Nous essaierons le plus souvent possible de respecter les best practices préconisées par l'équipe de Facebook.

La création de projet est détaillée à l'adresse suivante
https://reactjs.org/docs/create-a-new-react-app.html#create-react-app

Nous utiliserons un package runner npx

# Générer un projet appelé react-starter 
npx create-react-app react-starter

# Se positionner dans le projet
cd react-starter

# Exécuter
npm start

La commande npm start éxécute le script react-scripts contenu dans le fichier package.json.

Cette commande éxécute le projet sur un port par défaut (3000)

Il ne reste qu'à tester le fonctionnement dans un navigateur en lancant l'url suivante.

# Tester
http://localhost:3000/

Visual studio code

Dans la suite du tutoriel nous utiliserons Visual Studio Code.
VS code est un éditeur de code développé par Microsoft pour Windows, Linux et OS X.

Après avoir lancer VS code ouvrez un dossier dans le répertoire react-starter.

Ouvrez ensuite le fichier package.json.
Celui-ci contient un certain nombre de commandes (ou scripts) que nous utiliserons tout au long de ce tutoriel.

Ouvrez une console VS code (sélectionner Afficher/Terminal) pour éxécuter les scripts suivants

  • npm run  start : Execute l'application en mode développement
  • npm run  build : Compile l'application dans le répertoire build
  • npm run  test : Execute les tests unitaires

En mode développement si nous voulons personnaliser le port il suffit de modifier le script start dans le fichier package.json.

Par exemple pour utiliser le port 3001 le script serait le suivant dans le fichier package.json
"start": "cross-env PORT=3001 react-scripts start",

En prenant soin d'installer au préalable la librairie cross-env si nécessaire.
npm install -g cross-env

package.json
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

Mise à jour

Le fichier package.json contient les différentes dépendances de votre projet.

Concernant les dépendances et leur version la documentation npm est la suivante
https://docs.npmjs.com/files/package.json#dependencies

Les spécificateurs de version sont nombreux.

Nous pouvons utiliser par exemple

  • version Doit correspondre à la version exactement
  • ~version  "Approximativement équivalente à la version"
  • ^version “Compatible avec la version”


Nous obterons quant à nous pour le premier spécificateur "version", qui est le plus simple, le plus explicite mais aussi le plus restrictif.

Nous allons mettre à jour le fichier package json avec les dernières dépendances

- Pour contrôler les dépendances à mettre à jour lancer la commande
npm outdated 

- A ce jour toutes les dépendances peuvent être mises à jour

- Modifier le fichier package.json comme suit puis executer le script
npm install

package.json
  "dependencies": {
    "@testing-library/jest-dom": "5.11.4",
    "@testing-library/react": "11.0.4",
    "@testing-library/user-event": "12.1.6",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-scripts": "3.4.3"
  },

Conclusion

Il ne reste plus qu'à effectuer le debuggage, les tests et le passage en production.

Commencons par le debugage.
Toutes les modifications entrainent une recompilation du code.

# Exécuter
npm run start

# Tester
http://localhost:3000/

Par exemple Modifier le fichier app.js
Compilation Tests : Edit <code>src/App.js</code> and save to reload.


La compilation est alors éxécutée automatiquement et le navigateur se réactualise.

Les tests à effectuer sont les suivants.

# Tester
npm run test

Enfin la compilation et la mise en production.

# Production
npm run build

# Tester
http-server -p 8080 -c-1 build
http://localhost:8080/

Commande eject

Le fichier package.json contient un script particulier.

  • npm run eject

Cette commande éxécute le script react-scripts eject

Elle est destinée aux développeurs expérimentés.
Elle va générer automatiquement un certain nombre de fichiers.
Ces fichiers permettront de personnaliser certains aspects du développement react.

Les fichiers créés seront

  • script/build.js
  • script/start.js
  • script/test.js

Enfin le fichier package.json sera aussi modifié profondément.

Cette commande est à utiliser avec précaution, un retour à l'état précédent n'étant pas possible.

Comment créer une application From scratch ?

Créez votre compte ganatan

Téléchargez gratuitement vos 4 guides complets

Démarrez avec angular CLI

Gérez le routing

Appliquez le Lazy loading

Intégrez Bootstrap

Ganatan site Web avec Angular