Composants et pages

Documentation React.

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 ?

Imaginons que l'on souhaite faire un composant de formulaire comprenant label + input.

Pour cela on a deux possibilités:

• 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 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 .

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:

// src/components/form/Input/index.jsx

export const Input = (props) => {
    const { label, id, ...inputProps } = props;

    return (
        <div className="flex flex-col gap-3 text-gray-900">
           {label &&
              <label 
                  htmlFor={id}
                  className="uppercase text-gray-400 font-extrabold tracking-widest text-xs mx-2"
              >
                  {label}
              </label>
            }
            <input
                id={id}
                className="bg-gray-100 text-app-base p-4 inset-shadow-sm font-semibold outline-hidden min-w-0 placeholder-gray-400 truncate rounded-2xl"
                { ...inputProps}
            />
        </div>
    );
};

Utilisons maintenant ce composant dans une page de connexion par exemple.

// src/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"
                    name="email"
                    label="Adresse email"
                    type="email"
                    placeholder="Tapez votre adresse mail ici..."
                />
                <Input
                    id="password"
                    name="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. 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 ?

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";

export const App = () => {
    return (
        <Login />
    );
};

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.