Aujourd’hui, la plupart des applications web reposent sur tout un ensemble de technologies. Comprendre le rôle de chacune de ces technologies et créer une application depuis zéro en les utilisant peut vite devenir un parcours du combattant pour le novice !

Dans cet article, après une description des outils yarn, babel, webpack et react, nous allons créer une application HelloWorld utilisant ces 4 technologies.

Présentation des outils

Yarn

Yarn est un gestionnaire de dépendances. Autrement dit, il s’occupe de télécharger et installer les dépendances de notre application, c’est à dire les bibliothèques, composants et outils que notre application utilise. Il permet de spécifier pour chacun d’eux la version utilisée, et gère les dépendances en cascade : si vous avez besoin d’une bibliothèque A qui utilise une autre bibliothèque B, il suffit d’ajouter A pour que yarn installe également B.

React

React est un framework javascript. Développé par Facebook, c’est une bibliothèque qui facilite le développement d’applications en permettant de créer des composants qui vont prendre la forme de balises XML (grâce au langage JSX) et qui vont construire à partir de celles-ci généralement du HTML.

Babel

Babel est un transpileur Javascript. Quel problème résout-il ? Étant donné qu’il existe plusieurs versions de javascript, et que tous les navigateurs ne supportent pas les mêmes versions, babel va permettre de traduire votre code depuis une version récente de javascript vers une version plus ancienne. Cela permet donc d’utiliser les dernières versions de javascript tout en restant compatible avec les anciens navigateurs ! Une multitude d’options permet de gérer les choses plus finement.

Webpack

Webpack permet de faciliter le développement par modules. Il permet avec un seul fichier de configuration, de regrouper sous forme de modules tous vos fichiers css en un seul, tous vos fichiers js en un seul, etc qu’il suffira alors de charger une et une seule fois. Il permet donc également de gagner en performance (moins de requêtes HTTP). Entre autres options, il donne également la possibilité de minifier le js, le css, etc.

Création de l’application

Installation des outils

On s’y met ? Pour commencer, on a besoin de yarn. On va donc l’installer (sous Windows depuis le site officiel, sous Linux depuis le gestionnaire de paquets de sa distribution).

Ensuite, on se place dans un dossier vide pour notre projet, et on initialise yarn :

yarn init --yes

On constate en lançant cette commande qu’elle a créé un fichier package.json qui contient pour le moment le nom de notre projet, sa version et sa licence (par défaut MIT). L’option --yes crée le fichier avec les valeurs par défaut, n’ajoutez pas --yes si vous souhaitez configurer ça en ligne de commande.

Puis nous souhaitons installer React. Si vous avez bien suivi, yarn permet de gérer les dépendances de notre projet et React est une bibliothèque, donc une dépendance. Vous l’aurez compris, il suffit d’installer React avec yarn. Pour cela, on lance la commande suivante :

yarn add react react-dom

La syntaxe est simple à comprendre : yarn add [dependance]. Ici, on a besoin de react et de react-dom, on peut installer les deux en les mettant l’un après l’autre.

En lançant cette commande, on constate que notre fichier package.json contient maintenant les dépendances, avec des numéros de version (qui correspondent aux dernières versions disponibles puisque nous n’avons pas précisé de version).

Installons maintenant babel et webpack. Ces outils ne sont pas destinés à être déployés pour l’utilisateur final, ils ne nous sont utiles qu’à nous, développeurs. On précise le précise donc à yarn dans la commande avec l’option --dev :

yarn add --dev @babel/core @babel/preset-env @babel/preset-react babel-loader webpack html-webpack-plugin css-loader style-loader

Pour les curieux : @babel/core correspond à l’outil babel lui-même, preset sont des configurations, puis nous avons webpack lui-même, et ses plugins et loader permettant de gérer respectivement le html et le css.

Tous les outils sont maintenant installés, mais il faut encore les configurer.

Configuration des outils

