Présentation de ReactJS

View more Tutorials:

1- Qu'est-ce que React ?

React (Ou  ReactJS, React.js) est une bibliothèque de source ouverte  Javascript pour construire des composants de l'interface réutilisable. Il était créé par  Jordan Walke, un ingénieur en informatique à  Facebook. La personne est affectée par XHP (une plate-forme HTML pour PHP). Le React a d'abord été déployée pour l'application Newsfeed de Facebook en 2011, puis pour Instagram.com en 2012. Il était à code source ouvert (open-sourced) sur JSConf US en mai 2013.
La source de  React est ouverte sur  GitHub :
Cette bibliothèque reçoit maintenant de nombreux intérêts de la communauté. Il est maintenu (maintain) par Facebook et Instagram, avec la contribution des meilleurs développeurs du monde.

De nombreuses grandes entreprises utilisent React pour leurs projets, par exemple Netflix, Airbnb, .. Vous trouverez ci-dessous la liste des projets utilisant React :

2- Problème et solution

Fondamentalement, la construction d'une application MVC de côté client avec une liaison de données bidirectionnelle (2 way data-binding) est assez simple. Toutefois, si le projet est de plus en plus étendu, avec plus de fonctionnalités, ce qui rend la maintenance du projet plus difficile et les performances réduites.

Vous pouvez également résoudre ce problème avec d'autres bibliothèques telles que Backbone.js ou Angular.js. Toutefois, vous trouverez leurs restrictions lorsque votre projet devient de plus en plus grand.
React était néé après  AngularJS. Il est concu pour des grandes applications afin de gérer et étendre facilement. L'objectif principal de  React est la rapidité, la simplicité, la performance et la facilité d'extension.

3- Pourquoi React?

React devient reconnu parcequ'il est créé par  Facebook ?
  • Non, absolument non!
Alors, pourquoi beaucoup de grandes entreprises ont-elles choisi React pour leurs projets ?

Peut résoudre les problèmes de view layer :

Il résout les problèmes de couche View dans le MVC (Model-View-Controller).

Aide à écrire plus facilement le code Javascript avec JSX

Il utilise  JSX (JavaScript Syntax eXtension) (l'extension supplémentaire de syntaxe Javascript). Il est le mélange entre  Javascript et  XML, donc il est plus facile d'écrire du code et plus convivial pour les développeurs.

L'interface "Componentization" 

React permet aux développeur de créer des  Component (Composants) correspondant aux parties de l'interface. Les  component peuvent être reutilisés ou combiné avec autres  Component afin de créer une interface complète.

L'idée de  Component est la clé de résoudre des difficultés lorsque le projet devient plus en plus grand. L'interface est créée à partir du couplage de  Component. Un  Component peut être utilisé à plusieurs places du projet. Il est donc très facile de gérer et de réparer uniquement vos propres Composants.
Component est vraiment la future de l'application de programmation  web, et il est également la characteristique la plus importante que  React fournit.

Stimuler la performance avec Virtual-DOM

Lorsque des données du  Component changent, le  React doit redessiner (rerender) l'interface. Au lieu de faire des changement sur le modèle  DOM de navigateur, il fait un changement sur le modèle virtuel  DOM ( Virtual DOM). Puis il calcule la différence entre ces deux modèles  DOM, et met à jour les différences sur le  DOM du navigateur. Cette approche apporte la performance de l'application.
L'illustration ci-dessus montre que le modèle DOM virtuel et le modèle DOM réel diffèrent uniquement par un élément <img>, le React doit uniquement mettre à jour cet élément pour le modèle DOM réel.

Convivialement avec SEO

Un des gros problèmes des Javascript Framework est qu’il n’est pas convivial avec les moteurs de recherche ( Search Engine). Bien que de nombreuses améliorations aient été apportées, le moteur de recherche ( Search Engine) rencontre toujours de nombreuses difficultés lors de la " lecture" d'applications Web contenant de nombreux Javascripts.
React peut fonctionner à côté du  Client, mais il peut également exécuter à côté du  Server, donc les données renvoyées au navigateur est texte  HTML, il ne pose aucun problème pour les  Search Engine, il est alors convivial avec  SEO.
Il est facile d'écrire UI Testcases.
React native
React Native qui est déclaré par  Facebook deux ans plus tard après  React, fournit la structure de  React pour qu'il puisse développer des applications  Native (iOS, Android UWP) et suit de près le React comme un géant dans le domaine de la programmation d’applications mobiles.
Les grands cerveaux se "soutiennent" derrière React
React est source ouverte par le  Facebook et est développé par plusieurs compétents développeurs dans le monde, par conséquent, le future du  React est également  "assuré".

View more Tutorials: