Préambule : cet article écrit en mars 2016 a suscité de nombreuses demandes de suite 
que nous n'avons pu honorer pendant longtemps (et oui, ça nous arrive aussi de coder). 
Nous avons finalement remédié à la situation avec cet article complémentaire : 
un peu de lecture autour de l'univers React.

L’effet de buzz autour de ReactJS n’en fini plus de convaincre les développeurs front-end, mais aussi les développeurs mobile hybride et natif – jusqu’ici très attachés à Ionic/Angular, à Java, l’Objective-C ou encore Swift, grâce à React Native.

Certes, on apprécie toujours autant Angular pour du développement front et même mobile, mais l’arrivée imminente d’Angular 2, ses nouveaux concepts et l’impossibilité de migrer d’Angular 1.x à Angular 2 représentent à ce jour une certaine inquiétude.

Le but de cette série d’articles est de remettre le pied à l’étrier et de développer une petite application à l’aide de ReactJS, qui a beaucoup évolué depuis le dernier article d’Alexia, mais aussi d’introduire de nouveaux concepts proposés par Redux, dont on parlera en détail dans un prochain article.

Le pitch

« J’ai encore raté mon train » est une application web qui permet aux utilisateurs de comptabiliser le nombre de fois où ils se sont retrouvés, dépités, sur le quai de la gare en voyant partir leur seul et unique train de la journée au loin, tout ça pour un malaise dans le métro.

Pour mener à bien ce projet, nous avons besoin de 300 000€ et sommes prêts à laisser 200% de nos parts et de vendre notre âme au diable. Nos projections nous permettent de dire que nous ne gagnerons jamais d’argent car nous n’avons pas de modèle économique, mais de nos jours, est-ce que c’est vraiment un problème ? Investissez pour l’avenir, donnez nous des sous.

Oui bon, on est bien d’accord, cette application est absolument inutile, mais elle va nous permettre de :

  • Comprendre comment découper une maquette sous forme de composants React
  • Mettre en place un véritable environnement de développement avec Webpack, Babel et naturellement React, en ES6 (ES2015)
  • Gérer les actions des utilisateurs, et leurs conséquences dans le flux de l’application et dans son rendu
  • Parler des states, des props, puis de parler immutabilité
  • Stocker les informations de l’utilisateur, d’abord en LocalStorage, puis, si vous êtes vraiment fan de cette série, sur une petite instance NodeJS / SailsJS, ce qui nécessitera d’utiliser un middleware Redux (on en reparlera).
  • Si vous êtes encore en vie, d’envisager de reprendre ces concepts pour développer une application IOS / Android avec React Native

Bref, on a du boulot.

Les concepts de ReactJS n’ont pas changé

Première bonne nouvelle, si vous avez bricolé du React il y a un an et avez du arrêter entre temps : les concepts associés à React n’ont pas changé. L’idée est toujours de découper une application sous forme de composants, de les imbriquer et de les mettre à jour sans perte de performances (bien au contraire).

Pour ceux qui ne connaissent pas encore les concepts liés à ReactJS :

  • S’il fallait le positionner dans le modèle MVC, il s’agirait du V (View)
  • Le flux est unidirectionnel, c’est d’autant plus vrai lorsque l’on ajoute une couche supplémentaire issue des grands principes de Flux, par exemple, avec Fluxxor, Reflux ou, dans le cas qui nous intéresse, Redux.
  • Tout est basé sur la création de composants, dans lequel on écrit non pas du code HTML, mais du JSX qui est ensuite transpilé en javascript pour injecter le rendu HTML dans le DOM.
  • Grâce au VirtualDom de React, on est capable d’améliorer significativement les performances d’une application. En deux mots, il ne s’agit plus de mettre le DOM à jour directement, mais de travailler avec une abstraction du DOM et d’en mettre à jour uniquement certaines parties si nécessaire via la méthode render() de ReactJS.
  • C’est Facebook qui est derrière ReactJS
  • Il existe des tonnes de librairies qui viennent compléter les fonctionnalités apportées par ReactJS. React router, des composants Materiel design,  des composants Bootstrap, la communauté est hyper active et vous trouverez souvent ce que vous cherchez sur React Parts.
  • Les concepts de base sont tellement simple à assimiler que React est un excellent choix pour une équipe de développeurs front. L’intégration d’un nouveau développeur même junior dans l’équipe en est facilité.
  • Comprendre ReactJS, c’est comprendre en partie React Native. A partir de là vous avez toutes les chances de passer de développeur front-end à développeur front-end et mobile sans trop d’effort. Enjoy.
  • Il y a tellement d’excellents articles et courses à propos de React que je me demande pourquoi j’en écris un nouveau 🙂

La maquette, le découpage

Comme vous le constaterez, j’ai bien entendu bricolé une maquette en totale loozdé pris le temps de réaliser un wireframe très précis de ce que nous souhaitons mettre en place :

Homepage - Homepage

On aura donc :

  • La liste de mes précédents « ratages » de train, avec la possibilité de les supprimer
  • Une recherche sur mes ratages de train
  • Un formulaire d’ajout qui contient la date, le départ et l’arrivée et mon excuse

