Introduction :

React (React.js ou ReactJS) est une bibliothèque JavaScript libre et open-source développée par Facebook depuis 2013, actuellement elle est maintenue par Facebook, Instagram et une communauté d’ensemble de développeur et des coopérations.Dans la suite de tutoriel, je vais utiliser le terme ReactJS.

Le but principal de cette bibliothèque est de faciliter la création d'application web monopage, via la création de composants dépendant d'un état et générant une page (ou portion) HTML à chaque changement d'état.

ReactJS est un Framework JavaScript, donc utilisé que dans la vue dans le modèle MVC d’une application web, et comme nous savons, dans cet partie, il existe pas mal de Framework qui font la même chose, je cite, AngularJS que j’utilise souvent, Backbone, ember, …etc, donc nous allons voir dans la suite ce qui diffère ReactJS, des autres Framework, et pour quoi on a autant de Framework pour la vue.

Avant de commencer, jetons un coup d’œil à la communauté utilisant ReactJS, on cite WordPress, qui a annoncé en 2015 que un quart (1/4) de son site a été refait avec ReactJS.

On trouve aussi dans la communauté de ReactJS, Netflix, Yahoo, Airbnb, Sony, Atlassian, Facebook, etc, ce ne sont que des grands noms, qui mettent confiance à cette nouvelle bibliothèque JavaScript.

ReactJS se démarque de ses concurrents par sa flexibilité et ses performances, en travaillant avec un DOM virtuel et en ne mettant à jour le rendu dans le navigateur qu'en cas de nécessité.

1. limites d’AngularJS !!

UDans cette partie je vais comparer avec AngularJS, la bibliothèque avec laquelle j’ai travaillé, depuis 2 ans (A vrai dire, on peut pas comparer AngularJS avec ReactJS, on va expliquer ça dans la prochaine partie).

Jusqu’à le début de l’année 2016, et depuis sa sortie, AngularJS s’impose comme le Framework le plus répandu dans les Framework web, en France, les sociétés ne cessent de chercher de nouveau profile AngularJS (généralement Java/J2E – AngularJS), mais la question est « est-ce que AngularJS est le Framework le plus robuste, et le plus performant ? »

Avant de parler sur les point faible d’AngularJS, rappelons qu’il un Framework complet, qui contient tout ce dont on a besoin pour construire une application single page (SPA – Single Page Application), ainsi que son architecture est basé sur de bonnes pratiques (injection de dépendances, modules, routage, …). C’est donc un Framework assez complet, pour faire tout d’une manière simple, par contre certain définition et conception dans AngularJS pose certain problème comme :

La conception sous forme de Controller, je tiens a cité que dans les petits projets, dont on a pas vraiment une communication entre les différents éléments, les Controller ne pose pas du problème, et on se rend pas compte, mais lorsqu’on est amené à travailler sur un projet de taille importante là ou gère des donnée de très grande taille, et que on est obligé de deviser sur plusieurs Controller, on aura vraiment un grand problème pour gérer les éléments commun, entre diffèrent Controller, une chose qu’on peut pas faire, et qu’on suggère d’utiliser des Controller imbriqués, qui deviens rapidement un bordel.

Ce que j’ai remarqué dans un projet pour un client, le rootScope n’arrive pas à charger les donnée qui lui ont été affecté, tout en causant un ralentissement du navigateur (fuite de mémoire JavaScript), pour résoudre cela, j’été obligé, de vérifier, si le rootScope contient mes données, sinon récupérer une nouvelle fois la valeur et l’affecter, je fais ça sur tous les Controller, le comportementde rootScope des fois est inattendu. En plus rootScope perd sa valeur au simple rafraichissement du navigateur, imagine que tu l’utilise dans une application pour gérer les variable partager entre les Controller, et ton client actualise la page, rien ne va marcher, le scope aussi as des comportements inattendu.

AngularJS utilise pour la détection des changementsdes watchers, lorsqu’une action est effectuée, tous les watchers sont lancés en boucles ce qui est très lourd dans un grand projet.

Avec AngularJS 2, la notion de Two-Way data binding n’est plus par défaut (sauf ng-model), ce qui améliore un peux les performances.

AngularJS est un Framework, très performant, en matière de validation de formulaire, de communication REST, de filtre, mais il est vraiment à éviter pour le graphisme, l’utilisation de ng-if, et ng-show, etc est vraiment lourd.

En attendant les améliorations de Google sur AngularJS, jetons un coup d’œil sur ce qui est dit à propos de ReactJS et de quoi s’agit-il, avant d’abordé sa syntaxe et son fonctionnement.

2. ReactJS

React est une bibliothèque JavaScript développée par Facebook comme nous avons déjà dit. Il est utilisé pour le traitement de vue couche pour le Web et les applications mobiles. ReactJS nous permet de créer des composants d'interface réutilisables. Il est actuellement l'une des bibliothèques les plus populaires de JavaScript et il a des bases solides et une grande communauté derrière elle.

Bibliothèque de vue.

Nous avons dit en haut que AngularJS n’est pas vraiment comparable avec ReactJS, c’été juste que AngularJS est une bibliothèque complète, qui comporte une couche de vue, par contre ReactJS n’est que la vue, ReactJS est une bibliothèque de vue, il n’est pas un Framework MVC comme l’est AngularJS, ReactJS n’est autre que le ‘V’ dans le MVC, et vous devez regarder ailleurs dans ce qui concerne le ‘M’ et le ‘C’.

Ce tutoriel va aider les développeurs frontend qui veulent connaitreet travailleravec ReactJS. Nous allons essayer d'introduire chaque concept en montrant des petits exemples de code simples. Nous allons introduire des éléments supplémentaires qui fonctionnent bien avec ReactJS pour vous aider à apprendre certaines bonnes pratiques.

Pour ce tutoriel, des connaissances en JavaScript, HTML5 et CSS sont requise, même si en ReactJS on utilise JSX, pas HTML, mais ils sont similaire.