React est une librairie (également appelée bibliothèque) JavaScript permettant de créer des interfaces utilisateurs pour des applications.
Lorsqu'on prend React avec son écosystème officiel (principalement create-react-app, Webpack, Babel, Jest, Test Utils, Cypress, Recoil) et non officiel (React Router par exemple), on parle alors du framework React.
React a été créé par Jordan Walke, un ingénieur de Facebook en 2011 et a été utilisé dans le fil d’actualité dès 2011 puis dans Instagram dès 2012.
Il permet de créer de très grandes applications qui peuvent charger des données sans avoir à recharger la page.
Le framework le plus utilisé et apprécié
Il s’agit aujourd’hui du framework front-end le plus utilisé au monde.
React est utilisé par Netflix, Yahoo, Airbnb, Sony, Atlassian, Facebook, Instagram, WhatsApp, Microsoft, Paypal et tant d’autres entreprises.
Sur npm il s’agit du framework front le plus téléchargé mensuellement devant Angular et Vue :
Selon un sondage de Stackoverflow réalisé en 2022, il s’agit du framework Web que les développeurs souhaitent le plus apprendre :
Avantages de React
Des performances incroyables
React utilise un DOM virtuel (que nous étudierons en détails) pour obtenir des performances très supérieures à du JavaScript natif.
En effet, au lieu de modifier directement le DOM qui est l’arbre des éléments HTML, ce qui est coûteux en performance, React va calculer à l’aide d’un DOM virtuel tous les changements optimaux à effectuer sur le DOM avant de les effectuer.
Cette stratégie permet des gains de performance très importants.
Utilisation de JSX et philosophie de la librairie
Avec React au lieu d’utiliser du HTML, nous utilisons du JSX.
Ce n’est pas obligatoire mais fortement recommandé.
Le JSX permet d’écrire du code HTML dans du code JavaScript.
Ce code sera ensuite transpilé en JavaScript.
Nous verrons tous les avantages d’utiliser ce JavaScript amélioré, en même temps que nous l’apprendrons, dans le chapitre suivant.
React a pour philosophie de ne pas séparer la structure HTML, le style CSS et la logique JavaScript, mais de séparer l’application en composants qui sont complets et construits autour d’une fonctionnalité.
Cette approche permet de créer des applications qui soient plus facilement maintenables car elles sont mieux structurées.
Elle permet également une réutilisation des composants dans plusieurs endroits de votre application.
Utilisation de create-react-app
L’équipe de React à Facebook maintient toujours à jour un projet de base optimisé pour React avec de nombreuses configurations effectuées pour vous.
Il permet de démarrer sur une application React fonctionnelle pour commencer à développer ce qui est extrêmement appréciable.
Bien sûr nous l’étudierons et nous l’utiliserons amplement dans le cours !
Une communauté énorme
La communauté de développeurs React est la plus importante de tous les frameworks front.
Il vous sera facile de trouver des réponses sur Stackoverflow si vous bloquez ! Mais nous sommes là pour vous aider et le cours répondra à toutes vos questions !
Un écosystème fabuleux
React possède un écosystème incroyable, il existe en effet plusieurs milliers de librairies qui sont sont construites pour être utilisés spécifiquement avec React.
Dans ce cours nous étudierons les plus importantes qui vous permettront de réaliser des applications très complexes avec notamment React Router et Recoil.
Pour tout ce que vous voudrez faire, vous pouvez être certain d’une chose : il y aura une librairie de l'écosystème React pour vous y aider !
Le mobile avec React Native
Grâce à React Native vous pouvez facilement porter votre application React sur mobile.
React Native permet de développer des composants comme sur React pour une application mobile hybride (disponible sur iOS et Android).
Les Single Page Applications
React est un framework permettant de construire des Single Page Applications (SPA).
Vous connaissez forcément les SPA : Gmail, Google Analytics, Trello, Dropbox en sont des exemples parmi tant d’autres.
De nombreux frameworks front ont adopté cette architecture (Vue, Angular, React, Ember, Meteor etc). Mais de quoi s’agit-il exactement ?
Une SPA est une application qui fonctionne dans un navigateur sans que l’utilisateur n’ait besoin de recharger la page.
Le principe est de simuler une application hors ligne : pas de rechargement des pages, de la rapidité, pas d’attente supplémentaire due au réseau etc.
Les principales caractéristiques de la SPA sont :
- le rendu est effectué côté client (quand un élément change, la page est modifiée grâce aux scripts de l’application chargée côté client).
- pour fonctionner elle charge en principe une seule fois l’application (HTML, CSS et scripts).
- seules les données sont transmises, si nécessaire, entre le serveur et l’application client (le plus souvent au format JSON).
- le développement mobile est simplifié car le code backend peut être utilisé que l’application soit Web ou native (iOS, Android).
- elle est particulièrement adaptée pour stocker les données localement et de n’envoyer des requêtes au serveur lorsque c’est nécessaire.
