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
Einführung in React

bookHerausforderung: Verwendung von CSS-Modulen in React

Aufgabe: Erstellen einer Benutzerkarte mit CSS-Modules

In dieser Aufgabe wird eine Benutzerkarte gestaltet, die das Foto des Benutzers sowie relevante Informationen anzeigt. Es sollen geeignete Stile auf jede Komponente angewendet und deren korrekte Verwendung 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 import-Anweisung verwenden und die Quelldatei angeben.
  2. Um die CSS-Datei mit s zu verknüpfen, diese mit import s from "path_to_the_file"; importieren.
  3. Um die UserInfo-Komponente innerhalb der App-Komponente zu verwenden, die Syntax </UserInfo /> nutzen.
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

Suggested prompts:

How do I import the CSS module in UserInfo.jsx?

Can you explain how to use the UserInfo component in App.jsx?

What should the folder structure look like for these files?

Awesome!

Completion rate improved to 2.17

bookHerausforderung: Verwendung von CSS-Modulen in React

Swipe um das Menü anzuzeigen

Aufgabe: Erstellen einer Benutzerkarte mit CSS-Modules

In dieser Aufgabe wird eine Benutzerkarte gestaltet, die das Foto des Benutzers sowie relevante Informationen anzeigt. Es sollen geeignete Stile auf jede Komponente angewendet und deren korrekte Verwendung 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 import-Anweisung verwenden und die Quelldatei angeben.
  2. Um die CSS-Datei mit s zu verknüpfen, diese mit import s from "path_to_the_file"; importieren.
  3. Um die UserInfo-Komponente innerhalb der App-Komponente zu verwenden, die Syntax </UserInfo /> nutzen.
War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 10
some-alt