NOUVEAU
seance4 2 travaux pratiques 1
4. Le Langage JSX 4.1. Construire une première page On souhaite créer l’interface suivante en utilisant JSX
Filière : Divers DEV — Développement informatique (TDI, développement digital)
📥 Télécharger le PDF (746 Ko)Sommaire du document
- 4. Le Langage JSX
- 4.1. Construire une première page
- 1. Créer un composant <Product /> qui permet d’afficher un produit
- 2. Créer un composant <Products /> qui permet d’afficher tous les produits
- 3. Rajouter le composant <Products /> dans le render
Aperçu du contenu
Extrait des premières pages, texte tiré du PDF. Le document complet (3 pages) est dans le PDF.
4. Le Langage JSX 4.1. Construire une première page On souhaite créer l’interface suivante en utilisant JSX
Créer une page 02-JSX/index.html Télécharger les fichiers de base Pour fonctionner la page HTML doit : Charger Bootstrap, ReactJS, Babel Browser et spécifier le type text/babel pour les fichiers JSX <html> <head> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/b ootstrap.min.css" rel="stylesheet" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/boo tstrap.bundle.min.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@16/umd/reactdom.development.js" crossorigin></script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></s cript> </head> <body> <div id="app"></div> </body> <script type="text/babel"> // Code JSX </script> </html>
Pensez en composants : Avec React, chacune des parties de site qu’on va pouvoir réutiliser correspond à un composant.
Les composants nous permettent d’utiliser la même structure de données, et de remplir ces structures avec différents jeux de données. Peu importe le nombre de produits que vous aurez à mettre dans le site, vous pourrez les exploiter pour afficher vos données sans aucun effort.
Composez vos composants 1. Créer un composant <Product /> qui permet d’afficher un produit <div className="col"> <div className="card shadow-sm"> <img className="bd-placeholder-img card-img-top"
<div className="card-body"> <p className="card-title">Titre de produit</p> <p className="card-text">Prix de produit</p> <div className="d-flex justify-content-between alignitems-center"> <div className="btn-group"> <button type="button" className="btn btn-sm btnoutline-secondary">Ajouter au panier</button> </div> </div> </div> </div> </div>
2. Créer un composant <Products /> qui permet d’afficher tous les produits Soit la variable products qui contient les informations des produits const products = [
Autres documents de la filière Divers
TP DNS EL OUARDI V2023
TPseance10 2 travaux pratiques
TPseance12 2 tp
TPseance5 travaux pratiques
TPs16 travaux pratiques
TPseance9 2 travaux pratiques
TPseance11 2 tp
TPs13 travaux pratiques
Toutes les filières
Document pédagogique de la formation professionnelle, partagé pour les stagiaires. Les supports officiels de votre promotion restent ceux de votre formateur et d'OFPPT Academy. Ce document vous appartient ou doit être retiré ? Écrivez à [email protected], il sera retiré sous 48 h.