Composants et pages

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.

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 components/form/Input.jsx
• on crée un dossier Input puis un fichier index.jsx à l'intérieur soit 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>
    );
};