Intégrer du JSX

Le balisage avec JSX

Un composant React est une fonction JavaScript qui contient du balisage, que React convertit ensuite en HTML pour l’afficher dans le navigateur. Ce balisage est écrit en JSX, une extension de syntaxe qui ressemble à HTML mais applique des règles plus strictes, offrant également la possibilité d’intégrer des données dynamiques directement dans le composant. JSX facilite ainsi la création d’interfaces utilisateur réactives, bien que certains ajustements soient parfois nécessaires pour assurer la compatibilité avec React. Par exemple, copier directement du code HTML dans un composant peut entraîner des erreurs, car JSX diffère légèrement de la syntaxe HTML classique, notamment dans la manière de gérer les attributs et les expressions JavaScript.

Exemple :

Ce composant React Installationstep utilise JSX pour structurer un titre, une image, et une liste d’instructions. La syntaxe JSX rend le code clair et centralisé en intégrant le balisage HTML et la logique JavaScript. L'attribut className est utilisé à la place de class, et chaque <li> est correctement fermé pour respecter la syntaxe JSX.

export default function Installationstep(){
  return (
    <div>
        <h1>étapes de formatage à la sauvegarde</h1>
        <img src="img/LOGO-FINAL-V2.png" alt="logo microlead" classname="logo">
        <ul>
            <li>Dans VS Code aller dans **File** dans le menu en haut à gauche</li>
            <li>Puis dans **Preferences** presque tout en bas de la liste</li>
            <li>Ensuite cliquer sur **settings**</li>
            <li>Dans la barre de recherche, entrer **format on save** puis cochez la première option.</li>
        </ul>
    </div>
  );
}

Cette approche rend le code plus intuitif, car la logique et le rendu visuel sont regroupés, ce qui améliore la maintenabilité et la cohérence de l’application. Par exemple, avec JSX, il est possible d'afficher une liste d'éléments basée sur un tableau dynamique :

const softskills = ['Communication', 'Travail d\'équipe', 'Adaptabilité', 'Résolution de problèmes', 'Gestion du temps'];

function skills() {
    return (
        <ul>
            {softskills.map((skill, index) => (
                <li key={index}>{skill}</li>
            ))}
        </ul>
    );
}
export default skills;