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
composants_et_pages [2025/09/25 08:25] – paolocomposants_et_pages [2025/09/25 12:53] (Version actuelle) – paolo
Ligne 75: Ligne 75:
 }; };
 ``` ```
 +
 +Vous entrevoyez un peu le principe maintenant ? Les composants sont réutilisables et peuvent s'imbriquer entre eux permettant de gagner en temps développement et de maintenance.
 +
 +Il n'y a pas vraiment de convention en ce qui concerne l'organisation des composants, chaque projet peut avoir la sienne. Personnellement, je considère qu'avoir un dossier pages permet de visualiser et de structurer concrètement l'interface (**Login**, **Register**, **Home**, **Settings**, ...).
 +
 +Bon assez parlé ! Et si on essayait d'afficher cette page de connexion ?
 +
 +Pour çà, on peut ouvrir le fichier ''App.jsx'' (composant pricipal) et y mettre notre page:
 +
 +```
 +import { Login } from "./components/pages/Login";
 +
 +export const App = () => {
 +    return (
 +        <Login />
 +    );
 +};
 +```
 +
 +On lance la commande ''npm run dev'' et on se rend sur le ''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.