Aprende Desafío: Uso de Módulos CSS en React | Técnicas de Estilizado en Aplicaciones React

Tarea: Construcción de una tarjeta de usuario con CSS Modules

En esta tarea, se diseñará una tarjeta de usuario que muestre la foto y la información relevante del usuario. Aplicar estilos apropiados a cada componente y asegurar su correcta utilización. El objetivo es lograr la siguiente interfaz de usuario:

La tarea es:

En el archivo UserInfo.jsx, importar el archivo de estilos (UserInfo.module.css) y asignarlo como s para la asociación de estilos.
Para completar la construcción de la aplicación, importar el archivo UserInfo.jsx en el App.jsx.

Para importar un archivo, utilizar la declaración import y especificar el archivo de origen.
Para asociar el archivo CSS con s, importarlo usando import s from "path_to_the_file";.
Para utilizar el componente UserInfo dentro del componente App, emplear la sintaxis </UserInfo />.

¿Todo estuvo claro?

¡Gracias por tus comentarios!

Sección 2. Capítulo 10

Pregunte a AI

Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla

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

Desliza para mostrar el menú

Tarea: Construcción de una tarjeta de usuario con CSS Modules

La tarea es:

En el archivo UserInfo.jsx, importar el archivo de estilos (UserInfo.module.css) y asignarlo como s para la asociación de estilos.
Para completar la construcción de la aplicación, importar el archivo UserInfo.jsx en el App.jsx.

Para importar un archivo, utilizar la declaración import y especificar el archivo de origen.
Para asociar el archivo CSS con s, importarlo usando import s from "path_to_the_file";.
Para utilizar el componente UserInfo dentro del componente App, emplear la sintaxis </UserInfo />.

¿Todo estuvo claro?

¡Gracias por tus comentarios!

Sección 2. Capítulo 10