Recopilación de mensajes de interfaz de usuario 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, sabremos cómo usar las colecciones de mensajes en la interfaz de usuario semántica de ReactJS. El mensaje se utiliza para mostrar información que explica el contenido cercano.

Tipos:

• Mensaje de lista: mensaje con lista.
• Mensaje de icono: mensaje con icono.
• Bloque descartable:

Sintaxis:

<Message content='content' />

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, veremos cómo mostrar mensajes básicos mediante el uso de colecciones de mensajes de IU semántica de ReactJS.

import React from 'react'
import {Message} 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 = () => (
<Message>
    <Message.Header>GeeksforGeeks</Message.Header>
    <p>
      Semantic UI is a modern framework used in developing
      seamless designs for the website, Its gives the user 
      a lightweight experience with its components. It uses
      the predefined CSS, JQuery language to incorporate in 
      different frameworks.
    </p>
  
  </Message>
)
  
export default btt

Producción: 

Ejemplo 2: en este ejemplo, utilizaremos un elemento de mensaje con una lista de tipos para mostrar mensajes en forma de lista mediante el uso de colecciones de mensajes de IU semántica de ReactJS.

import React from 'react'
import {Message} 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 = () => (
<Message>
    <Message.Header>GeeksforGeeks</Message.Header>
    <Message.List>
      <Message.Item>
       Semantic UI is a modern framework used in
       developing seamless designs for the website.
      </Message.Item> 
      <Message.Item>
       Its gives the user a lightweight experience
       with its components.
      </Message.Item> 
      <Message.Item>
       It uses the predefined CSS, JQuery language 
       to incorporate in different frameworks.
      </Message.Item>
    </Message.List>
</Message>
)
  
export default btt

Producción:

Referencia: https://react.semantic-ui.com/collections/message