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 et Angular.

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.
• 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, en préambule, Node.js et entrer cette ligne dans la ligne de commande :

   npm install -g create-react-native-app

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

   create-react-native-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.

Flux Redux

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)