React JS
Un framework JS est un ensemble de classes, fonctions et utilitaires qui nous facilitent la
création d’applications pour les navigateurs ou mobiles.
React : bibliothèque JavaScript pour créer des interfaces utilisateurs avec un outil rapide et
modulaire, à base de composants réutilisables. (« un composant = HTML + CSS + JS »).
NB : La différence entre framework et library : 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.
NB : le lien CDN (content delivery network) permet notamment d'importer une bibliothèque
directement dans le code HTML.
Les liens CDN de React sont :
. <script crossorigin
src="[Link] : permet de
gérer les composants.
. <script crossorigin src="[Link]
[Link]"></script> : responsable de générer les composants dans le DOM.
NB : Pour pouvoir coder dans la dernière version de JavaScript, nous avons besoin de l’outil
Babel. Qu’on peut l’intégrer avec : <script
src="[Link] Pour indiquer que
vous allez travailler avec la dernière version de JavaScript (ES6+) dans ce morceau de script, il
faut ajouter l’attribut type=ˮtext/babelˮ à la balise script concernée.
NB : [Link](<element>contenu</element>, [Link](‘id)) :
remplace le contenu de l’élément avec l’ID id avec le contenu passé dans le premier
paramètre.
Les composants React :
. Functional components (composants fonction) : fonction qui retourne un élément React.
Attention : la fonction doit obligatoirement commencer par une majuscule.
. Class components (composants classes) : avec la syntaxe : class MyComponent extends
[Link]
JSX : extension JavaScript créée par React, qui permet d’utiliser notre syntaxe sous forme de
tags directement dans le code JavaScript. ( ex : function Tag(){…}
[Link](<Tag/>,where) ).
NB : Dans render le premier paramètre, deux composants doivent toujours être wrappés dans
un seul composant parent. Sinon on peut les entourés par <[Link]>.
NB : On utilise les accolades pour appliquer des expressions JavaScript directement dans notre
JSX pour : faire des opérations mathématiques, modifier la case des chaînes de caractères,
utiliser des ternaires, afficher une variable JS…
Create React App (CRA) est la boîte à outils créée par Facebook, qui reste encore la
référence pour initier un projet React.
Webpack nous permet d’importer notre composant aussi facilement, avec import. Cet outil
particulièrement utile est essentiel pour lier les fichiers entre eux, afin qu’ils soient
interprétés par le navigateur.
À partir d’une liste de données, map() permet de créer une liste de composants React.
La prop key est indispensable dans les listes de composants. Si vous voulez éviter les bugs, la
prop key doit : - être unique au sein de la liste ; - perdurer dans le temps.
La best practice pour créer une key est d’utiliser l’id unique associée à une donnée, et de ne
pas vous contenter d'utiliser l'index de l'élément dans la liste.
In practice, you can give a prop any possible value in JavaScript, but syntactically, in JSX, you
only have two options:
A String literal, marked by quotes.
Curly braces {} for everything else (boolean, number, JavaScript expression, etc.).
