Componente multimedia ReactJS Reactstrap

Reactstrap es una biblioteca de interfaz de usuario de reacción basada en bootstrap que se utiliza para crear páginas web atractivas con su componente sencillo y fácil de usar.

En este artículo, veremos cómo usar el componente de medios en Reactstrap. El componente de medios se utiliza para agregar algunos medios a nuestro proyecto.

Propiedades:

• Etiqueta: en ReactStrap Media Component, Tag es una propiedad que se utiliza para establecer la etiqueta en el componente. Toma valores de string y función.
• className: en ReactStrap Media Component className
• encabezado: en ReactStrap Media Component, el encabezado es la propiedad en reactStrap que se usa para establecer el encabezado en el texto. Toma un valor booleano como argumento predeterminado.
• medio : en reactStrap, la propiedad del medio se usa para establecer la alineación media entre los dos objetos. Toma un valor booleano.
• fluido: en ReactStrap Media Component, el fluido se aplica a la clase .container-fluid y, si es una string, se aplica a la clase .container-{breakpoint}.
• bloque: en ReactStrap Media Component, los accesorios de bloque se utilizan para indicar si el bloque debe tener un estilo de bloque o no.
• color: los accesorios de color en reactStrap se utilizan para establecer el color del elemento en el componente.
• cuerpo: Las propiedades del cuerpo en el componente multimedia se utilizan para establecer el cuerpo del elemento. Por defecto, toma un valor booleano.
• bottom: Las propiedades bottom se utilizan para fijar la posición en la parte inferior de los componentes. Debe ser verdadero o falso, toma un valor booleano.
• hijos: las propiedades de los hijos se utilizan para establecer los hijos del elemento en los componentes. Toma un valor de Node.
• encabezado: las propiedades del encabezado se utilizan para establecer el encabezado del elemento, por defecto toma un valor booleano.
• left: las propiedades de la izquierda se utilizan para establecer la alineación del elemento en el lado izquierdo del componente, toma un valor booleano.

<Media>
  Content
</media>

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

 npm install --save reactstrap react react-dom

• Paso 4: Importe el elemento que se utilizará en el proyecto.

import {Media} from 'reactstrap'

Estructura del proyecto: Tendrá el siguiente aspecto.

Estructura del proyecto:

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: este es el ejemplo básico que muestra cómo usar el componente multimedia.

import React from "react";
import { Media } from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";
export default function App() {
    return (
        <div className="App">
            <Media>
                <Media left href="#">
                    <Media
                        object
                        src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210728124621/geekslogo.png"
                        alt="cat"
                    />
                </Media>
                <Media body>
                    <br></br>
                    <Media heading>GFG DSA Course</Media>
                    <br></br>
                    I Want to learn DSA but don't know where 
                    to start? Don't worry, this course is a 
                    complete package for you to learn all the 
                    concepts at your own pace. It's perfect 
                    for students and working professionals
                    who know at least anyone coding language.
                </Media>
            </Media>
        </div>
    );
}

Producción: 

Ejemplo 2: En este ejemplo, veremos cómo usar la propiedad de etiqueta en los medios.

• Aplicación.js

import React from 'react';
import { Media } from 'reactstrap';
  
const gfg = (props) => {
  
    return (
        <div id='gfg'>
            <br />
            <Media tag='a' href=
            'https://www.geeksforgeeks.org/'>
                <Media body>
                    <Media heading>
                        GeeksforGeeks
                    </Media>
                    Reactstrap is a bootstrap based 
                    react UI library that is used to
                    make good looking webpages with 
                    its seamless and easy to use 
                    component.
                </Media>
            </Media>
        </div>
    );
}
  
export default gfg;

Producción: 

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