Componente Jumbotron de 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.

Un jumbotron es un gran cuadro gris que se usa para indicar algún texto que requiere atención adicional. Cualquier texto que parezca importante se puede escribir dentro de un jumbotron para que parezca grande y notable. En este artículo, descubriremos cómo usar el componente Jumbotron en Reactstrap.

Propiedades:

• fluido: Las propiedades del fluido en reactStrap Jumbotron se utilizan para ocupar todo el ancho de la pantalla. Toma el valor predeterminado que es falso y el tipo es booleano.
• como: Las propiedades se usan para encontrar el tipo de elemento personalizado. Toma el valor predeterminado como <div> y el tipo es elementType
• className: las propiedades de className en reactStrap se utilizan para especificar el atributo CSS. Toma el valor predeterminado como una string.

Sintaxis: 

<Jumbotron>
  content
</Jumbotron>

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

Estructura del proyecto : Se verá como lo siguiente.

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 Jumbotron.

import React from "react";
import { Jumbotron } from "reactstrap";
const gfg = (props) => {
    return (
        <div>
            <br />
            <Jumbotron>
                <h3 className="display-2">
                    GeeksforGeeks!
                </h3>
                <hr />
                <p className="display-3">
                    A Computer Science portal for geeks. 
                    It contains well written, well 
                    thought and well explained computer 
                    science and programming articles, 
                    quizzes. A Computer Science portal 
                    for geeks. It contains well written, 
                    well thought and well explained 
                    computer science and programming
                    articles, quizzes.We provide a variety 
                    of services for you to learn, thrive 
                    and also have fun! Free Tutorials, 
                    Millions of Articles, Live, Online and 
                    Classroom Courses ,Frequent Coding 
                    Competitions ,Webinars by Industry 
                    Experts, Internship opportunities 
                    and Job Opportunities.
                </p>
            </Jumbotron>
        </div>
    );
};
  
export default gfg;

Producción:

Producción: 

Ejemplo 2: Este es un ejemplo en el que usaremos otro componente Jumbotron.

import React from "react";
import { Jumbotron, Button } from "reactstrap";
  
const geeksforgeeks = (props) => {
    return (
        <div>
            <Jumbotron>
                <h3 className="display-3">
                    Geeksforgeeks
                </h3>
                  
                <p className="lead">
                    What We Offer... <br></br>
                    Provide a variety of services 
                    for you to learn, thrive and 
                    also have fun!
                </p>
  
                <hr className="my-2" />
  
                <p>
                    Free Tutorials, Millions of Articles, 
                    Live, Online and Classroom Courses, 
                    Frequent Coding Competitions, Webinars 
                    by Industry Experts, Internship
                    opportunities and Job Opportunities. 
                    Billions of Users, Millions of Articles 
                    Published, Thousands Got Hired by Top 
                    Companies and the numbers are still growing.
                </p>
            </Jumbotron>
        </div>
    );
};
  
export default geeksforgeeks;

Producción:

Nuevo componente Jumbotron

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