Différences

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

Lien vers cette vue comparative

Prochaine révision		Révision précédente
front:composants_et_pages [2025/09/25 13:15] – créée paolofront:composants_et_pages [2025/10/01 11:56] (Version actuelle) – paolo
Ligne 1: Ligne 1:
 # Composants et pages # Composants et pages
 +
 +Documentation [React](https://react.dev/).
  
 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.
  
-#### Où ranger un composant ?+Et si nous partions du début ?  
 + 
 +### Où ranger un composant ?
  
 Imaginons que l'on souhaite faire un composant de formulaire comprenant **label** + **input**. Imaginons que l'on souhaite faire un composant de formulaire comprenant **label** + **input**.
  
 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. +
- +
-#### Comment faire un composant ?+
  
-Un composant est avant tout une fonction **JS** (fléchée ou déclarée) retournant du **JSX** (un mélange de **JS** et de balises **HTML** en quelques sortes). Un composant peut renvoyer une portion d’interface, ou être plus avancé en gérant des **props** (paramètres du composant), en modifiant l’état interne (**useState**, **useReducer**, ...) et en utilisant des effets (**useEffect**). On peut aisin construire une interface réutilisable, dynamique et modulaire.+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 ?
  
-Je vous invite à jeter un coup d'oeuil à la documentation de [React](https://react.dev/).+Un composant est avant tout une fonction **JS** (fléchée ou déclarée) retournant du **JSX** (un mélange de **JS** et de balises **HTML** en quelques sortes). Un composant peut renvoyer une portion d’interface, ou être plus avancé en gérant des **props** (paramètres du composant), en modifiant l’état interne (''useState'', ''useReducer'', ...) et en utilisant des effets (''useEffect''). On peut ainsi construire une interface réutilisable, dynamique et modulaire.
  
 Ici on va rester simple avec un composant avec quelques **props**: Ici on va rester simple avec un composant avec quelques **props**:
Ligne 23: Ligne 25:
  
 ``` ```
 +// src/components/form/Input/index.jsx
 +
 export const Input = (props) => { export const Input = (props) => {
     const { label, id, ...inputProps } = props;     const { label, id, ...inputProps } = props;
Ligne 46: Ligne 50:
 ``` ```
  
-Utilisons maintenant ce composant dans une page de connexion par exemple (''components/pages/Login/index.jsx''):+Utilisons maintenant ce composant dans une page de connexion par exemple.
  
 ``` ```
 +// src/components/pages/Login/index.jsx
 +
 import { Input } from "../form/Input"; import { Input } from "../form/Input";
  
Ligne 57: Ligne 63:
                 <Input                 <Input
                     id="email"                     id="email"
 +                    name="email"
                     label="Adresse email"                     label="Adresse email"
                     type="email"                     type="email"
Ligne 63: Ligne 70:
                 <Input                 <Input
                     id="password"                     id="password"
 +                    name="password"
                     label="Mot de passe"                     label="Mot de passe"
                     type="password"                     type="password"
Ligne 78: Ligne 86:
 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. 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**, ...).+Il n'y a pas vraiment de convention en ce qui concerne l'organisation des composants, chaque projet peut avoir la sienne. Nous conseillons néanmoins d'avoir un dossier pages car cela 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 ? 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:+Pour cela, nous pouvons ouvrir le fichier ''App.jsx'' (composant pricipal) et y glisser notre page.
  
 ``` ```
 +// src/App.jsx
 +
 import { Login } from "./components/pages/Login"; import { Login } from "./components/pages/Login";
  
Ligne 94: Ligne 104:
 ``` ```
  
-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.+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.