Concernant Babel, il faut créer un fichier .babelrc dans lequel on y écrit ce qui suit :

{
  "presets":[
    "@babel/preset-env", "@babel/preset-react"
  ]
}

Cette configuration minimale permet simplement d’utiliser la dernière version javascript comme décrit plus haut. Les "presets" sont des ensembles de configuration, preset-env permet justement de gérer la dernière version javascript et preset-react est nécessaire lorsqu’on développe une application React.

On configure maintenant Webpack en créant un fichier webpack.config.js :

const path = require('path')

const HtmlWebpackPlugin = require('html-webpack-plugin')
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
    template: './src/index.html',
    filename: 'index.html',
    inject: 'body'
})

module.exports = {
    entry: './src/index.jsx',
    output: {
        path: path.resolve('dist'),
        filename: 'index_bundle.js'
    },
    resolve: {
        extensions: ['.js', '.jsx']
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                use: 'babel-loader'
            },

            {
                test: /\.css/,
                use: ['style-loader', 'css-loader']
            }
        ],
    },
    plugins: [HtmlWebpackPluginConfig],
}

Sans rentrer dans les détails, on donne à HtmlWebpackPlugin le chemin vers notre index.html et on définit les modules par une regex définissant les extensions à gérer et les loaders respectifs à utiliser.

Nous n’avons maintenant plus qu’à écrire nos fichiers sources.

Création des fichiers sources

On va créer 3 fichiers dans un dossier src/ : un fichier index.html qui va contenir la structure de la page, un fichier index.jsx qui sera le composant principal de notre application React, et un fichier app.css qui définira le style de l’application.

Le fichier src/index.html contient la structure de base d’une page html. On place dans le body un div avec un id "root" :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Titre</title>
</head>
<body>
<div id="root"></div>
</body>
</html>

Le fichier src/index.jsx va lui contenir notre composant React :

import React from 'react';
import ReactDOM from 'react-dom';

import './app.css';

function App() {
    return 'Hello World!';
}

ReactDOM.render(<App />, document.getElementById('root'));

Une chose à remarquer : on peut importer du css dans notre javascript. C’est grâce à Webpack que cela est possible et cela facilite donc bien le développement par modules : chaque composant React va pouvoir avoir son propre fichier css pour définir son style propre.

Enfin, le fichier src/app.css donc :

body {
    font-weight: bold;
}

On a désormais la structure suivante :

Il ne reste plus qu’à essayer tout ça !

Lancement de l’application

Pour tester, on peut utiliser webpack-dev-server et webpack-cli qui vont permettre de lancer un serveur avec notre application.

Vous maîtrisez maintenant, on utilise yarn avec --dev :

yarn add --dev webpack-dev-server webpack-cli

Et on ajoute dans package.json :

  "scripts": {
    "start": "webpack-dev-server"
  }

Au final, le fichier package.json ressemble à ceci :

{
  "name": "calendar",
  "version": "1.0.0",
  "main": "src/index.jsx",
  "author": "Nicolas Koenig",
  "license": "MIT",
  "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  },
  "devDependencies": {
    "@babel/core": "^7.4.0",
    "@babel/preset-env": "^7.4.2",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.5",
    "css-loader": "^2.1.1",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.3.0",
    "webpack-dev-server": "^3.2.1"
  },
  "scripts": {
    "start": "webpack-dev-server"
  }
}

On lance maintenant la commande :

yarn start

Et il n’y a plus qu’à ouvrir un navigateur à l’adresse localhost:8080 pour admirer le résultat !

La méthode rapide

Ça me semble important de bien comprendre le rôle de chacun des outils et de connaître/comprendre leurs configurations minimales. Cela dit, pour gagner du temps, on peut également utiliser create-react-app : un package npm qui inclut ces outils avec une configuration par défaut fonctionnelle. Pour cela, rien de plus simple :

yarn create react-app my-app

Et vous obtenez un répertoire my-app avec tout ce qu’il faut dedans : plus qu’à lancer l’application !