🧩 Comprendre les Composants React

Voici un exemple minimaliste d’un composantcomposant
Bloc réutilisable d'interface utilisateur dans React, défini comme une fonction ou une classe. fonctionnel ReactReact
Bibliothèque JavaScript créée par Meta pour construire des interfaces utilisateur à base de composants. :

// 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 JSXJSX
JavaScript XML – syntaxe permettant d'écrire du HTML directement dans du JavaScript, utilisée par React. 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/TypeScriptTypeScript
Sur-ensemble typé de JavaScript qui ajoute un système de types statiques./Vite/Create React App le gèrent). Vous pouvez néanmoins l’ajouter si votre configuration le requiert.