Componente de diseño ReactJS Reactstrap

Reactstrap es una biblioteca front-end popular que es fácil de usar con componentes React Bootstrap 4. Esta biblioteca contiene los componentes de React sin estado para Bootstrap 4. El diseño,

Row Col Podemos usar el siguiente enfoque en ReactJS para usar el componente de diseño ReactJS Reactstrap.

Accesorios de contenedores:

• fluido: si bool entonces se aplica. Clase de fluido de contenedor y, si es una string, se aplica la clase .container-{breakpoint} .
• componente: este componente se utiliza para el Node raíz. Este accesorio es una forma de usar Html con strings. Esto toma el valor predeterminado como ‘div’ y el tipo es el tipo de elemento.
• fijo: los accesorios fijos se utilizan para establecer el ancho máximo y el ancho mínimo de la pantalla. El uso principal de estos accesorios es establecer la ventana gráfica. El valor predeterminado es false y el tipo es bool.
• maxWidth: los accesorios maxWidth se utilizan para establecer el ancho máximo en la ventana gráfica. El tipo de maxWidth es xs, ls, md , false y el valor predeterminado es lg .

Accesorios de fila:

• se usa para r
• form: Se utiliza para formar una grilla con una fila de formulario.
• xs: se utiliza para indicar el número de columnas que caben una al lado de la otra en dispositivos extrapequeños
• Se utiliza para indicar el número de columnas que caben una al lado de la otra en dispositivos pequeños de 576
• md: se utiliza para indicar el número de columnas que caben una al lado de la otra en dispositivos medianos de 768
• lg: Se utiliza para denotar la thata de
• Se utiliza para indicar el número de columnas que caben una al lado de la otra en dispositivos extra grandes a ≥ de 1200

Accesorios de columna:

• xs: se utiliza para indicar el número de columnas que se abarcan en dispositivos extrapequeños
• Se utiliza para indicar el número de columnas a abarcar en dispositivos pequeños de 576
• md: se utiliza para indicar el número de columnas a abarcar en dispositivos medianos 768
• lg: Se utiliza para denotar la a de
• Se utiliza para indicar el número de columnas que abarcan dispositivos extra grandes a ≥ de 1200
• ancho: se utiliza para indicar el ancho del componente en píxeles.

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: Después de crear la aplicación ReactJS, instale el módulo requerido usando el siguiente comando:

npm install reactstrap bootstrap

Estructura del proyecto: Tendrá el siguiente aspecto.

Estructura del proyecto

Ejemplo 1: para mostrar una sola columna en cada componente de fila.

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Container, Row, Col } from "reactstrap";
  
function App() {
  return (
    <div
      style={{
        display: "block",
        width: 900,
        padding: 30
      }}
    >
      <h4>ReactJS Reactstrap Layout Component</h4>
      <Container>
        <Row>
          <Col>Java</Col>
          <Col>Python</Col>
          <Col>Html</Col>
          <Col>CSS</Col>
        </Row>
       
      </Container>
    </div>
  );
}
  
export default App;

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:

Producción

Ejemplo 2: para mostrar varias columnas en cada componente de fila.

import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css';
import {
    Container, Row, Col
} from "reactstrap"
  
function App() {
  
    return (
        <div style={{
            display: 'block', width: 900, padding: 30
        }}>
            <h4>ReactJS Reactstrap Layout Component</h4>
            <Container>
                <Row className="bg-success">
                    <Col xs="3">Column with .col-3 Size</Col>
                    <Col xs="auto">.Column with col-auto Size</Col>
                    <Col xs="3">Column with .col-3 Size</Col>
                </Row>
                <Row className="bg-secondary">
                    <Col xs="6">Column with .col-6 Size</Col>
                    <Col xs="6">Column with .col-6 Size</Col>
                </Row>
                <Row className="bg-success">
                    <Col xs="6" sm="4">Column with .col-6 .col-sm-4 Size</Col>
                    <Col xs="6" sm="4">Column with .col-6 .col-sm-4 Size</Col>
                    <Col sm="4"> Column with .col-sm-4 Size</Col>
                </Row>
            </Container>
        </div >
    );
}
  
export default App;

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:

Ejemplo 3: 

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Container, Row, Col } from "reactstrap";
  
function App() {
  return (
    <div
      style={{
        width: 9000,
        padding: 10
      }}
    >
      <h4> Reactstrap Layout Component</h4>
      <Container>
        <Row className="bg-danger">
          <Col xs="3">Column with .col-3 Size</Col>
          <Col xs="auto">.Column with col-auto Size</Col>
          <Col xs="3">Column with .col-3 Size</Col>
        </Row>
        <Row className="bg-primary">
          <Col xs="6">Column with .col-6 Size</Col>
          <Col xs="6">Column with .col-6 Size</Col>
        </Row>
        <Row className="bg-secondary">
          <Col xs="6" sm="4">
            Column with .col-6 .col-sm-4 Size
          </Col>
          <Col xs="6" sm="4">
            Column with .col-6 .col-sm-4 Size
          </Col>
          <Col sm="4"> Column with .col-sm-4 Size</Col>
        </Row>
      </Container>
    </div>
  );
}
  
export default App;

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:

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