Aprende a renderizar un markdown simple en componentes de React usando el componente de React Markdown.

Cómo renderizar Markdown como componentes de React

Markdown es la forma más sensata de escribir texto fácilmente. Muchas aplicaciones en las que un usuario puede escribir y almacenar texto en la base de datos en este formato, algún día necesitarán representarlo en alguna parte. El problema es que en cada plataforma este comportamiento se puede manejar de diferentes maneras, algunos desarrolladores pueden simplemente convertir el markdown en HTML en el lado del servidor y otros, por ejemplo, el desarrollador de frontend que no trabaja demasiado con tecnologías del lado del servidor, simplemente lo hará convertir el markdown en HTML en el lado del cliente. Esto, aunque no es el mejor enfoque para las aplicaciones que se utilizan en todas partes, desde todos los navegadores y para muchas personas, es bastante bueno cuando es solo para una aplicación empresarial donde el usuario siempre necesitará usar su aplicación sin quejarse del actuación.

El otro problema que necesita manejar es el proceso de depuración cuando trabaja con React, usando las React Dev Tools puede depurar fácilmente qué componentes fallan y dónde están, pero cuando transpila Markdown a HTML, no es tan fácil en Reaccionar. Es por eso que @rexxars desarrolló un componente increíble que le permite convertir Markdown en componentes React (para ser renderizados en la vista) fácilmente.

1. Instale el componente React Markdown

Con la ayuda de un componente de terceros, a saber, React Markdown, podrá convertir fácilmente un markdown simple en React Components en su vista. Para instalar este componente en su proyecto, cambie al directorio de su proyecto con la terminal y ejecute el siguiente comando NPM:

npm install --save react-markdown

Puede obtener más información sobre este componente visitando el repositorio oficial de Github aquí . El componente que se usa bajo el capó usa el asombroso CommonMark, una versión racionalizada de la sintaxis de Markdown, con una especificación e implementaciones de referencia con licencia BSD en C y JavaScript. Para obtener más información, para obtener más información, visite el sitio web oficial o el repositorio de Githbub aquí . Al mismo tiempo, para convertir el markdown en React Components, utiliza el módulo Common Mark React Renderer , un Renderer para CommonMark que devuelve una matriz de elementos React, listos para ser usados ​​en un componente React.

Nota

La única desventaja de React Markdown es que los atributos en línea dentro de HTML no funcionan .

2. Utilizándolo como componente

El módulo / biblioteca en sí es solo un componente de React que se puede incrustar fácilmente en cualquier vista de React que desee, solo importe react-markdowny configure algunas opciones :

import Markdown from 'react-markdown';

<Markdown 
    escapeHtml={true}
    source={this.ContentMarkdown} 
/>

Entonces puedes usarlo dentro de tu aplicación como:

import React from 'react';

// Import the Markdown component
import Markdown from 'react-markdown';
 
export default class App extends React.Component {
    constructor(props, context) {
        super(props, context);

        // Definir contenido de Markdown
        this.ContentMarkdown = `# Your markdown here \n <h1>Esto no se traducirá a HTML</h1>`;
    }

    render() {
        return (
            <div>
                {/* Renderizar el componente de rebajas */}
                <Markdown 
                    escapeHtml={true}
                    source={this.ContentMarkdown} 
                />
            </div>
        );
    }
}

Los posibles tipos de elementos que se pueden permitir / no permitir son (y los componentes de Reacts que se traducen en):

  • HtmlInline - HTML en línea
  • HtmlBlock - Bloque de HTML
  • Text - Nodos de texto (dentro de párrafos, elementos de lista, etc.)
  • Paragraph - Nodos de párrafo ( <p>)
  • Heading - Encabezados ( <h1>, etc.) <h2> 
  • Softbreak - Nuevas líneas
  • Hardbreak - Saltos de línea dura ( <br>)
  • Link - Vincular nodos ( <a>)
  • Image - Nodos de imagen ( <img>)
  • Emph - Nodos de énfasis ( <em>)
  • Code - Nodos de código en línea ( <code>)
  • CodeBlock - Bloques de código ( <code>)
  • BlockQuote - Bloque de comillas ( <blockquote>)
  • List - Lista de nodos ( <ol>, ) <ul>
  • Item - Lista de nodos de elementos ( <li>)
  • Strong - Nodos fuertes / en negrita ( <strong>)
  • ThematicBreak - Nodos de reglas horizontales ( <hr>)

En este caso, con el markdown que proporcionamos, el contenido generado fue:

React Console Markdown Components

Nota

No permitir un nodo también evitará la representación de cualquier hijo de ese nodo, a menos que la opción esté establecida en . Por ejemplo, rechazar un párrafo no representará sus nodos de texto secundarios. unwrapDisallowed  true

Que te diviertas ❤️!


Interesado en la programación desde los 14 años, Carlos es un programador autodidacta, fundador y autor de la mayoría de los artículos de Our Code World.

Conviertete en un programador más sociable

Patrocinadores