Componente de la tarjeta ReactJS Reactstrap

Reactstrap: Reactstrap es una biblioteca de front-end popular que es fácil de usar React Bootstrap 4 componentes. Esta biblioteca contiene los componentes React sin estado para Bootstrap 4. Podemos usar el siguiente enfoque en ReactJS para usar el componente de tarjeta ReactJS Reactstrap.

Propiedades de los accesorios ReactStrap:

Accesorios de la tarjeta:

• etiqueta: la etiqueta de accesorios de tarjeta puede ser una función o una string, y se utiliza para indicar la etiqueta de este componente.
• inverse: los accesorios inverse en reactStrap se utilizan para indicar si se invierte el color del texto o no.
• color: los accesorios de color se utilizan para cambiar el color de la tarjeta. Debe ser formato RGB y el nombre del color.
• cuerpo: los accesorios del cuerpo se utilizan para indicar si aplicar o no la clase de cuerpo de tarjeta en el componente reactStrap.
• className: los accesorios className se utilizan para indicar el nombre de la clase para diseñar el componente en reactStrap.

Accesorios para el cuerpo de la tarjeta:

• etiqueta: los accesorios de CardBody pueden ser una función o una string, y se utilizan para indicar la etiqueta de este componente en reactStrap.
• className: los accesorios className se utilizan para indicar el nombre de clase para este componente en reactStrap.

Accesorios para columnas de cartas:

• etiqueta: la etiqueta CardColumns Props puede ser una función o una string, y se utiliza para indicar la etiqueta de este componente.
• className: los accesorios className se utilizan para indicar el nombre de clase de este componente, que se utiliza para diseñar el CSS.

Accesorios de baraja de cartas:

• etiqueta: Los accesorios de la etiqueta vienen debajo de los accesorios del mazo de cartas. En el mazo de cartas, puede ser una función o una string, y se usa para indicar la etiqueta de este componente.
• className: los accesorios de className vienen en Card deck Props y se usan para indicar el nombre de clase para este componente.

Accesorios de pie de página:

• etiqueta: La etiqueta Props viene debajo de CardFooter Props. Puede ser una función o una string, y se usa para indicar la etiqueta de este componente.
• className: los accesorios className se encuentran debajo de CardFooter Props. Se utiliza para indicar el nombre de clase de este componente.

Accesorios del grupo de cartas:

• etiqueta: los accesorios de etiqueta en CardGroup pueden ser una función o una string, y se utilizan para indicar la etiqueta de este componente.
• className: className pops viene bajo CardGroup Props. Se usa para indicar el nombre de clase para este componente.

Accesorios de encabezado de tarjeta:

• etiqueta: la propiedad de la etiqueta CardHeader puede ser una función o una string, y se utiliza para indicar la etiqueta de este componente.
• className: los accesorios className se encuentran en CardHeader props. Se utiliza para indicar el nombre de clase de este componente.

Accesorios CardImg:

• etiqueta: la etiqueta puede ser una función o una string, y se utiliza para indicar la etiqueta de este componente.
• className: ClassName se utiliza para indicar el nombre de clase de este componente.
• top: Los accesorios superiores se utilizan para posicionar imágenes a través de la clase card-img-top .
• bottom: los accesorios inferiores se utilizan para colocar imágenes a través de la clase card-img-bottom .

Accesorios CardImgOverlay:

• etiqueta: la propiedad de la etiqueta puede ser una función o una string, y se utiliza para indicar la etiqueta de este componente.
• className: los accesorios className se utilizan para indicar el nombre de clase de este componente.

Accesorios CardLink:

• etiqueta: este accesorio de cardLink puede ser una función o una string, y se usa para indicar la etiqueta de este componente.
• className: esta propiedad className se utiliza para indicar el nombre de clase de este componente.
• innerRef: este accesorio de referencia interna se utiliza para indicar el elemento de referencia interno.

Accesorios de subtítulos de tarjetas:

• etiqueta: esta propiedad puede ser una función o una string, y se usa para indicar la etiqueta de este componente.
• className: estos accesorios se pueden usar para indicar el nombre de clase de este componente.

Accesorios de texto de tarjeta:

• etiqueta: esta propiedad puede ser una función o una string, y se usa para indicar la etiqueta de este componente.
• className: esta propiedad se utiliza para indicar el nombre de clase de este componente.

Accesorios de título de tarjeta:

• etiqueta: esta propiedad puede ser una función o una string, y se usa para indicar la etiqueta de este componente.
• className: estos accesorios, los accesorios className se utilizan para indicar el nombre de clase para este componente.

La sintaxis para crear la aplicación React e instalar módulos:

• 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 Reactstrap en su directorio dado.

 npm install --save reactstrap react react-dom

Estructura del proyecto: se verá así:

Estructura del proyecto

Ejemplo 1: 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 React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css';
import {
    Card, CardImg, CardBody,
    CardTitle, CardText, Button
} from "reactstrap"
  
function App() {
    return (
        <div style={{
            display: 'block', width: 700, padding: 30
        }}>
            <h4>ReactJS Reactstrap Card Component</h4>
            <Card>
                <CardImg
                    width="50px"
                    height="50px"
                src="https://media.geeksforgeeks.org/wp-content/
                          uploads/20210425000233/test-300x297.png"
                    alt="GFG Logo" />
                <CardBody>
                    <CardTitle tag="h5">Sample Card title</CardTitle>
                    <CardText>Sample Card Text to display!</CardText>
                    <Button>Action Button</Button>
                </CardBody>
            </Card>
        </div>
    );
}
  
export default App;

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 ahttp://localhost:3000/ ,verá el siguiente resultado:

Componente de tarjeta

Ejemplo 2: Este es otro ejemplo para el componente de tarjeta ReactStrap. 

import React from "react";
import {
  Card,CardBody,CardLink,CardTitle,
     
} from "reactstrap";
  
const Example = (props) => {
  return (
    <div>
      <Card>
        <CardBody>
          <CardTitle tag="h5">GFG Practice Portal </CardTitle>
          <img
          width="50%"
          src="https://media.geeksforgeeks.org/wp-content/
               uploads/20210728115525/imggggg.png"
          alt="Card image cap"
        />
           
            
         <p>
            The Best Data Structures Course Available Online From Skilled 
            And Experienced Faculty. Learn Data Structures In A Live 
            Classroom With The Best Of Faculty In The Industry. 
            Classroom Experience.
          </p>
  
        </CardBody>
         
        <CardBody>
           
          <CardLink href="https://www.geeksforgeeks.org/html-images/">
             To knbow more about us... 
          </CardLink>
   
        </CardBody>
      </Card>
    </div>
  );
};
  
export default Example;

componentes de la tarjeta 

Referencia: https://reactstrap.github.io/components/card/