Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentesRévision précédente
Prochaine révision		Révision précédente
front:composants_et_pages [2025/09/29 10:09] – [Comment faire un composant ?] paolofront: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'entre d'eux représente une partie de l'interface utilisateur. Ils sont réutilisables et facilitent le développement ainsi que la maintenance du projet. Les composants sont les éléments de base d'un projet React. Chacun d'entre d'eux représente une partie de l'interface utilisateur. Ils sont réutilisables et facilitent le développement ainsi que la maintenance du projet.
 +
 +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 ''Input.jsx'' soit ''components/form/Input.jsx'' +  * on crée un fichier ''Input.jsx'' soit ''src/components/form/Input.jsx'' 
-  * on crée un dossier ''Input'' puis un fichier ''index.jsx'' à l'intérieur soit ''components/form/Input/index.jsx''+  * on crée un dossier ''Input'' puis un fichier ''index.jsx'' à l'intérieur soit ''src/components/form/Input/index.jsx''
  
-La deuxième méthode est conseillée car elle offre un espace dédié au composant (dossier ''Input'') dans lequel d'autres fichiers le concernant pourront être placés.+La deuxième méthode est conseillée car elle offre un espace dédié au composant (dossier ''Input'') dans lequel d'autres fichiers le concernant pourront être placés 
 +.
 ### Comment faire un composant ? ### Comment faire un composant ?
  
Ligne 101: Ligne 104:
 ``` ```
  
-Nous lançons la commande ''npm run dev'' et on se rend sur le ''http://localhost:5173/''.+Nous lançons la commande ''npm run dev'' et nous nous rendons sur ''http://localhost:5173/''.
  
 Les composants ci-dessus ainsi que tous les exemples suivants sont stylisés "mobiles". Il est conseillé de les tester sur petit écran. Les composants ci-dessus ainsi que tous les exemples suivants sont stylisés "mobiles". Il est conseillé de les tester sur petit écran.