I - Qu’est-ce que React.js ?

A - Présentation

React.js est une bibliothèque Javascript libre développée par Facebook depuis 2013. Cette bibliothèque permet via un système de composants de générer une portion ou une page en HTML à chaque changement d’état. Il s’agit là de faciliter la création d’applications web Monopage.

React.js gère simplement la partie interface (Vue) d’une application web. En effet, React est connu pour être rapide, les applications faites en React peuvent gérer des mises à jour complexes tout en restant rapides et réactives. Il reste également modulaire, au lieu d’écrire de gros fichiers de code denses on peut écrire beaucoup de petits fichiers réutilisables. La modularité de React reste une bonne solution aux problèmes de maintenabilité de JavaScript.

 B - JSX

React.js utilise JSX pour le rendu de ses composants. Cette extension syntaxique de Javascript comporte plusieurs différences avec le HTML bien qu’elle s’en rapproche.

Cependant, on doit avoir un compilateur JSX pour traduire n’importe quel code JSX en JavaScript.

const title = <h1>Hello World</h1>

 ReactDOM est une bibliothèque Javascript qui contient plusieurs méthodes spécifiques à React et qui traitent le DOM d'une manière ou d'une autre.
ReactDOM.render() est le moyen le plus commun pour effectuer le rendu d’un élément JSX. Il prend l’expression JSX et créé un arbre correspondant  aux noeuds du DOM puis il ajoute cet arbre au DOM.

C - Virtual DOM

Avec React.js, pour chaque objet DOM, il y a un "objet DOM virtuel" correspondant. Un objet DOM virtuel est une représentation d'un objet DOM, comme une copie allégée.

Un objet DOM virtuel a les mêmes propriétés qu'un objet DOM réel, mais il n'a pas le pouvoir de changer directement ce qui est à l'écran. Entre deux mises à jour, React va donc comparer l'ancien et le nouveau DOM Virtuel pour déterminer où effectuer d'éventuels changements.

Suite à ça donc, React.js va cibler les noeuds du DOM où des modifications doivent être faites et les appliquer. Ce principe va limiter les calculs dans notre page et donc se traduire par des applications plus rapides.

II - Installation et mise en route

A - Node & NPM

Pour pouvoir configurer votre Projet React.js vous aurez besoin d’installer Node.js sur votre ordinateur en suivant ce lien. En faisant ça, vous aurez accès à Node Package Manager (NPM). NPM est le gestionnaire de paquets officiel de Node.js et il vous permettra de pouvoir installer au sein de votre projet des Packages (Bibliothèque Javascript).

Vous trouverez toute la liste des packages disponibles sur https://www.npmjs.com/.

Pour commencer, décidez où vous voulez enregistrer votre application. Dans le terminal, cd où vous voulez enregistrer votre application. Utilisez mkdir pour créer un nouveau répertoire avec le nom de votre application. cd dans votre nouveau répertoire.

Ensuite on va utiliser la commande

npm init

Cette commande va créer automatiquement un nouveau fichier nommé package.json qui contient des métadonnées sur votre nouveau projet comme ses dépendances ou les scripts d'exécution.

Dans le package.json, les dépendances servent à remplir différents objectifs. Certaines dépendances sont nécessaires pour construire votre projet à savoir celles dont vous avez besoin pour faire tourner votre code, d’autres sont nécessaire lorsque votre programme s’exécute, c’est à dire celles dont vous aurez besoin à un moment ou à un autre lors de la phase de développement, mais pas pour l'exécution du code.  Ainsi, il existe plusieurs types de dépendances que vous pouvez avoir par exemple dependencies qui va regroupes les dépendances nécessaires pour faire tourner le code. Ensuite nous avons devDependencies qui va lui regrouper les dépendances auxquelles nous auront à faire appel lors des différentes phases de développement mais non pour l'exécution du code. 

{
	“dependencies”: {
		“package_1”: “^1.0.0”
 },
       “devDependencies”: {
	      “package_2: “^1.2.1”
 }
}

Enfin, on installe nos deux modules « react » et « react-dom »:

npm install  --save react react-dom

B - Babel

Babel est un compilateur JavaScript qui inclut la possibilité de compiler JSX en JavaScript normal.

Le nom du module npm de Babel est babel-core. Au lieu de npm install --save babel-core on utilisera la syntaxe npm install --save-dev babel-core, parce que vous n'utiliserez Babel qu'en mode développement.

Vous allez également installer deux autres modules liés à Babel, nommés babel-loader et babel-preset-react :

npm install --save-dev babel-core babel-loader babel-preset-react

Pour que babel fonctionne vous devez écrire un fichier de configuration de babel.

Dans votre répertoire racine, créez un nouveau fichier nommé .babelrc .
Puis enregistrer le code suivant dans votre fichier .babelrc :

{ presets: [react] }

C - Webpack

