React - Bibliothèque Javascript pour le frontend

Auteur: Mohamed CHINY Durée necessaire pour le cours de React - Bibliothèque Javascript pour le frontend Niveau recommandé pour le cours de React - Bibliothèque Javascript pour le frontend Supports vidéo disponibles pour ce cours Exercices de renforcement non disponibles pour ce cours Quiz non disponibles pour ce cours

Page 2: React - Origine et utilité

Toutes les pages

React - Bibliothèque Javascript pour le frontend

React - Une bibliothèque populaire pour le frontend

Débuts de chez Facebook

React (que certains développeurs appellent ReactJS pour éviter toute confusion avec le framework React Native destiné à la création des application mobiles) est une bibliothèque Javascript open source créée au sein de Facebook (ou Meta actuellement) et rendue officielle en 2013. A la base, React a été développé pour mieux gérer le fil d’actualité sur Facebook, avant qu’il devienne un élément clé dans d’autres produits de l’entreprise.

Interface interactives en Single SPA Application (SPA)

React est l’une des bibliothèques front-end les plus utilisées dans le monde, au côté d’Angular et Vue.js. En effet, selon une enquête menée en 2024, React est utilisé dans plus de 45% de sites Web à travers le monde (https://selleo.com/blog/top-10-companies-using-reactjs) et un grand nombre de développeurs qui ont été interrogés ont manifesté une grande satisfaction à son égard.

React: Bibliothèque unopinionated

Si React est aussi populaire c’est généralement en raison de sa simplicité et sa grande flexibilité. En effet, React fait partie des bibliothèques et Frameworks unopinionated.

Un framework unopinionated (ou sans-opinion) est un framework qui offre une grande flexibilité et liberté au développeur et n’impose pas des conventions stricts et rigides, comme la manière de structurer et organiser un projet. D’ailleurs, React est vu comme une bibliothèque et non pas un framework, car il n’impose pas de conventions ou structures strictes, en plus il offre un minimum de modules par défaut afin de monter une interface utilisateur. Néanmoins, le développeur peut toujours télécharger et importer (au choix) des modules supplémentaires pour gérer les autres aspects du projet comme on le verra plus loin dans ce cours.

Un autre avantage de taille en faveur de React consiste dans la possibilité de s’en servir dans React Native qui est un framework destiné à la création des applications mobiles hybrides, ce qui signifie que la maîtrise de React implique systématiquement la possibilité de créer des applications mobiles avec du code natif pour Android et IOS en même temps.

React est un écosystème riche qui jouit de ses propres mécanismes comme le virtual dom, les composants, les hooks, les props ainsi que de nombreux autres fonctionnalités qui lui sont caractéristiques.
Il est possible de coder en React en utilisant du Javascript ou Typescript qui est une sorte de Javascript typé statiquement.

Next.js: une alternative intéressante pour React

Depuis un moment, un framework nommé Next.js a fait son apparition. Il s’agit d’un framework React, c’est-à-dire qu’il étend les fonctionnalités de React en ajoutant de nouvelles options, notamment le Server-Side Rendering. En effet, bien que le SSR soit une technique qui présente quelques inconvénients comme on l’a vu au début de cette vidéo, il est quand même apprécié dans certains contextes, c’est pour cette raison qu’il y a possibilité de l’utiliser en Next.js. Il y a aussi d’autres aspects que Next.js apporte afin d’améliorer les performances et l’expérience utilisateur. Cela dit, que pour utiliser Next.js, il faut avoir une certaine maitrise de React avant, car il en constitue l’essence.

Prérequis

Il est évident que pour coder en React, il faut avoir une bonne maîtrise du langage Javascript, notamment les aspects modernes du langage apporté en ES6, comme la notion de fonctions fléchées, les callbacks, les promesses et fonctions asynchrones etc… Si ce n’est pas le cas, une maîtrise moyenne de Javascript pourrait être suffisante, car comme d’habitude, je vais essayer d’avancer progressivement dans le cours afin que tout le monde puisse trouver son rythme.

React: Définition et utilité en vidéo