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 vistas de anuncios en la interfaz de usuario semántica de ReactJS.
La publicidad se utiliza para mostrar contenido promocional de terceros.
Tipos:
- Unidades comunes: requerimiento de un usuario
- Móvil: Anuncios
- Rectángulo: Anuncios
- Botón: A
- Rascacielos: Anunciosrascacielos
- Pancarta: Anuncios
- Tablas de clasificación: Anuncios
- Panorama: Anuncios
- Tablero: A
- Cuadrado: A
Sintaxis:
<advertisement> <img src='link'/> </advertisment>
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, hemos utilizado el elemento Anuncio para mostrar anuncios estándar mediante el uso de vistas de anuncios de IU semántica de ReactJS
App.js
import React from 'react'
import { Advertisement } 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 = () => (
<div>
<br/>
<Advertisement unit='medium rectangle'>
<img src=
'https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q.jpg' />
</Advertisement>
</div>
)
export default btt
Producción:
Ejemplo 2: En este ejemplo, hemos utilizado el elemento Anuncio con banner de tipo de unidad mediante el uso de vistas de anuncio de IU semántica de ReactJS.
App.js
import React from 'react'
import { Advertisement } 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 = () => (
<div>
<br/>
<Advertisement unit='banner' test='GeeksforGeeks' />
</div>
)
export default btt
Producción:
Referencia: https://react.semantic-ui.com/views/advertisement