S’il y a bien une librairie dont on parle beaucoup ces derniers temps, c’est bien React.js.

Il est devenu une référence incontournable pour le développement d’expériences utilisateurs riches dans le navigateur web, y compris sur mobiles.

React est une bibliothèque JavaScript développée par Facebook en 2013 dans le but de faciliter la création de composants UI dynamiques et réutilisables.

Il permet une représentation beaucoup plus rapide du DOM (Document Object Model) qui consiste en une représentation interne des objets de React.

En gros, React permet de décomposer les pages en petits composants indépendants, intelligents et réutilisables, et tout cela avec du simple JavaScript, en apportant une véritable touche de modernité lors de la création des interfaces.

Mais alors, d’où lui vient cette réputation ? Pourquoi développer son application sous React JS ? Et comment ? C’est ce que HaiRun Technology va vous faire découvrir dans cet article.

Pourquoi React.JS est si populaire ?

Le succès de React JS ne fait que grandir, car depuis 2015,  il a été adopté par la majorité des géants du web tels que Netflix, Twitter, Airbnb, Pinterest, …

React est un projet open source , distribué sous la très populaire licence MIT et piloté par Facebook (comme nous l’avons vu précédemment) dont tous les produits web et mobiles reposent sur cette technologie. En octobre 2017, plus de 20 000 modules sur npm (le principal référentiel de modules de développement) avaient un rapport à l’écosystème React.

En 2018 encore, d’après la grande enquête The State of JavaScript 2018 , React JS reste de loin le plus utilisé (64,8%)

Au départ, le web avait été conçu pour des documents, et non pour des applications. Cela se ressentait dans le fonctionnement de HTML, de CSS et du DOM.

React détruit les règles pré-établies du développement web, telles que la séparation stricte entre la structure (HTML), l’aspect (CSS) et le comportement (JS), écrits dans des fichiers bien distincts, pour revenir à la notion fondamentale de composant autonome, cohérent et complet.

Il est tout de même important de rappeler que tous les chalengeurs actuels de React , à savoir : Angular, Ember, Vue.js,    rejoignent cette philosophie. Ils diffèrent uniquement dans la syntaxe et les détails d’implémentation. Par contre, leur écosystème, outillages et nombre de déploiements majeurs, sont beaucoup plus réduits que pour React.

Pourquoi développer son application sous React.JS 

SEO :

Pour ce qui est du SEO, on peut rendre les sites facilement référençables par Google grâce à l’utilisation d’un serveur Node. En effet, le code peut être généré côté client et serveur à la différence des autres frameworks JS traditionnels.

Rapidité :

Pour les clients il permet d’avoir un site réactif, rapide et évolutif. Pour les développeurs il propose l’intérêt d’être modulable.  Lorsqu’une modification a besoin d’être faite, React calcule les changements à opérer et rafraichit uniquement les parties impactées. Les opérations coûteuses sont ainsi évitées.

Le découpage :

React est basé sur des composants réutilisables, testables et combinables. Lorsqu’un problème est identifié dans un composant, il est possible de le corriger pour de bon, car lorsque vous modifiez un composant, les effets de bord sont limités à ce composant uniquement.

Une communauté active

React.JS a rapidement séduit la communauté des développeurs JavaScript. Et c’est sans parler de React Native qui de son côté permet de publier des applications natives iPhone et Android. Ce qui permet d’économiser du temps de développement considérable   

Le langage

React ne se limite pas à la création d’application web, il peut également être utilisé pour beaucoup d’autres choses. Voici quelques exemples :

  • react-native pour la création d’application mobile;
  • react-sketch pour la création de maquettes sketch;
  • react-word pour la création de documents word;
  • react-pdf pour la création de documents PDF, …

Comment développer son application sous React JS 

ReactJS fonctionne en créant des “components”, correspondants à un composant dans une page HTML.

L’intérêt de ReactJS est que ses composants correspondent à un élément de la page, avec son état propre et ses actions associées. Ces éléments ont leur propre état, leurs propres données et sont indépendants les uns des autres.

Voici différentes méthodes et champs possibles pour créer un composant :

  • props : ce sont les propriétés qui sont données en paramètre du composant. Il s’agira souvent d’une configuration.
  • state : contient l’état interne du composant. Celui-ci peut être la liste des éléments à afficher, une valeur ou une configuration.
  • getInitialState : méthode permettant d’initialiser le “state” interne du composant. La méthode retourne un objet qui sera ensuite mappé sur this.state.
  • setState : méthode permettant simplement de mettre à jour le “state”. Elle est principalement appelée de l’extérieur pour mettre à jour les données.
  • componantDidMount : appelée lors de la création du composant, elle permet d’initialiser des méthodes et données.
  • componantWillUnmount : Appeler lors de la destruction du composant. Peut être utilisé pour transmettre des données lors de cette phase.
  • render : se charge de l’affichage du composant (comme vu auparavant).

Bien sûr, cette liste n’est pas exhaustive, il existe encore d’autres méthodes, mais ce sont ici les principales. On peut alors créer des composants plus compliqués

Redux :

Redux se présente comme un système de centralisation des données et des actions. React est particulièrement convaincant lorsqu’on commence, mais on se retrouve rapidement confronté à certains problèmes de conception lorsque nos applications deviennent un peu plus élaborées qu’une simple liste.

Par exemple, admettons que nous ayons divers composants au sein de notre page, mais qu’ils doivent partager certaines propriétés, nous nous retrouvons rapidement dans une impasse. Redux propose une solution qui n’est pas toujours facile à comprendre sur le site.

Avec Redux, on ajoute la notion de store. Un store est global. Il contient toutes les informations de tous les composants qui y sont rattachés. Lorsqu’un composant a lancé une action et entraîne une modification du store (dit aussi “state global”), le composant B aura également les nouvelles données du composant A. Chaque composant peut mettre en place des comportements différents en fonction de l’état des autres

Graphql :

Avec react, on peut utiliser les API Graphql pour permettre de développer une application dynamique, riche en interactivité, fiable et facilement maintenable. Chez HaiRun, on utilise Apollo Client comme client Graphql. Apollo peut remplacer Redux, et réduire ainsi la complexité de la structure des codes de l’application.

GraphQL est un langage de requête pour les API et un environnement d’exécution permettant de répondre à ces requêtes avec vos données existantes. Il fournit une description complète et compréhensible des données de votre API, donne aux clients le pouvoir de demander exactement ce dont ils ont besoin et rien de plus, facilite l’évolution des API au fil du temps et permet des outils de développement puissants. Il propose avec, une alternative aux API REST.

Externalisation projet React : développement React sur mesure.

Si vous recherchez une solution performante et rentable, externaliser votre projet de développement React est la solution.

Pour que votre projet React soit un succès, HaiRun Technology s’appuie sur:

  • Une équipe d’experts pouvant analyser vos demandes et trouver la solution la plus adaptée;
  • Un budget de réalisation modulable suivant vos besoins;
  • Plusieurs développeurs React à temps plein travaillant en régies, prêts à vous fournir des solutions sur mesure;
  • Des années d’expérience dans le développement de projets, dans divers domaines.

N’hésitez pas à nous soumettre vos projets pour que l’on puisse les réaliser ENSEMBLE.

Sources :

  • alsacreations.com
  • programmez.com
  • lemondeinformatique.fr
  • wikipedia.org

Il

il