JSX et les accolades

JavaScript avec JSX

JSX permet de regrouper le contenu et la logique d’affichage en un seul endroit. Pour ajouter de la logique JavaScript ou référencer une propriété dynamique dans ce balisage, il suffit d’utiliser des accolades { } pour intégrer du JavaScript directement dans le code JSX.

Exemple

const siteIntro = {
  title: "Bienvenue sur Microlead",
  description: "LA FORMATION CONTINUE EN DÉVELOPPEMENT INFORMATIQUE",
  paragraph:
    "Trouvez le parcours personnalisé qui vous correspond le mieux. Exploitez nos ressources pédagogiques qui regroupent des cours, exercices, travaux dirigés, travaux pratiques et QCM pour développer de nouvelles compétences !",
  theme: {
    backgroundColor: "#1a1a1a",
    color: "#FFD1DC",
    padding: "20px",
    textAlign: "center",
  },
};

export default function SiteIntro() {
  return (
    <div style={siteIntro.theme}>
      <h1>{siteIntro.title}</h1>
      <img
        className="intro-image"
        src="img/LOGO-FINAL-V2.png"
        alt="logo Microlead"
        style={{ width: "250px", margin: "25px" }}
      />
      <h3>{siteIntro.description}</h3>
      <p>{siteIntro.paragraph}</p>
    </div>
  );
}