Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Apprendre Défi : Utilisation des modules CSS dans React | Techniques de Stylisation dans les Applications React
Maîtrise de React

bookDéfi : Utilisation des modules CSS dans React

Tâche : Création d'une carte utilisateur avec CSS Modules

Dans cette tâche, conception d'une carte utilisateur affichant la photo et les informations pertinentes de l'utilisateur. Application de styles appropriés à chaque composant et vérification de leur bonne utilisation. L'objectif est d'obtenir l'interface suivante :

La tâche consiste à :

  1. Dans le fichier UserInfo.jsx, importer le fichier de styles (UserInfo.module.css) et l'assigner à s pour l'association des styles.
  2. Pour finaliser la construction de l'application, importer le fichier UserInfo.jsx dans App.jsx.
  1. Pour importer un fichier, utiliser l'instruction import et spécifier le fichier source.
  2. Pour associer le fichier CSS à s, l'importer avec import s from "path_to_the_file";.
  3. Pour utiliser le composant UserInfo dans le composant App, utiliser la syntaxe </UserInfo />.
Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 2. Chapitre 10

Demandez à l'IA

expand

Demandez à l'IA

ChatGPT

Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion

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

bookDéfi : Utilisation des modules CSS dans React

Glissez pour afficher le menu

Tâche : Création d'une carte utilisateur avec CSS Modules

Dans cette tâche, conception d'une carte utilisateur affichant la photo et les informations pertinentes de l'utilisateur. Application de styles appropriés à chaque composant et vérification de leur bonne utilisation. L'objectif est d'obtenir l'interface suivante :

La tâche consiste à :

  1. Dans le fichier UserInfo.jsx, importer le fichier de styles (UserInfo.module.css) et l'assigner à s pour l'association des styles.
  2. Pour finaliser la construction de l'application, importer le fichier UserInfo.jsx dans App.jsx.
  1. Pour importer un fichier, utiliser l'instruction import et spécifier le fichier source.
  2. Pour associer le fichier CSS à s, l'importer avec import s from "path_to_the_file";.
  3. Pour utiliser le composant UserInfo dans le composant App, utiliser la syntaxe </UserInfo />.
Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 2. Chapitre 10
some-alt