Bien démarrer avec React et Webpack

On peut très bien écrire du React sans faire de l'ES6, en écrivant un simple Hello World, sans utiliser d'outil tel que brunch, webpack ou autre browserify mais c'est franchement moins drôle, moins pratique et moins rapide.

Cet article ne se veut pas une documentation sur React ou webpack. C'est plutôt une aide pour mettre en place simplement (enfin j'espère) l'environnement que j'utilise pour faire du React facilement.

Il n'y a pas beaucoup de prérequis mais néanmoins un qui est sans appel : il faut avoir npm.

Il faut commencer par créer un répertoire, demo-react, par exemple, puis initialiser le projet avec la commande suivante :

$ npm init

Cette commande va générer un fichier package.json, que l'on peut évidemment créer manuellement. L'avantage est que si on a un fichier README.md et qu'on a déjà créer un dépot git, npm init va récupérer les infos. Par exemple, j'ai créer un dépôt et j'obtiens le fichier suivant :

{
  "name": "demo-react",
  "version": "1.0.0",
  "description": "demo React",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/nikrou/demo-react.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/nikrou/demo-react/issues"
  },
  "homepage": "https://github.com/nikrou/demo-react"
}

Il ne reste plus qu'à modifier légèrement pour changer l'auteur, la licence.

Ajoutons les dépendances du projet en utilisant npm, avec l'option --save pour mettre à jour automatiquement le fichier package.json.

$ npm install --save react react-dom

Puis la dépendance vis à vis de webpack et babel-loader pour transformer l'ES6 en ES5 interprétable par les navigateurs courants mais cette fois avec l'option --save-dev qui ajoute une dépendance de développement. 

$ npm install --save-dev webpack webpack-dev-server babel-loader@'<6'

babel-loader va permettre de charger les fichiers javascripts écrits en ES6 et les transpiler en ES5 grâce à Babel. Je précise une version de babel inférieure à 6 car certains outils n'ont pas encore été adapté pour cette nouvelle version. Et il ne manque qu'un fichier minimal de configuration pour webpack :

module.exports = {
    entry: './index.js',
    output: {
        filename: 'bundle.js',
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                loader: 'babel'
            }
        ]
    }
}

Voilà pour l'outillage. On peut maintenant passer au code qui ressemble beaucoup à la version Hello World et que d'ailleurs Babel va traduire de manière quasi équivalente. Le contenu de notre "application" mis dans le fichier index.js : 

 

Le fichier html ressemble aussi beaucoup à celui du Hello World

 

Pour générer ce fichier bundle.js, il suffit d'exécuter la commande suivante :

$ webpack

Vous pouvez alors voir ce beau Hello World en ouvrant la page index.html dans votre navigateur préféré.

Vous pouvez récupérer ce projet (et le suivre) sur mon compte github, en le clonant. Il suffit ensuite de récupérer les dependances avec npm, puis en générant l'application :

$ npm install
$ webpack

Haut de page