Vous êtes un passionné du développement d’applications web ? Souhaitez-vous développer des applications mono-pages ? Ou voulez-vous seulement améliorer l’aspect front-end pour votre carrière de développeur full stack ? Alors, vous devez à tout prix apprendre React JS.

Dans ce tutoriel exhaustif, vous allez apprendre à développer des applications web mono-page front-end en React native avec le framework react js.

Commençons par voir dans les lignes suivantes, les raisons qui ont amené la création de ce framework.

ReactJS : c’est quoi ?

React ou ReactJS ou encore React.js est un outil gratuit et open source. Plus précisément, il s’agit d’une bibliothèque JavaScript front-end utilisée surtout pour créer des interfaces utilisateurs. Elle a été créée par Facebook et elle est toujours entretenue par cette dernière avec la collaboration d’une communauté composée d’entreprises et de développeurs individuels.

React est connue pour être la base des codes pour les SPA. Il s’agit des applications à page unique, c’est-à-dire qu’à chaque action demandée, il n’est pas question d’ouvrir une nouvelle page, mais tout se passe sur une seule page. Le but de cette méthode est de rendre agréable l’expérience utilisateur.

React.js est de nos jours classée parmi les meilleurs outils utilisés par les développeurs web. Mais par où React a-t-elle commencé ? Quel problème est-elle venue résoudre ? Et comment est-elle devenue populaire et plus utilisée ?

Historique de React JS

En 2011, le nombre d’utilisateurs de Facebook ne cesse d’augmenter et la plateforme prend de plus en plus d’ampleur dans le monde entier. Le code connait des mises à jour de plus en plus fréquemment et les membres de l’équipe commencent à avoir du mal à tout gérer. 

Alors, Jordan Walke crée FaxJS pour pouvoir résoudre ce problème, c’est ce prototype qui a évolué pour donner naissance à la React d’aujourd’hui.

Instagram, qui comptait 13 employés en 2013, a été racheté par Facebook à 1 milliard de dollars. Les développeurs ont voulu adopter la nouvelle technologie de Facebook à Instagram. Cela a été un grand défi pour Facebook de pouvoir découpler React et de le rendre open source. C’est ainsi qu’en mai 2013, Jordan Walke a présenté React. On l’a ensuite utilisé et expérimenté au sein même de Facebook pendant les mois restants de cette année.

En 2014, de nouvelles fonctionnalités telles que les outils de développement React surgissent et deviennent disponibles sous forme d’extension sur le navigateur Chrome, ce qui l’a rendu d’autant plus populaire.

En 2015, React JS est enfin considérée comme stable. Durant cette année, de nombreuses nouvelles étapes sont survenues et ont contribué à pousser React encore plus haut. En mars et septembre de cette même année, il a eu l’ouverture et la disponibilité de React Native pour iOS sur Github et le déploiement de React Native pour Android. 

Les communautés qui se forment et s’engagent sur React trouvent de nouvelles améliorations et optimisations, ce qui lui donne plus d’essor comme partie intégrante de plusieurs produits logiciels.

Ce qui a poussé les développeurs à de plus en plus opter pour React est son utilisation des composants, du DOM virtuel, du JSX, des méthodes de cycle de vie et des crochets React.

Les grandes entreprises qui utilisent React sont : Facebook, Instagram, Netflix, Airbnb, Reddit, Dropbox et Postmates. Le simple fait que ces grandes entreprises utilisent React démontre à quel point il a de la valeur et est le plus demandé sur le marché de l’emploi.

Architecture de React

Contrairement autres bibliothèques et Framework d’interface utilisateur, React n’a pas de modèle d’architecture prédéfini. C’est tout simplement une vue dédiée à l’interface utilisateur.

Après l’interface utilisateur, il existe différents éléments constitutifs de React. En définition, un élément de React est la plus petite unité structurelle centrale. Cela peut être quelque chose de plus petit comme un bouton ou quelque chose de plus compliqué comme un profil d’utilisateur, un formulaire d’inscription, etc.

Il faut savoir que tous les éléments constitutifs de React ont la possibilité de prendre ou non un état. L’ensemble des données nécessaires pour faire fonctionner une application est appelé un état. À chaque action de l’utilisateur, l’état de l’application change. Il n’y a que l’état des données qui peut déterminer ce qui s’affiche sur l’interface utilisateur d’une application.