Webpack est un “Module Bundler” qui a pour but de prendre tous les fichiers Javascript, CSS ou HTML et de les regrouper dans un ou plusieurs modules pour palier à la modularité du Javascript. Webpack va faire appel à des loaders (ex: Babel) qui vont gérer chaque aspect de l’application pour les compiler directement en Javascript interprétable par le navigateur.

Pour faire court, Webpack agit en tant qu'harmoniseur en transformant le code hétérogène en code natif et statique directement compréhensible par le navigateur.

Dans notre cas, nous devons configurer webpack pour que notre app utilise Babel afin de compiler et de donner un chemin à notre fichier bundle.js

Afin de configurer Webpack nous allons commencer par installer le Package dans notre projet :

npm install --save webpack webpack-dev-server webpack-cli

Webpack-dev-server nous sera utile pour lancer un serveur web de développement qui nous permettra d’utiliser des outils comme le hot reload.

Webpack-CLI (Command Line Interface) quant à lui est l’interface en ligne de commande de Webpack.

Il est maintenant temps de créer notre fichier index.html à la racine de notre projet.

<!DOCTYPE html>
<html>
   <head>
       <title> Premier composant React </title>
   </head>
   <body>
       <div id="app"></div>
       <script type="text/javascript" src="/bundle.js"></script>
   </body>
</html>

Dans ce fichier, nous retrouvons une div avec l’id “app” qui sera l’endroit où notre code sera injecté.

Pour finir la configuration du projet, nous allons maintenant créer un fichier index.js qui sera le point d’entrée de notre configuration Webpack. Créez un dossier src dans lequel vous placerez ce fichier.

A la racine, créez le fichier index.js :

import React from 'react';

import ReactDOM from 'react-dom';

// main app
import App from './components/App';

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

Dans ce fichier, nous importons react et react-dom.  Nous importons aussi notre composant App que nous créerons juste après. Pour finir, nous effectuons le rendu dans notre node principal situé dans le fichier index.html précédemment créé.

A présent,, il nous faut créer un dossier “webpack” dans lequel nous créerons un fichier “webpack.dev.config.js” :

var webpack = require('webpack');
var path = require('path');

module.exports = {
	entry: [
		path.join(__dirname, '../index.js')
	]
}

 Ensuite, nous ajouterons des loaders qui auront pour but de compiler nos fichiers source :

var webpack = require('webpack');
var path = require('path');

var parentDir = path.join(__dirname, '../');

module.exports = {
    entry: [
        path.join(parentDir, 'index.js')
    ],
    module: {
        rules: [
        {
            test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use:{
                	loader: 'babel-loader',
                	options:{
                		presets: ['babel-preset-react']
                	}
                }
            }
        ]
    
},
    output: {
        path: parentDir + '/dist',
        filename: 'bundle.js'
    },
    devServer: {
        contentBase: parentDir,
        historyApiFallback: true
    }
}

A travers ces quelques lignes, nous configurons babel-loader pour charger les fichiers js/jsx grâce aux loaders. Ensuite, nous configurons webpack pour qu’il sache où placer le fichier bundle.js (cf output). La dernière étape de la configuration de webpack est de lui spécifier les options relatives à notre serveur de dev (cf devServer).

Il est maintenant temps de créer notre premier composant React !

Ajoutez un dossier “components” à votre projet et dans celui-ci, ajoutez un fichier App.js.

Pour ce premier exemple, nous allons simplement créer un composant qui affichera “Hello World !” :

import React, {Component} from 'react';


export default class App extends Component {
   render () {
       return <p>Hello World !</p>
   }
}

 Dans ce fichier nous commençons par importer React et Component depuis le package 'react'. Ensuite, nous exportons notre composant App. Afin de pouvoir afficher notre message, nous utilisons la méthode render() qui est automatiquement appelée dans react et qui va retourner le jsx affichant Hello World.

Avant de pouvoir tester notre App dans le navigateur, nous allons ajouter un script npm qui nous permettra de lancer le serveur de dev en entrant simplement la commande ‘npm run dev’ dans notre terminal.

Dans votre fichier package.json, ajoutez simplement les lignes suivantes :

"scripts": {

 "test": "echo \"Error: no test specified\" && exit 1",

 "dev": "./node_modules/.bin/webpack-dev-server --config ./webpack/webpack.dev.config.js"

}

Il est maintenant temps de tester notre application !

Dans votre terminal, rentrez le commande précédemment créée :

npm run dev

Ensuite rendez vous sur http://localhost:8080 et TADA ! Notre message s’affiche bien !

D - Create-react-app

Pour ceux préférant ne pas passer trop de temps à configurer leur projet, Facebook a mis à disposition une commande qui permet de pouvoir créer son projet React sans passer par la configuration de Webpack ainsi que de Babel qui seront directement pré-configurés. Ainsi vous pourrez directement vous concentrer sur votre projet !

npx create-react-app my-app