Como criar um visualizador de Markdown com React.js

Por 

npx create-react-app markdown-previewer
cd markdown-previewer
npm start

Então abra http: // localhost: 3000 / para ver seu aplicativo. Isso parecerá assim:

http: // localhost: 3000 /

Agora, vamos ver o Estrutura do Projeto aqui:

markdown-previewer
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── serviceWorker.js
Estrutura do Projeto

Nenhuma configuração ou estruturas de pastas complicadas – apenas os arquivos necessários para criar seu aplicativo.

Agora, antes de prosseguirmos, vamos limpar esses arquivos:

  1. Excluir index.css e App.css .
  2. Desde que excluímos index.css e App.css , retirar import './index.css'; e import './App.css';de index.js e App.js respectivamente.
  3. Excluir logo.svg e remova import logo from './logo.svg'; no App.js.
  4. Dentro App.js remova a função App() . Exportaremos um componente de classe em vez de um componente funcional. Então mude App.js para ficar assim:

import React from 'react';

export default class App extends React.Component{
render(){
  return (
    

     
    

  );}
}
App.js

Vá para http: // localhost: 3000 e ficará em branco agora.

Projeto

Mas mais uma coisa antes de entrarmos nisso … É sempre uma boa idéia ter um plano do que você criará antes de começar a digitar. Especialmente quando você está criando uma interface de usuário com o React.

Queremos ter uma idéia de como será a interface para que possamos saber quais componentes precisamos construir e quais dados cada componente será responsável pelo tratamento.

Então, para começar, desenhei um esboço rápido de como será o aplicativo visualizador-visualizador de descontos. Também rotulei todos os componentes que precisaremos criar:

Projeto

Portanto, parece que precisaremos criar três componentes principais:

  1. Título e subtítulo– Isso simplesmente exibirá nossos títulos e subtítulos.
  2. TextArea de entrada de remarcação – Esta é a área de entrada onde a marcação que queremos visualizar será gravada.
  3. Visualização Markdown – Este é um contêiner com um fundo acinzentado onde a saída será exibida.

Algumas coisas a serem observadas:

  1. Teremos um componente “App” que contém tudo. Como é um projeto pequeno, é fácil manter todos os componentes em um único arquivo. Porém, à medida que o tamanho do seu projeto aumenta (por exemplo, ao criar uma plataforma de comércio eletrônico), você precisa separar os componentes em diferentes arquivos e pastas por tipos.
  2. Como este artigo não trata de CSS e design, usarei o método React-Bootstrap biblioteca e estilos embutidos. Qualquer discussão sobre eles será mantida curta.

Estilos embutidos no React

Ao usar estilos embutidos, significa que, em vez de criar arquivos CSS separados, os componentes são estilizados passando as propriedades CSS como um Objeto. Por exemplo:

var divStyle = {
  color: 'white',
  backgroundImage: 'url(' + imgUrl + ')',
  WebkitTransition: 'all', // note the capital 'W' here
  msTransition: 'all' // 'ms' is the only lowercase vendor prefix
};

