Componente React Rebass MDX

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 MDX en React rebass. MDX Component es un componente importante que se requiere en cada desarrollo.

MDX es un formato basado en rebajas que le permite importar y usar componentes de React en línea. Es un formato fantástico para documentos, blogs y otro contenido organizado.

Sintaxis:

<Box p={3} color='red' bg='green'>GeeksforGeeks</Box>

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 i rebass

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 la MDX.

App.js

import React from "react";
import { Heading, Text } from "rebass";
  
const gfg = () => {
  return (
    <div id='gfg'>
      <h2>GeeksforGeeks</h2>
      <h4>React Rebass MDX </h4>
      <Heading p={3} color='red' bg='green'>MDX</Heading>
      <br/>
      <Text p={3} color='white' bg='blue'>GeeksforGeeks</Text>
    </div>
  );
};
  
export default gfg;

Producción:

React Rebass MDX Component

Ejemplo 2: En este ejemplo, sabremos cómo hacer un MDX usando accesorios.

App.js

import React from "react";
import { Heading, Text } from "rebass";
  
const gfg = () => {
  return (
    <div id='gfg'>
      <h2>GeeksforGeeks</h2>
      <h4>React Rebass MDX </h4>
      <Heading sx={{p: 4, color:'blue', bg:'red'}}>
        MDX
      </Heading>
      <br/>
      <Text sx={{p:4, color:'green', bg:'yellow'}}>
        GeeksforGeeks
      </Text>
    </div>
  );
};
  
export default gfg;

Producción:

React Rebass MDX Component

Referencia: https://rebassjs.org/guides/mdx

Publicación traducida automáticamente

Artículo escrito por taran910 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *