React sans create-react-app

L’objectif de cet article est de créer une application React sans create-react-app et de comprendre ainsi les processus qui entrent en jeu dans la création d’une telle application en utilisant JSX, Babel, Webpack et les autres outils, langages, plugins etc…

Une plage avec des petits bateaux en Thailande et les textes React, Webpack, Babel et JSX

Babel est un transcompilateur Javascript Open Source et est principalement utilisé pour convertir le code ECMAScript 2015+ (ES6+) en une version compatible avec les moteurs Javascript plus anciens, donc pouvant être lancés dans les navigateurs Web.

Webpack est un bundler (groupeur) permettant d’utiliser un serveur local, utiliser le Live Reload, mais aussi et surtout compiler tous les fichiers javascript en un seul. Pratique notamment pour la performance de l’application.

JSX est une extension du langage javascript permettant de définir des éléments React à la manière du XHTML.

On vérifie que Node et npm sont installés :

On utilisera yarn que l’on installe globalement avec sudo, yarn accélère grandement les processus npm :

Initialisation

On crée un dossier pour le projet. Je l’appelle mib-colors, et l’on s’y dirige, on initialise avec yarn.

Cela crée un fichier package.json :

Installation de React, Webpack et Babel

On installe plusieurs packages pour fonctionner : Babel pour le jsx et webpack pour gérer la transpilation et l’environnement.

Un compilateur source à source, transpileur ou transcompilateur est un type de compilateur qui prend le code source d’un langage de programmation et le compile dans un autre langage de programmation. Un transpileur opère sur deux langages avec le même niveau d’abstraction, alors qu’un compilateur traditionnel compile un langage de haut niveau vers un langage de bas niveau.

On installe ces modules avec yarn. L’instruction add permet d’ajouter des packages. L’option -D permet de partitionner les dépendances entre le développement et la production. Les dépendances installées avec ce paramètre ne sont pas incluses pour la production. On installe tout pour le développement. Une fois l’application construite, elle fonctionnera dans un navigateur, en l’incluant de façon habituelle pour un fichier javascript.

Ces commandes créent un dossier node_modules contenant les différents fichiers des modules et des dépendances. Après la commande, on obtient un arbre des ces modules :

Le fichier package.json devient :

Résolution des problèmes d’installation

fsevents

fsevents est une dépendance facultative. Cette dépendance n’est nécessaire que si l’on utilise LedgerSubprovider dans un environnement Node et n’est pas pris en charge dans Linux sans dépendances supplémentaires. On peut ignorer cet avertissement.

webpack-dev-server

Il y a un souci de compatibilité entre webpack-dev-server et chockidar. webpack-dev-server est un module permettant d’ouvrir une connexion et de recompiler les sources en cas de changement du code pendant le développement : live reloading. Il n’est utilisé que pour le développement.

On va laisser comme cela et l’on verra les problèmes en lançant le serveur de développement avec la commande webpack serve.

React et React-dom

On ajoute les packages React et React-dom pour notre application, c’est essentiel pour qu’elle puisse fonctionner avec React.

package.json

On ajoute l’entrée babel au fichier package.json (version babel supérieure à 5), et l’entrée scripts pour lancer la transpilation et le serveur live reload avec yarn.

Babel transpile l’application et Webpack la lance. L’entrée scripts définit les actions :

  • yarn start : Lance l’application sur le serveur de développement et le live reload,
  • yarn build : Transpile et construit l’application.

.gitignore

Si l’on utilise git et github pour gérer les versions de l’application, il est important d’exclure certains fichiers et packages de la surveillance du dossier de l’application. En particulier, on ignore le volumineux dossier node_modules, le dossier dist et certains fichiers de configuration. Pour cela, on écrit un fichier .gitignore

On complète avec ce que l’on veut exclure. src-backup est un dossier où je garde des snippets des sources, des idées de codes.

Pour installer l’application avec le dossier node_modules, il suffira de lancer npm install, ou yarn install. Le dossier dist contient les fichiers exécutables. Pour les reconstruire, on lance alors npm run build, ou yarn build, le mieux étant de lire le contenu, la propriété scripts, du fichier package.json.

Création des fichiers

On crée le répertoire src, et l’on écrit le fichier index.html avec une division div vide destinée à recevoir l’application.

Le composant React de l’application prendra place dans la division <div> avec l’identifiant root. Le script transpilé de l’application sera automatiquement intégré lors du développement.

On définit le script source de l’application index.js dans le dossier src en plaçant le composant React <App /> que l’on définira dans App.js.

On crée le composant dans le fichier App.js, dans le répertoire src.

La page affichera le texte Hello World!.

Configuration Webpack

On crée un fichier de configuration pour Webpack : webpack.config.js

La documentation de ce fichier est accessible sur le site Webpack. On peut s’appuyer également sur la documentation npm ou github. Par exemple, pour le plugin html-webpack-plugin.

On transpile : yarn build

Le fichier transpilé et à intégrer dans index.html se trouve dans le répertoire dist du projet et porte le nom index-bundle.js.

L’architecture du dossier de l’application est alors la suivante :

On lance l’application : yarn start

En cas d’erreur listen EADDRINUSE: address already in use 127.0.0.1:8080, il faut tuer le processus associé, et relancer, voir l’article.

On se connecte en local à l’adresse http://localhost:8080, les modifications apportées sont prises en compte dans l’application.

Si l’on développe en envoyant les fichiers sur un serveur et que l’on veut s’y connecter de façon externe, on ajoute la propriété devServer au fichier de configuration Webpack. On définit alors l’adresse IP du serveur, on peut aussi définir le numéro de port désiré.

Et l’on relance le serveur : yarn start.

On se connecte dans un navigateur à l’adresse http://xxx.xxx.xx.xx:2802

Les modifications de l’application s’effectuent alors en temps réel.

Pour arrêter le watcher (live reload), on utilise le raccourci Ctrl+C.

Pour créer le fichier final pour la production, il faudra enlever la propriété devServer et changer le mode à production dans le fichier de configuration Webpack.

Et hop, on peut développer des applications React sans create-react-app, en approfondissant en même temps l’utilisation de Webpack.

L’utilisation d’un composant externe et l’utilisation de cet environnement est présenté dans l’article suivant.

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables.