Markup mit JSX schreiben

Einführung

Willkommen zur React-Dokumentation! In diesem Lab erhalten Sie eine Einführung in das Schreiben von Markup mit JSX.

Skills Graph

Markup mit JSX schreiben

Das React-Projekt wurde bereits in der VM bereitgestellt. Im Allgemeinen müssen Sie nur Code in App.js hinzufügen.

Installieren Sie die Abhängigkeiten mit dem folgenden Befehl:

npm i

Die oben gezeigte Markupsyntax wird als JSX bezeichnet. Sie ist optional, aber die meisten React-Projekte verwenden JSX aus Bequemlichkeit.

JSX ist strenger als HTML. Sie müssen Tags wie <br /> schließen. Ihr Komponent kann auch nicht mehrere JSX-Tags zurückgeben. Sie müssen sie in einen gemeinsamen Elternknoten umschließen, wie einen <h1>...</h1> oder einen leeren <>...</>-Wrapper:

// App.js
export default function Profile() {
  return (
    <>
      <h1>Hedy Lamarr</h1>
    </>
  );
}

Wenn Sie viel HTML in JSX umwandeln müssen, können Sie einen online-Converter verwenden.

Führen Sie das Projekt mit dem folgenden Befehl aus. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.

npm start

Daten anzeigen

JSX ermöglicht es Ihnen, Markup in JavaScript zu integrieren. Mit geschweiften Klammern können Sie "zurück in JavaScript wechseln", um so eine Variable aus Ihrem Code einzubetten und an den Benutzer anzuzeigen. Beispielsweise wird hier user.name angezeigt:

// App.js
const user = {
  name: "Hedy Lamarr"
};
export default function Profile() {
  return (
    <>
      <h1>{user.name}</h1>
    </>
  );
}

Sie können auch aus JSX-Attributen "in JavaScript wechseln", müssen dafür jedoch geschweifte Klammern statt Anführungszeichen verwenden. Beispielsweise übergibt className="avatar" als CSS-Klasse den String "avatar", während src={user.imageUrl} den Wert der JavaScript-Variable user.imageUrl liest und diesen Wert als src-Attribut übergibt:

// App.js
const user = {
  name: "Hedy Lamarr",
  imageUrl: "https://i.imgur.com/yXOvdOSs.jpg"
};
export default function Profile() {
  return (
    <>
      <h1>{user.name}</h1>
      <img className="avatar" src={user.imageUrl} />
    </>
  );
}

Stile hinzufügen

In React geben Sie eine CSS-Klasse mit className an. Es funktioniert genauso wie das HTML-class-Attribut:

<img className="avatar" />

Dann schreiben Sie die CSS-Regeln dafür in einer separaten CSS-Datei:

/* App.css */
.avatar {
  border-radius: 50%;
}

React gibt keine Vorgaben darüber vor, wie Sie CSS-Dateien hinzufügen. Im einfachsten Fall fügen Sie ein <link>-Tag zu Ihrer HTML hinzu. Wenn Sie ein Build-Tool oder ein Framework verwenden, konsultieren Sie dessen Dokumentation, um zu erfahren, wie Sie einer CSS-Datei zu Ihrem Projekt hinzufügen.

// App.js
import "./App.css";

Sie können auch komplexere Ausdrücke in die geschweiften Klammern von JSX einfügen, z. B. Stringverkettung:

// App.js
const user = {
  name: "Hedy Lamarr",
  imageUrl: "https://i.imgur.com/yXOvdOSs.jpg",
  imageSize: 90
};

export default function Profile() {
  return (
    <>
      <h1>{user.name}</h1>
      <img
        className="avatar"
        src={user.imageUrl}
        alt={"Photo of " + user.name}
        style={{
          width: user.imageSize,
          height: user.imageSize
        }}
      />
    </>
  );
}

Im obigen Beispiel ist style={{}} keine spezielle Syntax, sondern ein reguläres {}-Objekt innerhalb der geschweiften Klammern von style={ } in JSX. Sie können das style-Attribut verwenden, wenn Ihre Stile von JavaScript-Variablen abhängen.

Zusammenfassung

Herzlichen Glückwunsch! Sie haben das Lab "Markup mit JSX schreiben" abgeschlossen. Sie können in LabEx weitere Labs absolvieren, um Ihre Fähigkeiten zu verbessern.