🧩 Comprendre les Composants React

Voici un exemple minimaliste d’un composant fonctionnel React :

// Avec le nouveau JSX transform (React 17+),
// l'import explicite de `React` n'est plus obligatoire si votre outil de build le supporte.
export default function HelloWorld({ text = 'world' }) {
    return <h1>Hello, {text}!</h1>;
}

Dans cet exemple, nous avons défini un composant fonctionnel appelé HelloWorld. Ce composant retourne un élément JSX qui représente un titre de niveau 1 (<h1>) avec le texte “Hello, world!”.

Ensuite, nous exportons le composant HelloWorld pour pouvoir l’utiliser dans d’autres parties de notre application.

import HelloWorld from './mon-composant';
 
export default function Page() {
    const variables = 'test';
 
    return (
        <div>
            <p>Pour utiliser le composant précédemment créé :</p>
            <HelloWorld text={variables} />
        </div>
    );
}

Notez que les composants React doivent toujours retourner un seul élément racine. Dans cet exemple, l’élément racine est <h1>. Si vous voulez retourner plusieurs éléments, vous pouvez les envelopper dans un élément parent, comme un <div> ou un <React.Fragment>.

Note : avec le nouveau JSX transform, l’import explicite import React from 'react' n’est plus nécessaire dans la plupart des projets modernes (Babel/TypeScript/Vite/Create React App le gèrent). Vous pouvez néanmoins l’ajouter si votre configuration le requiert.