React

Introduction

React (aussi appelé React.js ou ReactJS) est une bibliothèque (library) JavaScript, permettant de développer des applications web qui peuvent être rechargées sans recompiler. React met en oeuvre uniquement les User Interfaces, ce qui correspond dans le pattern Modèle-Vue-Contrôleur (MVC) à la partie "Vue".

Cette bibliothèque JavaScript propose une nouvelle façon de générer les pages web, en les rendant plus naturelles. Les interactions utilisateur sont également plus fluides. React a été conçue pour la simplicité, rapidité et flexibilité (scalibility).

Cette bibliothèque a été créée par Jordan Walke, un ingénieur de Facebook, en 2011 pour une utilisation interne, puis a été utilisée pour développer Instagram en 2012 et rendue libre de droits en 2013. C'est une des bibliothèques les plus populaires, utilisée entre autres par Netflix, Facebook, Airbnb, Yahoo, Instagram ou WhatsApp. Ses principales "concurrentes" sont Vue.js et Angular.js.

L'utilisation de bibliothèque externe pour la gestion des données est obligatoire. React crée uniquement la structure. Redux est une bibliothèque destinée à être le conteneur d'état de l'application.

Ses principales caractéristiques sont :

• une approche déclarative : le développeur crée uniquement les vues pour chaque état de l'application et React se charge du rendering et de la mise à jour des bons composants
• une approche component-based : les composants sont de petites unités qui intègrent les comportements de l'application et sont appelés au besoin. Ils sont indépendants du contexte, donc réutilisables à volonté.
• agnostique à la technology stack : Une tech stack représente les éléments sous-jacents à une application, comme le langage ou les frameworks. React fonctionne bien avec tout type de tech stack.

Installation

Pour installer React, il est nécessaire d'avoir un package manager comme Node.js ou Yarn et entrer cette ligne dans la ligne de commande :

   npm install -g create-react-app

Ensuite, dans la version actuelle, pour créer un nouveau projet appelé AwesomeProject, il suffit d'entrer ces lignes :

   create-react-app awesomeproject
   cd awesomeproject
   npm start

Pour utiliser son application sur son terminal mobile, il est conseillé d'installer Expo sur son téléphone portable (iOS ou Android)

Il existe également des simulateurs pour lancer ces deux plateformes sur son ordinateur.

Vue globale d'une application React

Les éléments principaux de la structure d'une application React sont :

• un fichier app.js qui importe tous les composants créés et gère le rendering des vues de l'application
• un fichier index.js qui importe app.js et génère le fichier index.html
• de composants dont la fonction "render" retourne un ensemble d'éléments devant être affichés à l'écran.

Les composants React

Par convention, les composants définis par les utilisateurs doivent toujours commencer par une majuscule, de manière à les différencier d'un tag DOM traité par React comme un composant intégré du système.

Les composants se catégorisent en deux types :

• Class components :

Chaque composant peut stocker son information locale dans un état et le passer à ses enfants par l'utilisation de props. Cette information est privée et complètement contrôlée par le composant lui-même. Seuls les class components peuvent stocker un état local.

L'état est déclaré dans la partie constructor du composant. Exemple pour un composant nommé ExampleComponent :

Class Example extends Component {
  constructor(props) {
     super(props);
     this.state = {
     selectedElement: null
     }
  }
}

Tous les attributs d'un objet sont passés au composant sous la forme d'un seul objet props , par exemple pour passer des états d'un composant parent à un de ses enfants.

Redux

React utilise la bibliothèque Redux pour organiser l'application. Redux est basé sur une architecture Flux. Grâce à ce type d'architecture comme Flux, les états des composants peuvent être sortis du composant lui-même et stocké dans un store séparé. Ceci permet non seulement de stocker tous les états au même endroit, mais d'homogénéiser la manière d'y accéder dans l'application React qui compter des centaines de composants, avec des interactions multiples. C'est pourquoi Redux est décrit sur son site comme un conteneur d'État prévisible pour applications JS. Comme elle a été rapidement adoptée par la communauté React, Redux lui est souvent associée, mais il est important de savoir qu'elle n'est pas liée uniquement à React et peut être utilisée avec d'autres bibliothèques (Angular, Vue, etc.).

Avantage / Désavantage

Avantage

• La DOM est plus rapide que le modèle de rafraîchissement conventionnel
• Il est possible de réutiliser les composants, ce qui implique un gain de temps
• Le référencement est amélioré du fait de la génération complète de vos pages, du serveur au navigateur
• La vitesse de débogage est améliorée et facilite le travail du développeur
• Il est facilement lisible et a une structure simple à apprendre comparer à d'autre framework
• L'utilisation des avancées dans le langage Java et son écosystème

React Native

React Native

Les développeurs de Facebook ont annoncé en 2015 le lancement de React Native qui permet de développer des applications natives sur iOS, Android et UWP.

La différence entre React et React Native est que le second ne manipule pas directement le DOM mais plutôt des éléments natifs et interprète directement JavaScript sur le terminal en question.

Hello World

Voici, selon le site officiel de React Native, comment générer Hello World affiché sur son écran de portable :

   import React, { Component } from 'react';
   import { AppRegistry, Text } from 'react-native';
   export default class HelloWorldApp extends Component {
     render() {
       return (
         <Text>Hello world!</Text>
       );
     }
   }
   // skip this line if using Create React Native App
   AppRegistry.registerComponent('AwesomeProject', () => HelloWorldApp);

Différence entre React et React-Native

React est un framework qui permet de construire des applications web utilisant du JavaScript.

React Native est une plate-forme de développement permettant de créer des applications mobiles multiplateformes natives.

Bibliographie

¹ https://facebook.github.io/react-native/ [Facebook React Native] (01/2018)

² https://en.wikipedia.org/wiki/React_(JavaScript_library) [Wikipedia] (01/2018)

3 https://fr.wikipedia.org/wiki/React_(JavaScript) [Wikipedia] (01/2019)

4 https://www.ambient-it.net/quelle-sont-les-differences-entre-react-native-et-reactjs/ [Ambient] (01/2019)