React

Introduction

React qui peut être appelé aussi React.js ou ReactJS est une librairie JavaScript.

Cela permet de développer des application web qui peuvent être rechargée 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.

Cette librairie a été mis en place par un ingénieur de Facebook en 2011 pour une utilisation interne. Elle a été utilisé pour développer Instagram en 2012 et rendu libre de droits en 2013.

Cette librairie est utilisée par Netfllix, Facebook, Airbnb, Yahoo, Instagram ou Whatsapp.

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 application.

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.

Avantage / Désavantage

Avantage

• La DOM esst 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
• La 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 strucutre 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)