Le découpage pour coller à la notion de composants ReactJS ressemblera à ceci :

Homepage - Découpage React (1)

On a un composant parent (gris) – aka Container Component, qui contient l’historique (bleu) et le formulaire d’ajout (vert).

L’historique contient également des « sous composants », aka Presentational Components :

  • Le composant Search qui est un petit formulaire de recherche
  • La liste en elle même, List
  • Un item réutilisable pour la liste : ListItem

Le composant ListItem sera utilisé comme template dans la liste des ratages de train.

L’environnement de dev

La façon d’organiser son environnement de développement a changé depuis plusieurs mois. React est fortement couplé à Babel, un (LE !) compiler qui permet d’écrire du JS en ES6, et Webpack, un module bundler qui vous permettra d’automatiser le plupart des tâches (minification du code, traitement sur les images, css…) et de mettre en place le hot module replacement (en deux mots, de mettre à jour le code de votre application à chaud tout en n’ayant pas à rafraichir puis à reproduire systématiquement le parcours utilisateur pour arriver à l’état dans lequel vous étiez juste avant…). A ce jour, seul Webpack gère parfaitement le hot module replacement, et c’est très clairement de la bombe.

Yeoman ? Naaaaaaaan !!!

Forcément, on serait feignant, on utiliserait un generateur Yeoman – il en existe de très bons, qui nous permettrait d’éviter d’avoir à écrire tout le boilerplate et la configuration de l’environnement, ce qui sous entendrait qu’on aurait pas à se soucier de la configuration de webpack, des dépendances, de la création et de la configuration du package.json… et qu’on aurait finalement assez peu de visibilité sur les différentes tâches automatisées et plus globalement sur le projet en lui même.

J’aime beaucoup Gulp, Grunt, Webpack, mais je ne suis pas trop fan des générateurs car on n’a pas forcément la maitrise du code, de l’architecture d’une application et des tâches lancées automatiquement. Si vous devez faire évoluer votre environnement de dev, autant que ce soit vous qui l’ayez créé, ou au moins que vous compreniez comment ça tourne.

On va donc mettre en place, rapidement, une petite configuration maison pour faire tourner React, Babel et Webpack. Ca prendra 5 minutes.

Bon ok, ça prendra peut être un peu plus de temps, mais vous serez fier de vous. Promis.

Webpack, React, Babel et compagnie

Ce qui nous intéresse ici, c’est d’avoir un environnement minimal pour commencer à coder et que l’on pourra faire évoluer par nous même facilement, et selon nos envies / besoins. Je pars du principe que vous avez déjà installé NPM et savez l’utiliser. Sinon, Google / Bing / Yahoo / Qwant sont vos amis.

C’est parti, on lance le terminal, on créé le dossier en ligne de commande, puis on créé notre package.json :

mkdir montrain
cd montrain
npm init

Laissez les choix par défaut à la création du package.json, au pire vous pourrez toujours le modifier par la suite si le coeur vous en dit.

On va installer quelques dépendances et créer un dossier qui contiendra nos fichiers de dev :

npm install --save react
(sudo) npm install -g webpack
npm install webpack --save-dev
mkdir app

Ca devrait suffire pour le moment. On va maintenant créer un fichier de configuration pour webpack à la racine du projet :

touch webpack.config.js

L’objectif est de faire travailler webpack afin qu’il nous serve notre version de distribution dans un dossier « dist ». Ce dossier contiendra nos fichiers minifiés, concaténés, transpilés, optimisés…

Voilà un point de départ :

module.exports = {
 context: __dirname + '/app',
 entry: './app.js',
 output: {
  filename: 'app.js',
  path: __dirname + '/dist',
 },
}

A ce stade, on informe webpack que le point d’entrée de notre app est le fichier app.js situé dans le dossier app, et que la sortie est localisée dans le dossier dist. Rien de bien folichon mais on va tester tout de suite le fonctionnement.

Dans le dossier app, créez un fichier app.js et ajoutez y ceci :

console.log('tchou ! tchou !');

Dans le terminal, à la racine du projet, tapez ce qui suit :

webpack

Si tout se passe bien, un dossier dist sera créé à la racine du projet, ce dossier contient un fichier app.js avec un peu (beaucoup) de boilerplate propre à Webpack et notre console.log.

On continue

On va maintenant installer babel-loader, qui nous permettra de transpiler du code ES6 et JSX directement avec Webpack :

npm install babel-loader --save-dev

On va légèrement adapter notre config webpack pour prendre en compte babel-loader, qui se chargera de travailler sur tous les fichiers JS du projet. Notre webpack.config.js devient ceci :

module.exports = {
 context: __dirname + '/app',
 entry: './app.js',
 output: {
   filename: 'app.js',
   path: __dirname + '/dist',
 },
 module: {
  loaders: [{
  test: /\.js$/,
  exclude: /node_modules/,
  loaders: ["babel-loader"],
  }],
 },
}

C’est tout pour le moment.

On a désormais une configuration minimale, qui va nous permettre de commencer à coder une application avec React. Dans la suite de cet article, on commencera à bricoler quelques composants avec React.

Stay tuned !