React Rebass es un framework front-end que fue diseñado teniendo en cuenta a React. En este artículo, sabremos cómo usar Card Component en React Rebass. La Tarjeta es una extensión del componente Caja con estilos de tarjeta. Entonces, para crear un componente Card, podemos importar el componente Rebass Card.
El componente de tarjeta se utiliza para mostrar contenido en forma de tarjeta, con algo de contenido.
Sintaxis:
<Card> <Image /> <Heading></Heading> </Card>
Creación de la aplicación React e instalación del módulo:
- Paso 1: Cree una aplicación React usando el siguiente comando.
npx create-react-app foldername
- Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta, muévase a ella con el siguiente comando.
cd foldername
- Paso 3: Instale React Rebass en su directorio dado.
npm install --save react-toolbox
Estructura del proyecto: Tendrá el siguiente aspecto.
Ejemplo 1: Este es el ejemplo básico que muestra cómo usar el componente de la tarjeta.
App.js
import React from "react";
import { Text } from "rebass";
import { Image, Card, Heading } from "rebass";
const gfg = () => {
return (
<div id="gfg">
<Text fontSize={[3, 4, 5]} fontWeight="bold"
color="green">
Geeksforgeeks
</Text>
<Text fontSize={[1, 2, 3]} fontWeight="bold"
color="black">
Rebass Textarea Component
</Text>
<br />
<Card width={2000}>
<Image
src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png"
sx={{
width: ["10%"],
}}
/>
<Heading>Card Component</Heading>
</Card>
</div>
);
};
export default gfg;
Paso para ejecutar la aplicación: ejecute la aplicación desde el directorio raíz del proyecto, utilizando el siguiente comando.
npm start
Producción:
Referencia: https://rebassjs.org/card