L’état local est un mécanisme que React propose et qui est prêt à être utilisé. Mais cela ne suffit pas pour faire tourner une application réelle. C’est pour cela que des bibliothèques telles que Redux viennent assurer la gestion.

Afin d’écrire un bon code, la bibliothèque React propose différents concepts comme : le composant d’ordre supérieur, le contexte, les accessoires de rendu, les références, etc. React Hooks est utilisé pour faire gérer de grands projets. Examinons l’architecture d’une application React :

architecture-react-js
Figure : architecture de base de React
  1. L’application React commence à démarrer avec un seul composant racine ;
  2. Le composant racine est créé grâce à un ou plusieurs composants ;
  3. Chaque composant est formé comme un composant de composants plus petits au lieu de dépendre d’un autre composant ;
  4. La grande partie des composants sont des composants d’interface utilisateur ;
  5. L’application React a la possibilité d’ajouter un composant tiers à des fins spécifiques comme le routage, l’animation, la gestion de l’état, etc.

Les meilleurs outils pour développer avec React JS

Que vous soyez débutant dans la programmation informatique ou un habitué avec React, il y a plusieurs outils gratuit et payant qui aident à créer des projets. Pour coder et travailler plus facilement, voici une liste des 10 meilleurs outils possibles à utiliser :

Reactide

C’est un IDE conçu pour le développement d’applications web avec React JS. Cet outil permet de coder uniquement avec React. C’est le tout premier IDE créé spécialement pour le développement d’application web React.

Reactide présente plusieurs points forts :

Extensible : Il lance un serveur Node incorporé et aussi un simulateur de navigateur personnalisé ;

Configuration facile : Grâce à une simple commande, vous pouvez lancer une configuration universelle ;

Visualisation des composants : vous pouvez voir en direct l’architecture de votre application.

Open source : React est disponible sur GitHub.

Bit

Bit est compatible avec les composants pour le développement d’applications web et de micro-front-ends. Il propose à peu près tout ce dont vous avez besoin pour le travail.

Ses principales fonctionnalités avantageuses sont :

Le développement d’applications : nul besoin du développement monolithique avec bit. Le travail se passe sur des applications modulaires ;

L’hébergement et la réutilisation : vous pouvez créer vos composants et les héberger dans des clouds ;

Les mises à niveau continues des composants et des releases : vous avez la possibilité d’effectuer la mise à jour de vos composants ;

La gestion de document : les documents sont organisés et visibles par tout le monde.

Storybook

Storybook est open source et permet de créer des composants et des pages d’interface utilisateur séparément. C’est le meilleur outil pour le test des composants et la documentation.

Il offre de nombreux avantages qui sont les suivants :

Interface durable : il permet de créer des interfaces utilisateurs dont vous aurez besoin de manière isolée ;

Test des interfaces utilisateurs facile : à chaque scénario réalisé, vous avez un test adéquat. À côté de cela, vous pouvez utiliser à nouveau les scénarios dans vos tests unitaires ;

Documentation et partage d’interface utilisateur : vous ainsi que vos collaborateurs ont accès à chaque scénario dans le but d’obtenir les mêmes informations ;

Disponible pour plusieurs piles technologiques : Storybook est compatible avec Vuejs, Angular, Ember et HTML.

React Developer Tools

C’est une extension Google Chrome qui permet d’ajouter des outils de développement à ce dernier. Il est recommandé à tout débutant d’utiliser cette extension, car il permet de résoudre les bugs durant le processus de développement. 

Voici les fonctionnalités de React Developer Tools :

Inspection : vous pouvez voir l’ordre des composants React individuel depuis Google Chrome ;

L’onglet des composants : grâce à cet onglet, vous pouvez voir tous les composants racines qui sont sur la page ainsi que les sous-composants disponibles ;

L’onglet Profileur : c’est avec cet onglet que vous pouvez enregistrer les informations sur les performances ;

Inspection plus approfondie : vous avez la possibilité avec cet onglet d’inspecter et d’éditer les propriétés du composant en cours d’utilisation.

React Cosmos

C’est l’outil parfait pour le développement et le test des composants d’interface utilisateur de manière séparée. Avec cet outil, vous n’avez pas à vous ennuyer avec l’environnement de développement localhost:3000, vous pouvez directement tester et développer l’ensemble des composants de façon séparée.

Les fonctionnalités de React Cosmos sont les suivantes :

