Différences
Ci-dessous, les différences entre deux révisions de la page.
| Les deux révisions précédentesRévision précédenteProchaine révision | Révision précédente | ||
| front:composants_et_pages [2025/09/29 10:05] – [Comment faire un composant ?] paolo | front:composants_et_pages [2025/10/01 11:56] (Version actuelle) – paolo | ||
|---|---|---|---|
| Ligne 4: | Ligne 4: | ||
| Les composants sont les éléments de base d'un projet React. Chacun d' | Les composants sont les éléments de base d'un projet React. Chacun d' | ||
| + | |||
| + | Et si nous partions du début ? | ||
| ### Où ranger un composant ? | ### Où ranger un composant ? | ||
| Ligne 10: | Ligne 12: | ||
| Pour cela on a deux possibilités: | Pour cela on a deux possibilités: | ||
| - | * on crée un fichier '' | + | * on crée un fichier '' |
| - | * on crée un dossier '' | + | * on crée un dossier '' |
| - | La deuxième méthode est conseillée car elle offre un espace dédié au composant (dossier '' | + | La deuxième méthode est conseillée car elle offre un espace dédié au composant (dossier '' |
| + | . | ||
| ### Comment faire un composant ? | ### Comment faire un composant ? | ||
| Ligne 47: | Ligne 50: | ||
| ``` | ``` | ||
| - | Utilisons maintenant ce composant dans une page de connexion par exemple | + | Utilisons maintenant ce composant dans une page de connexion par exemple. |
| ``` | ``` | ||
| + | // src/ | ||
| + | |||
| import { Input } from " | import { Input } from " | ||
| Ligne 81: | Ligne 86: | ||
| Vous entrevoyez un peu le principe maintenant ? Les composants sont réutilisables et peuvent s' | Vous entrevoyez un peu le principe maintenant ? Les composants sont réutilisables et peuvent s' | ||
| - | Il n'y a pas vraiment de convention en ce qui concerne l' | + | Il n'y a pas vraiment de convention en ce qui concerne l' |
| Bon assez parlé ! Et si on essayait d' | Bon assez parlé ! Et si on essayait d' | ||
| - | Pour çà, on peut ouvrir le fichier '' | + | Pour cela, nous pouvons |
| ``` | ``` | ||
| + | // src/App.jsx | ||
| + | |||
| import { Login } from " | import { Login } from " | ||
| Ligne 97: | Ligne 104: | ||
| ``` | ``` | ||
| - | On lance la commande '' | + | Nous lançons |
| + | |||
| + | Les composants ci-dessus ainsi que tous les exemples suivants sont stylisés " | ||