Attribute aus Werten

Geschweifte Klammern funktionieren auch in Attributen. Statt eines Textes in Anführungszeichen bekommt das Attribut dann den Wert des Ausdrucks:

export default function App() {
    const festival = "Sommerklang";
    const plakat = "/react.svg";

    return (
        <header>
            <img src={plakat} alt={`${festival} Plakat`} />
            <h1>{festival}</h1>
        </header>
    );
}

Das Bild bekommt src="/react.svg" und alt="Sommerklang Plakat". Ein Template-Literal ist hier praktisch: Ein Attribut nimmt einen einzigen Ausdruck, und um seinen Wert aus einer Variablen und etwas Text zu bilden, schreibst du ihn mit Backticks.

Schreibe die Klammern ohne Anführungszeichen. src="{plakat}" ist ein gewöhnlicher Text, das Bild würde also nach einer Datei namens {plakat} suchen und nicht erscheinen.

Attribute mit festem Text bleiben in Anführungszeichen, wie in HTML: alt="Logo". Verwende Klammern, wenn der Wert aus deinem Code kommt.