Découverte
Notions avancées
Les hooks
Notions avancées
TP
TP Recettes: AuthentificationRéservé aux membres premiums
30 min
TP Recettes: Récupération des ingrédientsRéservé aux membres premiums
38 min
TP Recettes: Gestion des ingrédientsRéservé aux membres premiums
29 min
TP Recettes: Gestion des recettesRéservé aux membres premiums
39 min
TP Recettes: Création d'une recetteRéservé aux membres premiums
47 min
TP Recettes: Edition d'une recetteRéservé aux membres premiums
25 min
Conclusion
Conclusion
04 min

Pour découvrir React nous avons utiliser la fonction React.createElement mais cela produit un code qui est assez verbeux et assez peu lisible. Pour simplifier la création d'éléments React il est possible d'utiliser une syntaxe spécifique : La syntaxe JSX.

Cette syntaxe étant propre à React elle n'est pas comprise par le navigateur et il nous faudra donc un outil pour convertir le JSX en JavaScript. On peut utiliser différents outils pour cela (Webpack avec babel, Parcel, Rollup avec babel, Esbuild...) mais pour commencer notre découverte on va se contenter de charger babel en mode standalone (cette approche ne sera utilisée qu'à des fins didactique).

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="app.js" type="text/babel" defer>

Cela permet de travailler avec React dans le navigateur et d'expérimenter. Nous verrons les outils qui permettent de convertir le JSX en React plus tard dans cette formation.