Componente de imagen React Rebass

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

El componente de imagen se utiliza para crear componentes de imagen receptivos con variantes.

Sintaxis:

<Imagen href=’url de imagen’ />

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: Tendrá el siguiente aspecto.

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

import React from "react";
import { Text } from "rebass";
import { Image } from "rebass";
  
const gfg = () => {
    return (
        <div id="gfg">
            <Text fontSize={[3, 4, 5]} fontWeight="bold" 
            color="green">
                Geeksforgeeks
            </Text>
            <Text fontSize={[1, 2, 3]} fontWeight="bold" 
            color="black">
                Rebass Textarea Component
            </Text>
            <br />
            <Image
                src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png"
                sx={{
                    width: ["10%"],
                }}
            />
        </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/image