Componente React Rebass Flex

React Rebass es un framework front-end que fue diseñado teniendo en cuenta a React. En este artículo, sabremos cómo usar Flex Component en React Rebass. Flex es un componente importante que se requiere en cada desarrollo. Entonces, para crear un componente Flex, podemos importar el componente Rebass Flex. 

El componente flexible se utiliza para configurar la flexión en el contenido.

Sintaxis:

<Flex>
  Content
</FLex>

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

npm install --save react-toolbox

Estructura del proyecto : Se verá como lo siguiente.

Estructura de archivos

Ejemplo 1: Este es el ejemplo básico que muestra cómo usar el componente Flex.

import React from "react";
import { Flex, Box } from "rebass";
  
const gfg = (props) => {
    return (
        <div id="gfg">
            <br />
            <Flex>
                <Box
                    p={5}
                    fontSize={5}
                    width={[0.5]}
                    color="white"
                    bg="Green"
                    textAlign="center"
                >
                    GeeksforGeeks
                </Box>
                <Box
                    p={5}
                    fontSize={5}
                    width={[0.5]}
                    color="bue"
                    bg="red"
                    textAlign="center"
                >
                    GeeksforGeeks
                </Box>
            </Flex>
        </div>
    );
};
  
export default gfg;

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

npm start

Producción:

Referencia: https://rebassjs.org/flex