REACT !

Les langages qui constituent une page web

Avant de parler de React, nous devons faire un point sur le web et les langages qui constituent une page Web.

Le langage basique sur le web est le HTML – CSS. Le HTML permet de structurer une page web, en crée un DOM (Document Object Model). La composition d’une page web se fait donc avec de petits éléments : les balises html. Quant au CSS, il va nous permettre de rendre la page plus jolie, en donnant aux balises HTML de la couleur, une taille…

Le Javascript

Créé en 1995, le JavaScript est un langage de programmation destiner au web. Le Javascript va nous servir à modifier ces éléments d’une autre façon, et créer de l’interaction entre ces composants, mais aussi de l’animation. On peut également afficher de nouveau contenu sur une page web sans que celle-ci soit rechargée. Avec l’évolution du Web, les technologies ont dû aussi évoluer, on parle maintenant d’applications web où le Javascript va être au cœur de l’application. Mais le langage n’a pas été pensé et créé pour cela, ce qui donne des applications lourdes en développement.

React / Framework

Avec l’évolution des technologies (smartphone, tablette), il est de plus en plus commun pour une grande entreprise d’avoir une application. Mais le développement peut être lourd et compliqué pour créer une application native pour un smartphone, car il va falloir créer 2 applications, une pour Androïd et une autre pour IOS. Ces 2 applications ne sont pas créées de la même façon.

React est un Framework Javascript développé par les équipes de Facebook, pour avoir un site et une application dans le même temps. Ce qui permet de gagner un temps considérable en développement et permet d’avoir un seul langage. Donc plus facile pour la correction de Bug ! Mais qu’est-ce qu’un Framework Javascript ? C’est une bibliothèque de fonctions déjà conçue pour créer des applications plus facilement. On notera que depuis, il existe plusieurs librairies JavaScript pour avoir plus ou moins le même résultat. Entre React.js (facebook), Angular.js (Google), Vue.js … Facebook a rendu open source son langage, ce qui lui a permis d’avoir une très grande popularité au près des développeurs, et cette grande communauté lui permet d’évoluer.

Parmi les sociétés qui utilise Reac,t on peut noter, AirBnb, Netflix …Le Framework n’est pas seulement destiné au web, mais bien pour les 2 (sites Web et application smartphone et tablette avec React Native) ce qui fait de lui un Framework puissant.

React , React Native

React fonctionne avec un système de composants. Ces composants sont constitués de balise HTML en utilisant la syntaxe JSX. On va retrouver aussi des fonctions qui nous permettent d’aller chercher le contenu d’une page vers un serveur sans avoir besoin de changer une page. Le CSS quant à lui est aussi directement intégré dans le Javascript.

Un petit exemple basique d’un composant :

ReactDOM.render(   <h1>Hello, world!</h1>,   document.getElementById(‘root’) );

Ici on retrouve bien notre balise Html ( H1 ) pour afficher un titre. On retrouve également la fonction « render » pour afficher ce qui se trouve entre parenthèse dans notre application, ainsi que tous les éléments : HTML, CSS et Javascript dans un seul type de fichier. On garde donc la même logique de balises avec ses composants pour créer nos sites et applications Web.

React va créer un Dom virtuel, ce qui permet de pouvoir interagir directement avec les composants de la page. Avec React tout est du Javascript comme la structure Html. Et pour utiliser cette structure, les composants sont rendus avec JSX, qui est une Syntaxe comme le XML qui est au sein de Javascript.

Si vous avez des questions sur React, n’hésitez pas à nous contacter, un développeur répondra à toutes vos interrogations.