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="https://unpkg.com/react@16/umd/react.development.js"></script> : permet de
gérer les composants.
. <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-
dom.development.js"></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="https://unpkg.com/@babel/standalone/babel.min.js"></script>. 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 : ReactDOM.render(<element>contenu</element>, document.getElementById(‘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
React.Component
 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(){…}
ReactDOM.render(<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 <React.Fragment>.

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.).
