Introduction à l'écosystème de React

Présentation

Cet article a pour objectif principal de familiariser avec React et son écosystème. Voici les grands titres du projet :

•     Qu'est-ce que React ?
•     À quoi cela sert-il ?
•     Quels sont les avantages de cette technologie ?
•     React Native (pour le développement d'applications mobiles)
•     Pratique : Installation de l'environnement de développement.  
   

React

React est une bibliothèque JavaScript open source qui sert principalement à créer des interfaces utilisateur nouvelles ou réutilisables. Elle permet aussi de développer les couches d'affichage des applications web et mobiles avec une architecture MVC. Facebook, en 2011, a commencé à avoir beaucoup d'utilisateurs et à être utilisé dans le monde entier, ce qui a poussé la compagnie, connue aujourd'hui sous le nom de META, à vouloir offrir une expérience pertinente, rapide et réactive à ses clients. C'est ici que Jordan Walker, l'un des ingénieurs logiciels de l'entreprise, a décidé de créer React pour satisfaire à ce besoin spécifique. Cette révolution a changé la façon dont on développe des applications web et est devenue l'un des trois frameworks les plus utilisés sur le marché du travail (avec Angular et Node.js).

Le concept de React

React utilise du JSX au lieu de JavaScript classique pour le modèle. Simplement, JSX est un simple JavaScript qui permet d'incorporer et d'utiliser du HTML dans du JavaScript, ce qui facilite la création des sous-composants HTML dans l'application. Voici un exemple :

render() {

    return (

      <div>

        Secondes : {this.state.seconds}

      </div>

    );

  }

Dans cet exemple, la méthode render() retourne un élément <div> qui contient du texte et l'état seconds du composant. L'état seconds est probablement stocké dans le state du composant, ce qui signifie qu'il peut être mis à jour dynamiquement. Ce qui signifie que la vue changera automatiquement à chaque fois que l'état de 'seconds' change.

Maintenant, faisons une comparaison entre le même code en JavaScript et en JSX :

JavaScript

class HelloMessage extends React.Component {

  render() {

    return React.createElement(

      "div",

      null,

      "Salut ",

      this.props.name

    );

  }

}

root.render(React.createElement(HelloMessage, { name: "Thierry" })); 

 JSX

class HelloMessage extends React.Component {

  render() {

    return <div>Salut {this.props.name}</div>;

  }

}

root.render(<HelloMessage name="Thierry" />); 

C'est exactement le même code, mais il est optimisé et plus lisible en JSX.

Routage cote client

React a changé le processus traditionnel des pages web où chaque nouvelle demande entraîne un changement complet de la page. Cette bibliothèque utilise à la place des applications à page unique qui permettent le chargement dynamique du contenu. En effet, React intercepte les requêtes et ne met à jour que ce qui est nécessaire. Cette caractéristique est nommée routage côté client et elle garantit une expérience fluide pour le client.

DOM Virtuel

Le DOM est une interface de programmation qui représente la structure d'une page web sous forme d'un arbre d'objets. Cependant, React utilise un DOM virtuel qui est une copie du DOM réel. Il est rechargé à chaque fois qu'il y a un changement dans l'état des données. Ensuite, React le compare au DOM réel pour déterminer ce qui a changé. En bref, le DOM virtuel permet à React de détecter rapidement les changements et les modifications des données, et de mettre à jour le contenu sans avoir à recharger toute la page.

Les avantages de React :

•     Simple
•     Facile à apprendre
•     Performant
•     Composants réutilisables(eviter de reecrire les memes morceaux de code)
•     Facile à tester
•     Peut etre utiliser pour creer des applications mobile (React native)

Voici un extrait d'un article qui parle de l'application Instagram qui est réalisée avec React blog.hubspot:

L'expérience web d'Instagram est une toile d'éléments interactifs, tous orchestrés par React.js. Chaque image, "j'aime", vue d'histoire et message direct souligne la capacité de React à gérer rapidement les interactions utilisateur complexes. L'interface élégante et conviviale de la plateforme est une preuve de l'expertise de React dans la fourniture d'interactions utilisateur performantes.

Et voici quelques autres applications qui utilisent également React :

•     Netflix
•     Airbnb
•     Uber
•     Reddit
•     Discord

Histoire de React.JS

• La version actuelle de React.JS est la V18.0.0 (avril 2022).
  La première publication publique (V0.3.0) a eu lieu en juillet 2013.
• React.JS a été utilisé pour la première fois en 2011 pour la fonctionnalité de fil d'actualité de Facebook.
• La version actuelle de create-react-app est la v5.0.1 (avril 2022).
• create-react-app inclut des outils intégrés tels que webpack, Babel et ESLint.

React Native

React Native, annoncé par Facebook en 2015, est un framework gratuit de développement d'applications mobiles sur iOS et Android simultanément. Les applications React Native utilisent JSX comme langage et une passerelle pour effectuer le rendu natif des API en Java pour Android et en Swift pour iOS, ce qui leur donne la caractéristique d'une application native et leur permet d'accéder aux différentes fonctionnalités des deux plateformes mobiles.

Différence entre React et React Native

React est une bibliothèque pour développer des applications web en utilisant un DOM virtuel, tandis que React Native est un framework pour développer des applications mobiles natives et multiplateformes qui utilise des API natives pour le rendu des composants mobiles.

Installation du domaine :

Pour React JS

La première étape pour utiliser React sur votre environnement de travail est **d'installer Node.js sur votre pridinateur** :

1.     Il faut aller au site officiel de Node.js
2.     Téléchargez la dernière version disponible pour votre appareil (de préférence MSI pour une installation automatique).

3.     Vous pouvez vérifier l'installation de Node.js sur votre ordinateur en ouvrant un terminal de votre choix et en exécutant les        deux commandes suivantes :

      node -version et  npm -version Cela vous permettra de vérifier l'installation et la version en même temps.

4.     Maintenant, vous devez installer l'outil de création de projets React de la manière suivante :

      npm install -g create-react-app 

5.     Ensuite, pour créer une application React, exécutez la commande suivante :

     npx create-react-app le_nom_du_projet 

6.     Naviguez maintenant vers le répertoire de votre projet :  cd le_nom_du_projet Puis lancez le serveur de développement en utilisant la commande :

    npm start

Pour React Native

1. Installez Node.js
2. Installez un JDK sur votre ordinateur
3. Installez React Native CLI: npm install -g react-native-cli
4. Creez un projet : react-native init NomDuProjet
5. Naviguez dans le repertoire du projet : cd NomDuProjet
6. Lancez l'application : react-native run-android  (Assurez vous d'avoir android studio)

Reference : 

1. Site officiel de React
2. Qu'est-ce que ReactJS et pourquoi devrions-nous utiliser ReactJS ?
3. React Introduction W3SCHOOL
4. What is React.js? Uses, Examples, & More
5. Qu’est-ce que React.js ? Un regard sur la bibliothèque JavaScript populaire
6. Qu’est-ce que le Framework React Native?
7. Apprendre React : Introduction (Youtube)
8. React Native Set up
9. React Set up
10. React explique en 10 min(Youtube)