Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lernen Herausforderung: Verwendung von CSS-Modulen in React | Styling-Techniken in React-Anwendungen
React Mastery

bookHerausforderung: Verwendung von CSS-Modulen in React

Aufgabe: Erstellung einer Benutzerkarte mit CSS-Modules

In dieser Aufgabe wird eine Benutzerkarte gestaltet, die das Foto des Benutzers sowie relevante Informationen anzeigt. Es sollen passende Stile auf jede Komponente angewendet und deren korrekte Nutzung sichergestellt werden. Ziel ist es, folgende Benutzeroberfläche zu erreichen:

Die Aufgabe lautet:

  1. In der Datei UserInfo.jsx die Styles-Datei (UserInfo.module.css) importieren und als s für die Stilzuweisung verwenden.
  2. Um den Aufbau der App abzuschließen, die Datei UserInfo.jsx in die App.jsx importieren.
  1. Zum Importieren einer Datei die Anweisung import verwenden und die Quelldatei angeben.
  2. Um die CSS-Datei mit den s zu verknüpfen, diese mit import s from "path_to_the_file"; importieren.
  3. Zur Verwendung der UserInfo Komponente innerhalb der App Komponente die Syntax </UserInfo /> anwenden.

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 10

Fragen Sie AI

expand

Fragen Sie AI

ChatGPT

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

Awesome!

Completion rate improved to 2.17

bookHerausforderung: Verwendung von CSS-Modulen in React

Swipe um das Menü anzuzeigen

Aufgabe: Erstellung einer Benutzerkarte mit CSS-Modules

In dieser Aufgabe wird eine Benutzerkarte gestaltet, die das Foto des Benutzers sowie relevante Informationen anzeigt. Es sollen passende Stile auf jede Komponente angewendet und deren korrekte Nutzung sichergestellt werden. Ziel ist es, folgende Benutzeroberfläche zu erreichen:

Die Aufgabe lautet:

  1. In der Datei UserInfo.jsx die Styles-Datei (UserInfo.module.css) importieren und als s für die Stilzuweisung verwenden.
  2. Um den Aufbau der App abzuschließen, die Datei UserInfo.jsx in die App.jsx importieren.
  1. Zum Importieren einer Datei die Anweisung import verwenden und die Quelldatei angeben.
  2. Um die CSS-Datei mit den s zu verknüpfen, diese mit import s from "path_to_the_file"; importieren.
  3. Zur Verwendung der UserInfo Komponente innerhalb der App Komponente die Syntax </UserInfo /> anwenden.

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 10
some-alt