TDD Visual : en utilisant le TDD (Test Driven Development) Visual, vous n’avez pas besoin de recharger l’application à chaque nouvelle modification ;

Bibliothèque de composants : grâce à cette bibliothèque, vous pouvez organiser tout ce que vous faites ;

Plateforme ouverte : React Cosmos n’est pas seulement utilisé pour développer et tester des composants d’interface utilisateur, mais aussi pour effectuer des tests de régression visuels et instantanés ;Maintenabilité : à part la création des interfaces, vous avez la possibilité de maintenir sa qualité.

Belle

Il n’est pas facile de douter de l’expérience globale de vos composants quand vous utilisez Belle. En effet, il offre des composants React utilisés fréquemment tels que Toggle, ComboBox, Rating, etc. 

L’une des fonctionnalités de Belle est qu’il soit versatile et personnalisable. Les différents composants sont optimisés de façon efficace pour fonctionner aussi bien sur les appareils mobiles que sur les machines de bureau.

React 360

C’est un Framework permettant de créer des expériences interactives qui s’exécutent dans un navigateur web. C’est Facebook qui a créé React 360 et sa version VR. Il utilise three.js pour aider les APIs de bas niveau WebVR et WebGL afin d’obtenir une expérience VR sur le navigateur. 

Les Fonctionnalités principales de React 360 sont :

Le développement multiplateforme : vous pouvez travailler sur les différentes plateformes sans effectuer trop de changements ;

Le média 3D : il dispose d’une fonctionnalité lui permettant de gérer tous les médias avec leurs configurations ;Les surfaces par React 360 : vous avez cette possibilité de mettre des panneaux d’interface utilisateur dans vos applications grâce à la création des interfaces 2D qui s’intègre facilement à des espaces 3D. 

Rekit

C’est une solution tout-en-un. Il permet de développer des applications web modernes et extensibles avec React, Redux et React-router. Cet outil favorise plutôt la productivité que l’obligation du développeur à travailler avec de grandes librairies et des configurations difficiles.

Rekit est une solution prête pour la production, c’est-à-dire qu’elle est utilisable dès qu’elle est démarrée sans avoir à effectuer de configurations supplémentaires.

React Testing Library

Il existe de nombreuses fonctions utilitaires dans React Testing Library aidant à tester les différents composants React JS qui ne nécessite pas de détails d’implémentation. Grâce à cet outil, vos tests peuvent se baser sur la manière dont vos utilisateurs se serviront de votre application.

Il s’agit d’une solution simplifiée, les composants React sont rapidement testés avec cet outil. Il effectue également un test très réaliste, les tests que vous pouvez passer se rapprochent beaucoup de la façon dont l’utilisateur se sert de votre application. 

Plasmic

Si vous voulez réaliser vos interfaces utilisateurs, React Plasmic est bien placé pour vous aider. Pour ce faire, vous allez commencer le design avec figma/Sketch et ensuite l’intégrer à votre code React.

Il dispose d’un constructeur de pages universelles, on peut donc l’utiliser pour tout. Il est extensible, vous avez la possibilité de vous servir de vos propres composants, de vos propres données, de vos effets et plus encore. On optimise les images et le code généré est sans erreur, ce qui offre une performance et une qualité à l’interface.

Installation de React JS

Pour travailler avec React, vous aurez besoin d’installer Node.js sur votre système. Cela vous donne l’accès à Node Package Manager (npm) qui va vous permettre d’installer les bibliothèques JavaScript utiles à votre projet, le npm qui est le gestionnaire officiel des paquets de Node.js. 

Vous pouvez suivre les étapes que nous avons données dans notre article sur Node.js pour installer cet outil. Assurez-vous d’avoir installé les dernières versions de Node et npm sur votre système. Utilisez les commandes suivantes pour vérifier les versions actuelles dont vous disposez : 

node -v 
npm –v
version-node-npm

Votre npm doit être au moins d’une version 5.2.0. Dans le cas contraire, il faut le mettre à jour avec la commande suivante : 

npm install -g npm 

Passons maintenant à la configuration, mais tout d’abord, il est nécessaire de comprendre une notion : creat-react-app.

Qu’est-ce que creat-react-app ?

Installer et configurer manuellement React n’est pas facile et prend énormément de temps. Vous devriez configurer Babel ou Webpack ainsi que plusieurs autres configurations comme les modules babel-loader et babel-preset-react qui sont tous deux liés à Babel. Mais tout d’abord, c’est quoi Babel et Webpack ?

