Différences

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

--- composants_et_pages [2025/09/25 08:11] – paolo
+++ composants_et_pages [2026/02/04 23:19] (Version actuelle) – modification externe 127.0.0.1
@@ Ligne 46: / Ligne 46: @@
 ```
+Utilisons maintenant ce composant dans une page de connexion par exemple (''components/pages/Login/index.jsx''):
+```
+import { Input } from "../form/Input";
+export const Login = () => {
+    return (
+        <div className="fixed inset-0 bg-white flex justify-center items-center p-10">
+            <form className="flex flex-col gap-6">
+                <Input
+                    id="email"
+                    label="Adresse email"
+                    type="email"
+                    placeholder="Tapez votre adresse mail ici..."
+                />
+                <Input
+                    id="password"
+                    label="Mot de passe"
+                    type="password"
+                    placeholder="●●●●●●●●"
+                />
+                <button className="shadow-md bg-blue-500 text-white font-semibold text-xl uppercase tracking-wide rounded-full px-8 py-4 active:brightness-90 duration-100">
+                    Connexion
+                </button>
+            </form>
+        </div>
+    );
+};
+```
+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.