Bonjour à tous et bienvenue dans ce deuxième article sur React.js ! Aujourd’hui, nous allons voir qu’est-ce que React, découvrir son histoire et son contexte de création, et explorer les concepts de composants et de JSX.
Qu’est-ce que React.js ?
React.js est une bibliothèque JavaScript open-source conçue pour créer des interfaces utilisateur dynamiques et interactives. Contrairement à un framework complet comme Angular ou Vue.js, React se concentre uniquement sur l’interface utilisateur, ce qui le rend léger, performant et flexible.
L’histoire de React.js
L’histoire de React commence chez Facebook en 2011. À cette époque, les ingénieurs de Facebook étaient confrontés à un problème de performance majeur.Chaque mise à jour du fil d’actualité (publications, commentaires, likes, etc.) nécessitait un rafraîchissement complet de la page, ce qui ralentissait considérablement l’expérience utilisateur.Pour résoudre ce problème, un ingénieur de Facebook nommé Jordan Walke a développé une nouvelle approche basée sur le "Virtual DOM". Cette innovation a permis à Facebook de mettre à jour uniquement les éléments modifiés, sans recharger toute la page.Aujourd’hui, React est adopté par de nombreuses grandes entreprises comme Facebook, Instagram, Netflix, Airbnb etc…
Certains peuvent se demander ce qu’est un DOM et un Virtual DOM.En bref, le DOM (Document Object Model) est une représentation en mémoire de la structure HTML d’une page web. Le Virtual DOM, quant à lui, est une copie virtuelle du DOM réel qui permet de comparer l’ancienne et la nouvelle version du DOM pour identifier les changements nécessaires et mettre à jour uniquement les parties modifiées du DOM réel.
Composants et JSX
Un composant est comme un bloc de construction qui peut contenir du texte, des images, des boutons, des formulaires, etc... Voici un expample d’un composant :
function Bonjour() {
return <h1>Salut, bienvenue sur React !</h1>;
}
export default Bonjour;
Dans ce code on peut voir un composant qui affiche un simple message.
JSX, plus précisément JavaScript XML, est une extension de syntaxe utilisée dans React pour écrire du HTML directement dans du JavaScript. Cela est très pratique, car cela rend le code plus lisible et permet de créer des interfaces plus facilement.
Exemple de JSX :
const element = <h1>Hello, React !</h1>;
Sans JSX:
const element = React.createElement('h1', null, 'Hello, React !');
On peut remarquer que sans JSX, le code est plus complexe et moins lisible. En comparaison, avec JSX, le code est plus simple à lire et beaucoup plus proche du HTML.
Pour récapituler, React est une bibliothèque JavaScript qui permet d’améliorer les interfaces utilisateur grâce au Virtual DOM.Le Virtual DOM met à jour uniquement les parties modifiées, ce qui accélère l’affichage.Un composant peut contenir du texte, des images, des boutons, des formulaires et bien plus encore.JSX permet d’écrire du HTML directement dans du JavaScript, rendant ainsi le code plus clair et plus efficace.
Sur ce, je vous dis à la semaine prochaine, où nous allons créer notre première application React.
Sources:
https://blog.risingstack.com/the-history-of-react-js-on-a-timeline/ https://la-cascade.io/articles/le-dom-cest-quoi-exactement https://legacy.reactjs.org/docs/introducing-jsx.html https://www.mygreatlearning.com/react-js/tutorials
Commentaires