Babel

C’est un compilateur de JavaScript qui transforme le JSX en JavaScript normal. Le nom du module npm de Babel est babel-core.

Webpack

C’est un module « Bundle » qui a pour rôle de prendre tous les fichiers JavaScripts, CSS ou HTML et de les assembler dans un ou plusieurs modules afin d’éviter les problèmes liés à la modularité du JavaScript. 

Le Webpack lance un appel à des loaders qui se chargeront de la gestion de chaque aspect de l’application pour enfin les compiler en JavaScript interprétable par le navigateur.

 Pour donner un bref aperçu de ce que fait le Webpack, il faut juste retenir qu’il agit comme un harmonisateur en changeant les différents codes en code natif et statique interprétable par le navigateur.

Ainsi, en utilisant create-react-app, vous n’aurez pas à configurer Babel ou Webpack, car tout se fait de manière automatique.

Créer votre toute première application React.js

Comme nous l’avons dit précédemment, il faut utiliser l’utilitaire creat-react-app pour lancer votre application React. 

Pour cela, créez un dossier et rendez-vous dans ce dernier depuis votre terminal de commande puis lancez cette commande :

npx create-react-app mon-app
create-react-app

Une fois l’installation terminée, démarrez l’application grâce à cette commande :

npm start
application-react-js

Si vous obtenez cette image sur votre navigateur, alors félicitations, vous venez d’installer et de lancer votre première Application React JS. 

Comment ajouter React JS à un site Web ?

Tous les sites web ne sont pas des applications web mono-page. Alors, si vous voulez transformer votre site web existant en une application web mono-page, cela est tout à fait possible. Il suffit de quelques lignes de code de plus pour avoir React sur votre site.

Vous allez découvrir dans les lignes qui suivent les étapes à suivre pour ajouter du React à votre site web.

Étape #1: ajout d’un conteneur DOM à votre page HTML

Ouvrez la page HTML à modifier puis ajoutez une nouvelle balise div vide :

<!-- ... code HTML existant ... -->
 
<div id="like_button_container"></div>
 
<!-- ... code HTML existant ... -->

Grâce à ce bout de code, vous pouvez manipuler cette balise vide depuis votre code JavaScript.

container-react

Après l’exécution, voici ce que l’on obtient : 

page-react

Étape #2 : ajout des balises de script

Juste avant la balise </body> de votre page HTML, ajouter ces trois balises <script> :

<!-- ... autres contenus HTML ... -->
 
  	<!-- Charger React –->-->
<!-- Remarque : pour le déploiement, remplacez "development.js" par "production.min.js" -->
 


 
  		<!-- Charge notre composant React -->
 

ajout-script-react

Les deux premières balises ont pour rôle de charger React et la dernière charge le code de votre composant.

Étape #3 : création d’un composant React.js

Dans le même répertoire où se trouve votre page HTML, créez un fichier et nommez-le like_button.js : 

creation-fichier-js

Ensuite, copiez et collez le code de démarrage suivant :

'use strict';
const e = React.createElement;
class LikeButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = { liked: false };
  }
  render() {
    if (this.state.liked) {
      return 'You liked this.';
    }
    return e(
      'button',
      { onClick: () => this.setState({ liked: true }) },
      'Like'
    );
  }
}
class-react-js

Après le code de démarrage, il faut ajouter les deux autres lignes de code ci-dessous :

// ... le code de démarrage que vous avez collé ...
const domContainer = document.querySelector('#like_button_container');
ReactDOM.render(e(LikeButton), domContainer);
export-class-react

Ces deux lignes prendront la place vide du contenu div ajouté à la première étape. De cette façon, votre composant React sera affiché sous forme bouton “Like”.

Après l’exécution, nous avons l’affichage suivant : 

bouton-like

Les meilleures bases de données à utiliser avec React Native

Il existe plusieurs systèmes de gestion de base de données, mais seulement quelques-uns s’intègrent parfaitement et facilement au Framework. Voici une liste des meilleures bases de données qui correspondent le mieux à React :

  • Royaume ;
  • SQLite ; 
  • Firebase ;
  • PouchBB ;
  • Pastèque DB ;
  • Vasern ;
  • BerkeleyDB ;

Les avantages apportés par React JS

