Plongez dans le monde de React
Bonjour et bienvenue dans le cœur du cours de React ! Plongeons-nous dès maintenant dans l'univers de notre bibliothèque préférée.
Découvrez le monde des frameworks front-end
Vous en avez peut-être déjà entendu parler, les frameworks front-end sont partout. Toutes les grandes entreprises de la Tech les utilisent au quotidien : Facebook, Twitter, Amazon, GitLab, pour n'en citer que quelques-unes. Ce sont également de nombreuses startups, dès leur création, qui se lancent sur React, Vue, et d'autres ; ou encore les grandes entreprises qui font évoluer leur codebase pour se tourner vers elles.
Mais avant d'aller plus loin, qu'est-ce qu'un framework en code ?
On appelle framework front-end tout ensemble de classes, fonctions et utilitaires qui nous facilite la création d'applications web. Ces outils sont compatibles avec tous les navigateurs.
Plus généralement, le but est d'éviter de réinventer la roue pour n'importe quel besoin classique d'une application : gestion de l'interface utilisateur, des événements, du DOM, des formulaires, de l’évolution dans le temps des données manipulées par l'interface, etc. En plus, initialiser une base de code avec un framework simplifie non seulement votre prise de marques, mais aussi l’intégration d’une nouvelle personne sur la codebase.
Découvrez React, l’un des frameworks JavaScript les plus populaires
Lorsqu'on parle de frameworks JavaScript, les noms de React, Vue.js et Angular ne sont jamais bien loin. Et il en existe d'autres (Ember, Meteor, Backbone…). Chacun a ses spécificités, ses avantages et ses inconvénients.
Celui qui nous intéresse dans le cadre de ce cours est l’un des plus populaires d'entre eux : je parle bien entendu de React.
React est un projet open-source, distribué sous la licence MIT et piloté par Facebook. Leurs produits web et mobile tels que Facebook, Messenger, Instagram, reposent en grande partie sur cette technologie. Comme React est open-source, vous pouvez accéder au code source directement sur GitHub, proposer une feature, ou même notifier d'un problème (issue).
L'ambition de React est de créer des interfaces utilisateurs, avec un outil rapide et modulaire. L'idée principale derrière React est que vous construisiez votre application à partir de composants. Un composant regroupe à la fois le HTML, le JS et le CSS, créés sur mesure pour vos besoins, et que vous pouvez réutiliser pour construire des interfaces utilisateurs.
Attendez… Je ne comprends pas. Un coup j’entends dire que React n'est pas un framework à proprement parler, mais une library (bibliothèque) ? Puis après on en parle comme d'un framework ?!
En effet, sur sa documentation, React se présente comme "une bibliothèque JavaScript pour créer des interfaces utilisateurs". Pourtant, depuis tout à l'heure je vous parle de framework. 🤔 En fait, la frontière entre framework et bibliothèque reste assez fine, surtout dans le cas de React ; et il n'est pas simple de séparer parfaitement l'un de l'autre.
Pour faire simple, vous pouvez vous dire qu'un framework est un ensemble d'outils ultra complets permettant de créer une application de A à Z et fournissant tous les outils nécessaires au développement d'une application. Alors qu'une bibliothèque s'ajoute à une partie de votre application.
Angular, par exemple, qui permet de créer une solution complète où tous les outils sont déjà fournis, comme une solution dédiée au routing ou bien aux appels API, est un framework, pour lequel on attend de vous de respecter une certaine architecture.
En revanche, avec une bibliothèque, tout est beaucoup plus flexible. La bibliothèque vous fournit un ensemble de ressources que vous pouvez combiner avec d'autres bibliothèques pour construire votre application.
À proprement parler, React… est une bibliothèque. Mais son écosystème est tellement développé maintenant qu'on peut aussi bien le considérer comme un framework à part entière ! 🙃 Ici, j'utiliserai le terme de bibliothèque pour parler de React, mais je ne me formalise pas si j'entends quelqu'un utiliser le terme de framework.
Pourquoi React
Je vous parlais plus tôt des avantages/inconvénients de chaque framework. Sans même rentrer dans l'aspect technique, voici quelques-uns des atouts de React :
Sa communauté
Particulièrement active, elle vous facilite la vie. Lorsque vous cherchez votre problème sur Internet, il est quasiment impossible que personne n'ait déjà rencontré le même problème que vous. D'autant plus que React compte de très grosses entreprises parmi ses utilisateurs (Netflix, Twitter, Paypal, Airbnb pour n'en citer que quelques-unes). Vous pouvez être sûr qu'un autre ingénieur s'est déjà trouvé confronté à votre problème. Par exemple, lorsque vous trouvez une question posée sur Stack Overflow (en anglais). L’équipe de React répond également aux issues (problèmes) sur le repository GitHub de React (en anglais). Mais il existe un nombre immense de newsletters, blogs, chaînes YouTube, créés par des utilisateurs - leur dynamisme vous donne toujours envie de tester de nouveaux outils. Je vous en conseillerai d’ailleurs quelques-uns dans le dernier chapitre de ce cours.
Sa documentation
La documentation de React est riche, régulièrement mise à jour et intégralement traduite en français 🇫🇷.
Ses opportunités professionnelles
Comme il s'agit d’un des frameworks les plus populaires, les opportunités professionnelles sont particulièrement nombreuses. Dans l'enquête annuelle State of JS de 2022, 100 % des personnes déclaraient connaître React, et sur 33 338 sondés, 27 289 déclaraient utiliser React (qui a d'ailleurs gagné l'Award 2019 de la technologie la plus utilisée).
Alors, je ne suis peut-être pas très objective car il s'agit de ma bibliothèque de prédilection, mais vous l'aurez compris : maîtriser React offre de nombreux avantages.
Transformez un simple fichier HTML en app React
Avec ce que je viens de vous dire, vous avez sûrement déjà hâte de vous mettre au travail 💪 ?
Ça tombe bien, parce que c'était au programme !
Nous allons maintenant transformer un fichier HTML en app React.
Exploitez les liens CDN
Nous allons utiliser des liens CDN pour ajouter React à un fichier HTML.
C’est quoi, un lien CDN ?
Ajouté dans une balise script , le lien CDN (content delivery network) permet notamment d'importer une bibliothèque directement dans le code HTML.
Je vais vous faire une petite démo pour vous montrer comment ça marche.
Vous avez vu, en quelques étapes on a une app React qui tourne 🎉.
Tirez profit de la simplicité de CodePen
Vous pouvez vous exercer directement sur un fichier HTML, ou bien dans un espace de travail comme CodePen. À partir de maintenant, pour vous simplifier la vie, je vais vous faire la démo dans CodePen.
Commençons par créer un nouveau Pen. Vous avez votre fichier HTML, CSS et JavaScript.
Tout d'abord, on va définir dans le HTML où va vivre notre app React, tout simplement avec une id :
<div id="react-goes-here">
<!-- Le contenu de cet élément HTML sera remplacé par mes composants React -->
</div>En d'autres termes, ça veut dire qu'on va préciser à notre JavaScript où s'attacher et où construire ses éléments.
Et c'est parti pour le JS !
Essayez maintenant de faire un console.log de React :
Ça ne donne rien. C'est parce qu'une petite configuration est nécessaire : comme si vous aviez importé vos liens React, React DOM et Babel, vous pouvez les ajouter à votre CodePen en cliquant sur les paramètres à côté de JS.
On a ici importé nos liens CDN indispensables pour notre app React. Pour vous donner un peu de contexte :
React – c'est l'API qui permettra de gérer les composants.
React DOM – c’est l'API qui est responsable de générer les composants dans le DOM.
Babel – cet outil permet d'utiliser les dernières syntaxes de JS dans le navigateur (ES6+).
Vous l’avez peut-être déjà vu, mais peut-être que vous ne vous en souvenez plus : le DOM, c’est quoi ?
Le DOM (Document Object Model), est généré par votre navigateur depuis le HTML pour afficher une page. Il correspond à une sorte d'arbre de nœuds. Vous pouvez d'ailleurs manipuler votre DOM dans l'outil "Elements" des Developpers Tools de votre navigateur. Si vous voulez revoir vos notions, vous pouvez retrouver le chapitre "Générez le contenu de votre page grâce au DOM" du cours sur JavaScript.
React lui-même ne manipule pas directement le DOM du navigateur. À la place, React génère un DOM virtuel, distinct du DOM des navigateurs. Au moment venu, il réconcilie ce DOM virtuel avec le DOM du navigateur, en prenant soin de minimiser le nombre d'opérations nécessaires. C’est ce qui nous permet d’avoir de super performances, et d’utiliser React dans de nombreux contextes, et pas seulement au sein du navigateur même, typiquement les applications mobiles natives, etc.
Créez votre premier composant
Écrivons maintenant notre premier composant.
Ici, je vais utiliser des composants qu’on appelle functional components (composants fonction), c’est-à-dire une fonction qui retourne un élément React. Nous rentrerons un peu plus dans le détail des composants au chapitre suivant.
Commençons avec cette première fonction, MyComponent :
function MyComponent() {
return (<div>Hello OpenClassrooms 👋</div>)
}En copiant ce code dans la partie JS, rien ne se passe. Pas de panique ! C'est normal : il vous reste encore à attacher votre composant React à votre HTML.
Attachez React à votre HTML
On va dès maintenant utiliser ReactDOM pour s'attacher à notre HTML.
Dans le snippet ci-dessous, l’id react-goes-here permet de préciser où notre app React va vivre dans notre HTML. Ensuite, on va ordonner à ReactDOM de générer (render) notre composant React qui s’appelle MyComponent.
ReactDOM.render(<MyComponent />, document.getElementById("react-goes-here"))Et tadaaa 🎉
Notre composant s'affiche !
Félicitations à vous ! Vous venez d'afficher votre premier composant React ! Si vous voulez voir à quoi ça ressemble, il y a mon CodePen juste ici.
Exercez-vous
Je vous avais parlé au chapitre précédent d'un exercice fil rouge qui nous accompagnerait tout au long de ce cours. Vous vous en souvenez ? Nous allons créer ensemble un site pour un magasin de plantes, La maison jungle !
Il est temps de mettre en pratique ce que vous venez de voir.
Votre mission, si vous l'acceptez, est la suivante :
Créer le premier composant Header qui contient le nom de notre magasin : La maison jungle. Le composant Header correspond à une balise
h1.L'intégrer dans un élément HTML qui aura pour id "root".
Vous trouverez le lien du CodePen pour commencer l'exercice ici. Vous êtes des petits chanceux : je vous ai déjà paramétré React, ReactDOM et Babel.
Et voici la solution que je vous propose, juste ici.
Vous pouvez faire les exercices directement dans les liens, ou bien créer votre propre compte CodePen, et copier-coller le contenu au fur et à mesure. Ou même le faire en local dans des fichiers HTML, c’est vraiment comme vous préférez. 🤗
En résumé
Un framework JS est un ensemble de classes, fonctions et utilitaires qui nous facilitent la création d’applications pour les navigateurs ou mobiles.
L’un des outils les plus populaires, React, qui est une bibliothèque aussi bien qu’un framework, permet de créer des interfaces utilisateurs.
L’approche technique de React est de créer du code modulaire, à base de composants réutilisables.
Trois des avantages de React sont sa communauté, sa documentation et ses opportunités professionnelles.
Vous savez maintenant comment transformer un simple fichier de HTML en React – et avez créé votre premier composant !
Dans le prochain chapitre, nous aborderons les composants React un peu plus en détail. Nous nous attellerons à la syntaxe propre à React : le JSX ; nous comprendrons sa logique inhérente et nous verrons même comment ajouter du style 😎.
Alors, vous aussi vous voulez créer des composants de pros ? Rendez-vous au prochain chapitre !
