Diseño de contenedores ReactJS MDBootstrap

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

En este artículo, sabremos cómo usar Containers Layout en ReactJS MDBootstrap. Containers Layout es el bloque de construcción básico de bootstrap para contener, rellenar y alinear su contenido dentro de un dispositivo o ventana gráfica.

Sintaxis:

<MDBContainer></MDBContainer>

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

npm i mdb-ui-kit
npm i mdb-react-ui-kit

Estructura del proyecto: Tendrá el siguiente aspecto.

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 Container Layout.

import React from "react";
import {
    MDBCard,
    MDBCardBody,
    MDBCardTitle,
    MDBCardText,
    MDBCardImage,
    MDBContainer
} from "mdb-react-ui-kit";
  
export default function App() {
    return (
        <MDBContainer id='gfg'>
            <center>
                <MDBCard style={{ maxWidth: "15rem" }}>
                    <MDBCardImage
                        src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220106105832/gfg200X2001.png"
                        position="top"
                    />
                    <MDBCardBody>
                        <MDBCardTitle>GeeksforGeeks</MDBCardTitle>
                        <MDBCardText>
                            Reactstrap is a bootstrap based react UI 
                            library that is used to make good looking
                            webpages with its seamless and easy to use
                            component.
                        </MDBCardText>
                    </MDBCardBody>
                </MDBCard>
            </center>
        </MDBContainer>
  
    );
}

Producción:

Ejemplo 2: En este ejemplo, sabremos cómo hacer un diseño de contenedor fluido.

import React from "react";
import {
    MDBFooter,
    MDBContainer
} from "mdb-react-ui-kit";
  
export default function App() {
    return (
        <MDBContainer id='gfg' fluid>
            <center>
                <h2>GeeksforGeeks</h2>
                <h4>ReactJS MDBootstrap Footer Component</h4>
                <MDBFooter color="primary" bgColor='light'
                    className='text-center text-lg-left'>
                    Footer Component
                </MDBFooter>
            </center>
        </MDBContainer>
  
    );
}

Producción:

Referencia: https://mdbootstrap.com/docs/b5/react/layout/containers/