React JS apporte beaucoup d’avantages aux développeurs qui l’utilisent. Voici les principaux points forts de cette bibliothèque JavaScript :

Le contenu est référençable

C’est cette fonction qui fait la différence avec les autres Frameworks. Avec l’utilisation du serveur Node, on génère le code à la fois du côté client et serveur. Par contre, les autres Frameworks comme AngularJS et Ember.js génèrent un code seulement du côté client.

La rapidité

Tous les composants sont rattachés au propre DOM de React JS qu’il va créer. Cela apporte plus de performance et de flexibilité, car React effectue à chaque fois un calcul et essaie de trouver la partie qui a besoin d’être changée dans le DOM afin d’effectuer la mise à jour de la partie concernée. Ce procédé évite à React de faire des calculs vraiment coûteux.

Les composants sont l’avenir du développement web

React JS a adopté la méthode de Shadow DOM et du Framework Polymer JS et l’a amélioré pour le mettre à un niveau supérieur. ReactJS ne se sert pas de la méthode Shadow DOM, mais il vous donne la possibilité de créer vos propres composants. L’objectif est de vous permettre de les réutiliser plus tard ou les inclure dans vos contenus. Cette fonctionnalité à elle seule prouve à quel point React JS est productif et facilite la gestion de vos composants.

La communauté

La communauté est grandissante et ne cesse jamais de développer des applications natives iPhone et Android. Cela permet d’économiser du temps de développement. Il suffit de se servir de ces bouts de code pour avancer dans le développement de votre application.

Le JavaScript est simple avec React.js

La syntaxe utilisée par React JS est le JSX, qui est un mixage entre le HTML et le JavaScript. Ce n’est pas une obligation d’écrire votre application avec du JSX, mais si vous voulez vite avancer et être plus productif, il est judicieux d’opter pour le JSX.

L’intelligibilité

Le code de React JS est simple à lire. Il est facile de déterminer les différentes fonctionnalités de votre application et c’est bénéfique pour la maintenance et l’expansion de votre projet dans le temps.

Les inconvénients avec React JS

Cependant, malgré tous ses avantages, elle présente également quelques inconvénients. Voici les points que nous avons notés à ce sujet :

Pas de solution native, ce qui ralentit l’application

React native est un Framework JavaScript multiplateforme. Il a fallu créer un lien entre le Framework et le monde natif. C’est ce qui explique la lenteur et la taille élevée de l’espace occupé par une application web utilisant le Framework.

Difficile à déboguer

Il est difficile de vite analyser les bugs avec la plateforme, car elle utilise plusieurs langages : JavaScript, Objective-C, Java et C/C++.

React JS se détourne de la POO

React JS ne se base pas sur les classes, ce qui est un obstacle pour certains développeurs qui travaillent très souvent en programmation orientée objet (POO).

Besoin d’un développeur natif

En fonction de votre projet, il existe toujours quelques fonctionnalités qui nécessitent de faire appel à un développeur natif pour mettre en œuvre ces différentes fonctionnalités.

React.js dépend constamment de Facebook

Être créée par Facebook est quelque chose d’impressionnant, mais cela empêche React Native de s’adapter à certaines entreprises comme Airbnb. Ces dernières ont dû recourir à des développeurs d’application native.

En conclusion, il faut retenir que ReactJS est l’outil le plus recommandé pour tous vos projets de création d’application web Monopage. Le monde de React et celui du développement web évoluent de jour en jour. Pour vous tenir informé lorsque de nouvelles mises à jour apparaissent, vous pouvez visiter le site officiel de React.

Voilà, cet article se termine sur cette conclusion. Vous pouvez maintenant utiliser React JS pour créer des applications Monopages ou juste améliorer la partie front end de vos applications. Pour aller plus loin dans le monde du Big Data et dans vos apprentissages, nous vous invitons à télécharger cette formation gratuite sur l’écosystème Hadoop.


Juvénal JVC

Juvénal est spécialisé depuis 2011 dans la valorisation à large échelle des données. Son but est d'aider les professionnels de la data à développer les compétences indispensables pour réussir dans le Big Data. Il travaille actuellement comme Lead Data Engineer auprès des grands comptes. Lorsqu'il n'est pas en voyage, Juvénal rédige des livres ou est en train de préparer la sortie d'un de  ses livres. Vous pouvez télécharger un extrait de son dernier livre en date ici : https://www.data-transitionnumerique.com/extrait-ecosystme-hadoop/

>