ReactDOM.render(
Hello World!
, document.getElementById("root");
Estilos embutidos

As chaves de estilo são camelCased para serem consistentes com o acesso às propriedades nos nós DOM a partir de JS (por exemplo, node.style.backgroundImage) Prefixos de fornecedor diferentes de ms deve começar com uma letra maiúscula. Isso é por que WebkitTransition tem um “W” maiúsculo.

O objeto de estilo é passado no componente DOM usando {} . Podemos usar o código Javascript executado dentro do nosso return método usando {}.

Código

Ok, é hora de começar a escrever código! Se a qualquer momento você ficar preso, sinta-se à vontade para consultar o aplicativo finalizado aqui: https://github.com/lelouchB/markdown-previewer/tree/master e https://markdown-previewer.lelouch-b.now.sh/

Instalando dependências

Vamos começar instalando nossas dependências do projeto. Dentro do diretório do projeto, execute os seguintes comandos:

npm install react-bootstrap bootstrap 
npm install marked
Instalando dependências

Agora, vamos discuti-los:

  1. O primeiro comando instala React-Bootstrap e Bootstrap, que usaremos para modelar nosso projeto.
  2. O segundo comando instala Marked.js, que é um compilador de descontos de baixo nível para analisar descontos, sem armazenar em cache ou bloquear por longos períodos de tempo. Isso executará a lógica real por trás da conversão da redução.

Antes de começarmos a usar o React-Bootstrap dentro do nosso projeto, teremos que adicionar o arquivo CSS de bootstrap minificado ao nosso index.js:

import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

Com isso, as dependências foram instaladas e estão prontas para serem usadas.

Cabeçalhos

Nossa primeira tarefa será adicionar um cabeçalho ao nosso aplicativo React e centralizá-lo. Para isso vamos usar Distintivo, um componente da biblioteca React-Bootstrap. Aqui estão as etapas para fazer isso:

  1. Importar selo para App.js. Dentro App.js adicione o seguinte:

import Badge from "react-bootstrap/Badge";

2. Em App.js retorno interno e sob o div com o className="App", adicionar outro div com o className="container".

import React from "react";
import Badge from "react-bootstrap/Badge";

export default class App extends React.Component {
  render() {
    return (
      

        

   
        

      

    );
  }
}

3. Próximo div dentro com o className="container", Adicionaremos o cabeçalho da seguinte maneira:

 

 
 Markdown Previewer

4. Agora você pode ver um cabeçalho em http: // localhost: 3000, mas não está centralizado. Para centralizar o cabeçalho, usaremos o bootstrap e colocaremos o bloco de código acima dentro de duas divs.


  

    

     
        Markdown Previewer
Título

Com isso, adicionamos um cabeçalho ao nosso aplicativo.

Subtítulos

Se você observar o design que discutimos acima, verá que o próximo passo será adicionar duas colunas com os subtítulos Entrada de remarcação e Preview. Um conterá a entrada TextArea e o outro a visualização.

  1. Primeiro, teremos que criar duas colunas colocadas lado a lado dentro do nosso aplicativo. Faremos isso usando o bootstrap. Dentro do contêiner div, adicione o seguinte:




  

    
Lorem Ipsum

  


  

    
Lorem Ipsum

  


;

Usei Lorem Ipsum por enquanto e o removerei na próxima etapa. As colunas são criadas usando classes de autoinicialização e a primeira div com className="row mt-4" cria um linha. o m indica margin. o t indica top. Os outros dois divs com className="col-md-6" crio duas colunas.

O aplicativo agora será algo parecido com isto.

2. O próximo passo será adicionar cabeçalhos a essas colunas e alinhá-los no centro. Isso pode ser feito adicionando uma div com o className = “col text-center” dentro desse emblema, para ambas as divs com o className="col-md-6".


  

    
    // Actual Sub Heading: This code block will be same for both columns

3. Seu App.js agora ficará assim:

TextArea

Em seguida, adicionaremos uma TextArea em nosso aplicativo. Vamos usar o HTML simples

;

2. Vamos personalizar um pouco a TextArea. Como discutido acima, usaremos estilos embutidos; portanto, para isso, vamos iniciar um Objeto. Todas as variáveis ​​serão declaradas dentro do render() função, mas fora de return. Por exemplo,

render(){
 var variableOne = "Lorem Ipsum"
 var variableTwo = "Lorem Ipsum"

  return(
   // Code
   )
}

3. Aqui está o inputStyle objeto:

 var inputStyle = {
      width: "400px",
      height: "50vh",
      marginLeft: "auto",
      marginRight: "auto",
      padding:"10px"
    };

4. Vamos adicionar o inputStyle opor-se ao nosso textarea:

Com isso, adicionamos o TextArea ao nosso aplicativo e ele ficará assim:

Pré-visualização

Para separar nossa visualização do restante do aplicativo e incluí-la em um contêiner, seguiremos o processo acima. Criaremos uma div dentro das segundas colunas e adicionaremos um objeto de estilo, assim:

  var outputStyle = {
      width: "400px",
      height: "50vh",
      backgroundColor: "#DCDCDC",
      marginLeft: "auto",
      marginRight: "auto",
      padding:"10px"
    };

Adicione o objeto ao div :


  

    

      
        Preview

Aqui está como o aplicativo ficará agora:

Agora, concluímos a aparência do nosso aplicativo, mas está faltando sua funcionalidade, então vamos adicionar isso. O processo daqui pode ser dividido em três etapas:

  1. Recebendo informações do TextArea.
  2. Passando a entrada para a biblioteca Marked.js e exibindo os dados processados ​​para o Pré-visualização coluna.

Obtendo entrada da TextArea

Vamos usar o state objeto.

Estado

No React, “state” é um objeto que representa as partes do aplicativo que podem ser alteradas. Cada componente pode manter seu próprio estado, que vive em um objeto chamado this.state. o state O objeto é onde você armazena valores de propriedade que pertencem ao componente.

Simplificando, se você deseja que seu aplicativo Faz qualquer coisa – se você quiser interatividade, adicionar e excluir coisas, entrar e sair – envolverá o estado.

Aqui o valor da nossa área de texto está mudando, e nosso estado mudará com ela. Nós vamos adicionar o objeto state dentro do nosso classe App, acima de render() função.

É uma boa prática inicializar state dentro constructor. Pode funcionar sem constructor também, mas você deve evitar isso. Aqui está como inicializaremos com a propriedade markdown , tendo inicialmente uma sequência vazia:

export default class App extends React.Component {
constructor(props){
    super(props)
    this.state = {
      markdown: "",
    };
  }
  render(){
  // method and other code
  }
  }

Neste projeto ou em qualquer outro projeto de reação, sempre inicialize state dentro constructor(props) e abaixo super(props).

Normalmente, no React, os construtores são usados ​​apenas para dois propósitos:

Lembre-se de que o Construtor é o único local onde você deve atribuir this.state diretamente. Em todos os outros métodos, você precisa usar this.setState() em vez de.

Alterações de estado são assíncronas. Para um melhor desempenho percebido, o React pode atrasá-lo e, em seguida, atualizar vários componentes em uma única passagem. O React não garante que as alterações de estado sejam aplicadas imediatamente.

Como discutido acima, não podemos mudar de estado diretamente. Em vez disso, temos que usar this.setState() então vamos criar um método que faça isso e seja chamado toda vez que o valor da área de texto for alterado.

  updateMarkdown(markdown) {
    this.setState({ markdown });
  }

Este método é criado dentro do componente de classe, mas acima do render() função.

Mas primeiro definiremos o valor da área de texto como markdown propriedade no estado.
área de texto

Agora podemos adicionar updateMarkdown() para onChange() evento dentro ;

Em seguida, podemos verificar se o estado está sendo atribuído corretamente, passando um código Javascript e console.log() nosso estado.

;

Agora abra seu console e tente escrever dentro da área de texto, e espero que você veja o mesmo sendo adicionado ao console.

Verifica

Com isso, atribuímos com êxito a entrada de textarea à nossa propriedade de marcação de estado. Aqui está como o seu App.js vai olhar agora:

Marked.js

Marked.js é o cérebro por trás da conversão de remarcação e é muito simples de usar.

Importando marked, adicione o seguinte logo abaixo de onde você importou o emblema react-bootstrap/Badge

let marked = require("marked");

Para usar a biblioteca Marked.js, basta passar a string a ser convertida dentro do diretório marked() função. Já temos os dados armazenados dinamicamente dentro do objeto state, portanto, isso será feito assim:

marked(this.state.markdown)

Agora, o próximo passo é realmente exibir os dados convertidos na página da web. Para fazer isso, usaremos dangerouslySetInnerHTML, que é um atributo em Elementos DOM no React. De acordo com a documentação oficial:

dangerouslySetInnerHTML é o substituto do React para o uso innerHTML no DOM do navegador.

Isso significa que, se em React, você deve definir o HTML programaticamente ou de um fonte externa, você terá que usar dangerouslySetInnerHTML em vez de tradicional innerHTML em Javascript.

Em palavras simples, usando dangerouslySetInnerHTML você pode definir o HTML diretamente do React.

Enquanto estiver usando dangerouslySetInnerHTML , você terá que passar um objeto com um __html chave. (Observe que a chave consiste em dois sublinhados.)

Aqui está como faremos isso:

Com isso, concluímos nosso projeto e agora você verá o seu Markdown Previewer em ação.

Aqui está o completo App.js

Conseguimos! 🎉

Parabéns por criar este React Mardown Previewer.

Qual o proximo?

Então, qual é o futuro deste projeto? Você é o futuro. Faça sua própria versão do Markdown Previewer, adicione diferentes designs, layouts e funcionalidades personalizadas. Por exemplo, você pode adicionar um Botão de reset para limpar a área de texto – tudo depende da sua imaginação. Espero que você tenha se divertido codificando junto.

Que outros projetos ou tutoriais você gostaria de ver? Estenda a mão para mim em Twitter, e eu farei mais tutoriais! Se você estiver inspirado a adicionar recursos, compartilhe e Marque-me – Eu adoraria ouvir sobre eles 🙂