Componente de tarjetas React-Bootstrap

Introducción: React-Bootstrap es un marco frontal que se diseñó teniendo en cuenta la reacción. Bootstrap fue reconstruido y renovado para React, por lo que se conoce como React-Bootstrap. Las tarjetas son un tipo de apartado o contenedor que consta de información de forma estructurada y organizada. 

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 , acceda a ella con el siguiente comando.

cd foldername

Paso 3: después de crear la aplicación ReactJS, instale los módulos necesarios con el siguiente comando.

Propiedades: El componente Tarjeta tiene muchas propiedades que podemos usar para organizar los datos. En la siguiente tabla, se explican las propiedades.

• Título: Actúa como un título para la tarjeta.
• Subtítulo: Actúa como subtítulo del título mencionado.
• Texto: En esta sección mencionaremos todos los datos necesarios.
• Enlace: Esta propiedad se utiliza para agregar los enlaces para nuestras tarjetas.

npm install react-bootstrap bootstrap

Estructura del proyecto: Tendrá el siguiente aspecto.

Estructura del proyecto

App.js: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código.

import Card from "react-bootstrap/Card";
import React from "react";
  
export default function App() {
  return (
    <>
      <Card style={{ width: "22rem" }}>
        <Card.Body>
          <Card.Title style={{ color: "green" }}>GEEKSFORGEEKS</Card.Title>
          <Card.Subtitle className="mb-2 text-muted">
            One Stop For all CS subjects
          </Card.Subtitle>
          <Card.Text>
            GeeksforGeeks provides a platform for all the students to study
            about all the subjects in CSE.
          </Card.Text>
          <Card.Link href="#"> For Students</Card.Link>
        </Card.Body>
      </Card>
    </>
  );
}

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida.