Accesorios de React Suite <Grid.Row>

React Suite es una biblioteca front-end popular con un conjunto de componentes React que están diseñados para la plataforma intermedia y los productos back-end.

El componente de cuadrícula permite al usuario proporcionar 24 cuadrículas. Ayuda a lograr el diseño de la respuesta. Hay diferentes accesorios para las filas y columnas de la cuadrícula de la suite de reacción para que el usuario las diseñe.

<Grid.Row> Accesorios:

• componentClass: se puede usar para el tipo de elemento personalizado para este componente.
• cuneta: se utiliza para indicar el espaciado de las rejillas.

Enfoque: Vamos a crear un proyecto React e instalar el módulo React Suite. Luego, crearemos una interfaz de usuario que mostrará React Suite Grid Row Props.

Creando proyecto React :

Paso 1: para crear una aplicación de reacción, debe instalar los módulos de reacción a través del comando npx. Se usa «npx» en lugar de «npm» porque necesitará este comando en el ciclo de vida de su aplicación solo una vez.

npx create-react-app project_name

Paso 2: después de crear su proyecto de reacción, muévase a la carpeta para realizar diferentes operaciones.

cd project_name

Paso 3: Después de crear la aplicación ReactJS, instale el módulo requerido usando el siguiente comando:

npm install rsuite

Estructura del proyecto: después de ejecutar los comandos mencionados en los pasos anteriores, si abre el proyecto en un editor, puede ver una estructura de proyecto similar a la que se muestra a continuación. El nuevo componente que el usuario crea o los cambios de código que realizaremos se realizarán en la carpeta de origen.

Estructura del proyecto

Ejemplo 1: estamos creando una interfaz de usuario que muestra 3 filas de cuadrícula de React Suite diferentes con sus accesorios.

import React from 'react'
import '../node_modules/rsuite/dist/rsuite.min.css';
import { Grid, Row, Col } from 'rsuite';
  
export default function App() {
  
    return (
        <div style={{
            margin: 100
        }}>
            <h4>React Suite Grid Row Props</h4> <br></br>
            <Grid fluid>
                <Row gutter={4}>
                    <p>Gutter spacing 4</p>
                    <Col xs={4}>
                        <div style={{ backgroundColor: 'lightgreen' }}
                            className="show-col">Row 1</div>
                    </Col>
                    <Col xs={4}>
                        <div style={{ backgroundColor: 'lightgreen' }}
                            className="show-col">Row 2</div>
                    </Col>
                    <Col xs={4}>
                        <div style={{ backgroundColor: 'lightgreen' }}
                            className="show-col">Row 3</div>
                    </Col>
                    <Col xs={4}>
                        <div style={{ backgroundColor: 'lightgreen' }}
                            className="show-col">Row 4</div>
                    </Col>
                </Row>
                <br /><br />
                <p>Gutter spacing 32</p>
                <Row gutter={32}>
                    <Col xs={4}>
                        <div style={{ backgroundColor: 'lightgreen' }}
                            className="show-col">Row 1</div>
                    </Col>
                    <Col xs={4}>
                        <div style={{ backgroundColor: 'lightgreen' }}
                            className="show-col">Row 2</div>
                    </Col>
                    <Col xs={4}>
                        <div style={{ backgroundColor: 'lightgreen' }}
                            className="show-col">Row 3</div>
                    </Col>
                    <Col xs={4}>
                        <div style={{ backgroundColor: 'lightgreen' }}
                            className="show-col">Row 4</div>
                    </Col>
                </Row>
                <br /><br />
                <p>Gutter spacing 64</p>
                <Row gutter={64}>
                    <Col xs={4}>
                        <div style={{ backgroundColor: 'lightgreen' }}
                            className="show-col">Row 1</div>
                    </Col>
                    <Col xs={4}>
                        <div style={{ backgroundColor: 'lightgreen' }}
                            className="show-col">Row 2</div>
                    </Col>
                    <Col xs={4}>
                        <div style={{ backgroundColor: 'lightgreen' }}
                            className="show-col">Row 3</div>
                    </Col>
                    <Col xs={4}>
                        <div style={{ backgroundColor: 'lightgreen' }}
                            className="show-col">Row 4</div>
                    </Col>
                </Row>
            </Grid>
        </div>
    );
}

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:

Fila de cuadrícula de React Suite con puntal de medianera

Ejemplo 2 : estamos creando una interfaz de usuario que muestra React Suite Grid Row con sus accesorios.

• Nombre de archivo: App.js

import React from 'react'
import '../node_modules/rsuite/dist/rsuite.min.css';
import { Grid, Row, Col } from 'rsuite';
  
export default function App() {
  
    return (
        <div style={{
            margin: 100
        }}>
            <h4>React Suite Grid Row Props</h4> <br></br>
            <Grid fluid>
                <p>Gutter spacing 100</p>
                <Row gutter={100}>
                    <Col xs={4}>
                        <div style={{ backgroundColor: 'lightgreen' }}
                            className="show-col">Row 1</div>
                    </Col>
                    <Col xs={4}>
                        <div style={{ backgroundColor: 'lightgreen' }}
                            className="show-col">Row 2</div>
                    </Col>
                    <Col xs={4}>
                        <div style={{ backgroundColor: 'lightgreen' }}
                            className="show-col">Row 3</div>
                    </Col>
                    <Col xs={4}>
                        <div style={{ backgroundColor: 'lightgreen' }}
                            className="show-col">Row 4</div>
                    </Col>
                </Row>
            </Grid>
        </div>
    );
}

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

Fila de cuadrícula de React Suite con puntal de medianera

Referencia: https://rsuitejs.com/components/grid/#code-lt-row-gt-code