Vistas de tarjeta de IU semántica de ReactJS

La interfaz de usuario semántica es un marco moderno que se utiliza para desarrollar diseños perfectos para el sitio web. Brinda al usuario una experiencia liviana con sus componentes. Utiliza el lenguaje CSS, JQuery predefinido para incorporar en diferentes marcos.

En este artículo, veremos cómo usar las vistas de tarjeta en la interfaz de usuario semántica de ReactJS.

Propiedades:

• Tarjetas: Esta propiedad se utiliza para hacer un grupo de tarjetas.

Sintaxis:

<card>
  <card.content>
  </card.content>
</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 la interfaz de usuario semántica en su directorio dado.

  npm install semantic-ui-react semantic-ui-css

Estructura del proyecto : Se verá como lo siguiente.

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

npm start

Ejemplo 1: En este ejemplo, usaremos elementos de tarjeta, imagen e ícono para mostrar el contenido básico de la tarjeta con imagen, metadatos e ícono usando ReactJS Semantic UI Card Views.

import React from 'react'
import { Card, Image, Icon } from 'semantic-ui-react'
  
const styleLink = document.createElement("link");
styleLink.rel = "stylesheet";
styleLink.href = 
"https://cdn.jsdelivr.net/npm/semantic-ui/dist/semantic.min.css";
document.head.appendChild(styleLink);
  
const btt = () => (
<Card>
    <Image src=
'https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg' size='small' />
    <Card.Content>
      <Card.Header>GeeksforGeeks</Card.Header>
      <Card.Meta>
        <span>Found is 2008</span>
      </Card.Meta>
    </Card.Content>
    <Card.Content extra>
        <Icon name='react' />
        ReactJS
    </Card.Content>
  </Card>
)
  
export default btt

Producción: 

Ejemplo 2: En este ejemplo, utilizaremos los elementos de tarjeta, imagen e icono para mostrar un grupo de tarjetas con propiedades de contenido adicionales mediante el uso de ReactJS Semantic UI Card Views.

import React from 'react'
import { Card, Image, Icon } from 'semantic-ui-react'
  
const styleLink = document.createElement("link");
styleLink.rel = "stylesheet";
styleLink.href = 
"https://cdn.jsdelivr.net/npm/semantic-ui/dist/semantic.min.css";
document.head.appendChild(styleLink);
  
const btt = () => (
<Card.Group>
  <Card fluid>
    <Image src=
'https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg' size='small' />
    <Card.Content>
      <Card.Header>GeeksforGeeks</Card.Header>
    </Card.Content>
    <Card.Content extra>
        <Icon name='react' />
        ReactJS
    </Card.Content>
  </Card>
  <Card fluid>
    <Image src=
'https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg' size='small' />
    <Card.Content>
      <Card.Header>GeeksforGeeks</Card.Header>
    </Card.Content>
    <Card.Content extra>
        <Icon name='angular' />
        AngularJS
    </Card.Content>
  </Card>
  <Card fluid>
    <Image src=
'https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg' size='small' />
    <Card.Content>
      <Card.Header>GeeksforGeeks</Card.Header>
    </Card.Content>
    <Card.Content extra>
        <Icon name='html5' />
        HTML5
    </Card.Content>
  </Card>
  <Card fluid>
    <Image src=
'https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg' size='small' />
    <Card.Content>
      <Card.Header>GeeksforGeeks</Card.Header>
    </Card.Content>
    <Card.Content extra>
        <Icon name='js' />
        JavaScript
    </Card.Content>
  </Card>
</Card.Group>
)
  
export default btt

Producción:

Referencia: https://react.semantic-ui.com/views/card