Blog IT nouvelles technologies du web


Un développeur veille pour rester éveillé...


Configuration d'un front React avec ES6

React est un framework applicatif web front-end tout comme AngularJS ou Polymer. A la différence près qu’il ne propose aucun outillage pour l’architecture applicative (controller, service, provider…) ou des helpers type HTTP REST ou encore gestionnaire d’état ($location).

React est donc centré sur la UI fait la part belle aux “components”, cette notion introduite récemment dans l’écosystème Web. Une application est vue comme un arbre de composants enchevêtrés les uns dans les autres.

Je vais donc vous proposer ce tutoriel pour commencer avec la technologie React mettant également en scène Babel qui est un transpiler ES6 (Ecmascript 6) nous permettant d’écrire un code Javascript moderne et plus lisible.

Ma configuration node/npm au moment de l’écriture de ce tutoriel était la suivante:

> node --version
v6.9.2
> npm --version
3.10.9

Vous pouvez vous servir de l’outil NVM pour installer plusieurs versions de Node en parallèle et switcher sur celle que vous souhaitez le temps du développement d’un projet.

NPM

NPM sera le gestionnaire de dépendences que j’utiliserai ici. Il est installé automatiquement avec NodeJS et disponible à la ligne de commande. npm --version vous permet de connaitre la version de NPM actuellement active.

Pour mettre à jour NPM (ce que je vous recommende si vous avez une version 2.x installée), utilisez la commande npm update -g npm.

Initialisation du projet

L’identité technique du projet avec ses dépendences, l’adresse de son repo git, sa version, description, auteur, etc… est contenue dans le fichier de configuration NPM package.json à la racine du dossier contenant votre futur projet.

Pour initialiser un fichier package.json si vous ne connaissez pas la syntaxe, utilisez la commande npm init.

Exemple:

> mkdir react-demo
> cd react-demo
> npm init

Votre fichier package.json devrait contenir quelque chose comme ca:

{
  "name": "react-demo",
  "version": "1.0.0",
  "description": "Configuration d'un front React avec ES6",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "gghez",
  "license": "ISC"
}

Installation de React

Le framework React est disponible dans le repo officiel NPM, vous pouvez donc l’installer avec cette commande:

npm install --save react react-dom
  • react : framework React à proprement parler.
  • react-dom : helpers pour l’intégration des composants React dans le DOM standard.

Babel

Babel est, comme Typescript, un transpiler Javascript, c’est à dire qu’il consiste en une mécanique de transformation d’un language vers un autre. Dans notre cas du Javascript moderne vers un javascript contemporain, compris par l’engine NodeJS et les browsers dans leur version actuelle.

Il nous permettra ici d’écrire du code respectant la norme ES6.

Installation

Babel entre en jeu pour la génération d’un code Javascript pré-déploiement. Dans ce cas il sera considéré comme une dépendence de développement. Nous l’installerons donc en tant que tel.

npm install --save-dev babel-core

Attention, il existe un package nommé “babel”, mais ce dernier ne contient que des exécutables pour la transpilation en ligne de commande. Dans notre cas, la transpilation sera effectuée par Webpack un outil permettant de packager un projet web. Ce dernier ne requière que les fonctions JS de transpilation qui sont elles contenues dans “babel-core”.

Configuration

Qu’il soit utilisé en ligne de commande (package npm “babel”) ou via Webpack, Babel se sert d’un bloc de configuration pour fonctionner et savoir quelles fonctionnalités avancées il peut transpiler. Il existe de nombreuses fonctionnalités disponibles dans Babel à travers ses plugins et presets (un preset est un ensemble préconfiguré de plugins).

Nous allons pour ce tutoriel utiliser 2 presets, l’un contenant l’ensemble des dernières fonctionnalités Javascript et l’autre contenant le parser de JSX ce nouveau format de fichier introduit par React.

npm install --save-dev babel-preset-latest babel-preset-react

Il est possible de rajouter noeud de configuration directement dans notre fichier package.json pour dire à Babel quelles fonctionnalités utiliser.

Dans notre cas ce sera définit ainsi:

{
  ...
  "babel": {
    "presets": [
      "latest",
      "react"
    ]
  }
  ...
}

Webpack

Webpack est assez simple d’utilisation, il nous permettra de transformer l’ensemble de nos fichiers de code ainsi que les dépendences (react, jquery…) en un seul fichier de sortie dist/bundle.js qui sera référencé dans notre point d’entrée HTML.

Installation

Toujours NPM pour l’installation: npm install --save-dev webpack

Nous allons également installer un plugin pour Webpack lui permettant d’effectuer la transpilation ES6 pour chaque fichier rencontré dans le processus de bundleing.

npm install --save-dev babel-loader

Configuration

Pour configurer Webpack, il nous faudra rajouter un fichier webpack.config.js à la racine du projet, avec ce contenu minimaliste suffisant dans le cadre de ce tutoriel:

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

Le point d’entrée de l’introspection est le fichier index.jsx situé à la racine du projet.

Nous désignons également tous les fichiers .jsx (test: /\.jsx?$/) éligibles à la transformation par le plugin “babel-loader” (-loader peut être omis) avant d’être intégrés au bundle de sortie.

Le plugin “babel-loader” utilise “babel-core” qui lui se sert de la configuration que nous avons mise dans package.json.

Une documentation complète peut être trouvée sur le site de webpack.

Webpack est installé comme dépendence locale de notre projet, nous pouvons donc l’appeler dans un custom script npm comme suit (dans le fichier package.json):

   "scripts": {
     "build": "webpack"
   }

Ou bien en ligne de commande directement en tapant node_modules/.bin/webpack (du moins dans un environment unix).

Ecriture de l’application

Nous allons créer à la racine de notre projet, un fichier HTML nommé index.html contenant le code suivant :

<html>
<head><title>React Demo</title></head>
<body>
  <div id="app"></div>
  <script src="dist/bundle.js"></script>
</body>
</html>

Nous voyons bien ici l’output de Webpack comme seule référence de script de l’application. Ce fichier ne sera que très rarement modifié au cours de la vie du projet.

Puis notre point d’entrée index.jsx:

import React from "react";
import { render } from "react-dom";

import { App } from "./app.jsx";
// Alternative à l'instruction précédente
// const App = () => <h1>Hello World !</h1>;

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

Et la référence à notre premier composant React app.jsx:

import React from "react";

export class App extends React.Component {
  render(){
    return <h1>Hello World !</h1>;
  }
}

Ce composant que nous avons nommé App peut également s’écrire sous la forme d’une fonction pure comme présentée en commentaire ci-dessus dans le fichier index.jsx.

Test de l’application

Build de l’application: npm run build

Ouverture du fichier index.html dans votre browser.

Vous devriez obtenir ceci:

React Demo

N’hésitez pas à poser vos questions sur ce setup si vous êtes bloqués.