Ako zostaviť Markdown Preview s React.js

Budovanie skutočných projektov je skvelý spôsob, ako sa naučiť Reagovať a upevniť niektoré jeho základné princípy. V tomto príspevku teda budeme vytvárať jednoduchý Markdown Preview, ako je to, čo vidíte na obrázku vyššie. Pôjde o jednoduchú reakčnú aplikáciu, ktorá bude obsahovať textovú oblasť pre vstup Markdown a kartu ukážky, kde sa zobrazí prevedený text.

Ak chcete skočiť priamo do kódu, pozrite si GitHub Repo tu: //github.com/lelouchB/markdown-previewer/tree/master

A tu je odkaz na nasadenú verziu: //markdown-previewer.lelouch-b.now.sh/.

Teraz začnime.

Predpoklady

  1. Znalosť HTML, CSS, Javascript a Bootstrap.
  2. Základné znalosti Reagovať.
  3. Uzol a NPM sú nainštalované na vašom lokálnom dev stroji.
  4. Ľubovoľný editor kódu podľa vášho výberu.

Ak máte pocit, že váš pokrok je brzdený, pretože o týchto témach neviete dosť, vyskúšajte stránku //www.freecodecamp.org/learn. Existuje niekoľko úžasných modulov, ktoré vám pomôžu začať v krátkom čase.

Nastaviť

Túto aplikáciu zostavíme pomocou npx create-react-app. Aplikácia Create React je oficiálne podporovaný spôsob vytvárania jednostránkových aplikácií React . Ponúka moderné nastavenie zostavenia bez konfigurácie.

V adresári projektu spustite v termináli nasledujúci príkaz:

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

Potom otvorte // localhost: 3000 /, aby ste videli svoju aplikáciu. Bude to vyzerať takto:

Teraz sa pozrime na štruktúru projektu tu:

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

Žiadna konfigurácia alebo zložité štruktúry priečinkov - iba súbory, ktoré potrebujete na zostavenie svojej aplikácie.

Teraz, skôr ako budeme pokračovať, vyčistime tieto súbory:

  1. Odstrániť index.cssa App.css.
  2. Pretože sme odstránili index.cssa App.css, odstránime import './index.css';a import './App.css';z index.jsa App.jsresp.
  3. Odstrániť logo.svga odstrániť import logo from './logo.svg';v App.js.
  4. Vo vnútri App.jsodstráňte funkciu App(). Exportujeme skôr komponent triedy ako funkčný komponent. Zmeňte   App.jsto teda takto:
import React from 'react'; export default class App extends React.Component{ render(){ return ( );} } 

Prejdite na // localhost: 3000 a teraz bude prázdny.

Dizajn

Ale ešte jedna vec, než sa do toho pustíme ... Vždy je dobré mať plán, čo vytvoríte, skôr ako začnete písať. Najmä pri vytváraní používateľského rozhrania s Reactom.

Chceme mať určitú predstavu o tom, ako bude rozhranie vyzerať, aby sme vedeli, aké komponenty musíme zostaviť a za aké údaje bude každý komponent zodpovedný.

Na začiatok som teda načrtol rýchly náčrt toho, ako bude vyzerať aplikácia markdown-previewer. Tiež som označil všetky komponenty, ktoré budeme musieť vytvoriť:

Zdá sa teda, že budeme musieť zostaviť tri primárne komponenty:

  1. Nadpis a podnadpis - Toto jednoducho zobrazí naše nadpisy a podnadpisy.
  2. Markdown Input TextArea - Toto je vstupná texarea, do ktorej sa zapíše značka, ktorú si chceme zobraziť ako ukážku.
  3. Ukážka Markdown - Toto je kontajner so sivastým pozadím, kde sa zobrazí výstup.

Niekoľko vecí, ktoré je potrebné poznamenať:

  1. Budeme mať komponent „Aplikácia“, ktorý obsahuje všetko. Toto je malý projekt, takže je ľahké udržiavať všetky komponenty v jednom súbore. Ale s nárastom veľkosti vášho projektu (napríklad pri budovaní platformy elektronického obchodu) by ste museli rozdeliť komponenty do rôznych súborov a priečinkov podľa ich typov.
  2. Keďže tento článok nie je o CSS a navrhovaní, použijem knižnicu React-Bootstrap a Inline Styles. Diskusie o nich budú krátke.

Vložené štýly v React

Pri použití vložených štýlov to znamená, že namiesto vytvárania samostatných súborov CSS sú komponenty štýlované odovzdaním vlastností CSS ako objektu. Napríklad:

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");

Štýl kľúčov je camelCased, aby bol konzistentný s prístupom k vlastnostiam v uzloch DOM od JS (napr. node.style.backgroundImage). Iné predvoľby dodávateľa, ako msby mali začínať veľkým písmenom. Preto WebkitTransitionmá veľké písmeno „W“.                

Objekt štýlu sa potom odovzdá v komponente DOM pomocou {}. V našej returnmetóde môžeme použiť spustený Javascriptový kód pomocou {}.

Zákonníka

Dobre, je čas začať písať kód! Ak sa kedykoľvek zaseknete, neváhajte sa obrátiť na hotovú aplikáciu tu: //github.com/lelouchB/markdown-previewer/tree/master a //markdown-previewer.lelouch-b.now.sh/

Inštalácia závislostí

Začnime inštaláciou našich závislostí projektu. V adresári projektu spustite nasledujúce príkazy:

npm install react-bootstrap bootstrap npm install marked

Poďme o nich diskutovať:

  1. The first command installs React-Bootstrap and Bootstrap which we will use to style our project.
  2. The second command installs Marked.js, which is a low-level markdown compiler for parsing markdown without caching or blocking for long periods of time. This will run the actual logic behind converting the markdown.

Before we start using React-Bootstrap inside our project, we will have to add the minified bootstrap CSS file to our index.js:

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

With this the dependencies have been installed and are ready to be used.

Headings

Our first task will be to add a heading to our React app and center align it. For that we will use Badge, a component of the React-Bootstrap library. Here are the steps to do that:

  1. Import Badge to App.js. Inside App.js add the following:
import Badge from "react-bootstrap/Badge"; 

2. In App.js inside return and under the div with the className="App",  add another div with the className="container".

import React from "react"; import Badge from "react-bootstrap/Badge"; export default class App extends React.Component { render() { return ( ); } } 

3. Next inside div with the className="container",  we will add the heading as follows:

Markdown Previewer

4. You can now see a heading at //localhost:3000, but it is not centered. To center the heading we will use bootstrap and enclose the above code block inside two divs.

Markdown Previewer

With this we have added a heading to our app.

Sub Headings

If you look at the design we're discussing above, you'll see that the next step will be to add two columns with the subheadings Markdown Input and Preview. One will contain the Input TextArea and the other the Preview.

  1. First we will have to create two columns placed side by side inside our app. We will do so using bootstrap. Inside the div container, add the following:

Lorem Ipsum

Lorem Ipsum

;

I have used Lorem Ipsum for now, and will remove it in the next step. Columns are created using bootstrap classes, and the first div with className="row mt-4" creates a row. The m indicates margin. The t indicates top. The other two divs with className="col-md-6" create two columns.

The app will now look something like this.

2. The next step will be to add headings to these columns and center align them. This can be done by adding a div with the className="col text-center" inside that Badge, to both the divs with the className="col-md-6".

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

3. Your App.js will now look like this:

TextArea

Next we're going to add a TextArea in our app. We will use the simple HTML tag to do so.

  1. Add another div with the classname="mark-input" and add textarea with className="input" inside it.
 ; 

2. Let's customize TextArea a bit. As discussed above, we will be using Inline Styles, so for that let's fist initailize an Object. All the variables will be declared inside the render() function but outside of return. For example,

render(){ var variableOne = "Lorem Ipsum" var variableTwo = "Lorem Ipsum" return( // Code ) }

3. Here is the inputStyle object:

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

4. Let's add the inputStyle object to our textarea:

With this we have added TextArea to our App and it will look like this:

Preview

To separate our preview from the rest of the app and to enclose it inside a container, we will follow the above process. We'll create a div inside the second columns and add a style object to it, like this:

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

Add the object to the div :

Preview

Here is how the app will look now:

We now have completed the look of our app, but it is missing its functionality, so let's add that. The process from here can be divided into three steps:

  1. Taking input from TextArea.
  2. Passing the input to the Marked.js library and displaying the processed data to the Preview column.

Taking Input from TextArea

We will use the state object.

State

In React, “state” is an object that represents the parts of the app that can change. Each component can maintain its own state, which lives in an object called this.state. The state object is where you store property values that belong to the component.

Simply put, if you’d like your app to do anything – if you want interactivity, adding and deleting things, logging in and out – that will involve state.

Here the value of our textarea is changing, and our state will change with it. We'll add the state object inside our class App, above the render() function.

It is best practice to  initialize state inside constructor. It can work without constructor also but you should avoid that. Here is how we will initialize it with the property markdown , initially having an empty string:

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

In this project or in any other react projects, always initialize state inside constructor(props) and below super(props).

Typically, in React, constructors are only used for two purposes:

  • Initializing local state by assigning an object to this.state.
  • Binding event handler methods to an instance.

Keep in mind that Constructor is the only place where you should assign this.state directly. In all other methods, you need to use this.setState() instead.

State changes are asynchronous. For better perceived performance, React may delay it, and then update several components in a single pass. React does not guarantee that the state changes are applied immediately.

As discussed above we cannot change state directly. Instead we have to use this.setState() so let's create a method that does that and is called every time the value of textarea is changed.

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

This method is created inside the class component but above the render() function.

But we will first set the value of textarea to the markdown  property in state.

Now we can add updateMarkdown() to onChange() event inside and call it this.updateMarkdown().

 { this.updateMarkdown(e.target.value); }} >; 

Next we can check to see if state is assigning properly by passing a Javascript code and console.log() our state.

 { this.updateMarkdown(e.target.value); }} > {console.log(this.state.markdown)} ; 

Now open your console and try writing inside textarea, and hopefully you will see the same being added to the console.

With this we have successfully assigned the input of textarea to our state markdown property. Here is how your App.js will look now:

Marked.js

Marked.js is the brains behind the conversion of markdown and is very simple to use.

Importing marked, add the following just below where you imported Badge from react-bootstrap/Badge

let marked = require("marked"); 

To use the Marked.js library, we just have to pass the string to be converted inside the marked() function. We already have the data dynamically stored inside the state object, so it will be done like this:

marked(this.state.markdown)

Ďalším krokom je skutočné zobrazenie prevedených údajov na webovej stránke. Použijeme to dangerouslySetInnerHTML, čo je atribút v rámci DOM Elements v React. Podľa oficiálnej dokumentácie:

dangerouslySetInnerHTMLje náhradou Reactu za použitie innerHTMLv DOM prehliadača.

To znamená, že ak v Reacte musíte nastaviť HTML programovo alebo z externého zdroja , budete musieť dangerouslySetInnerHTMLnamiesto tradičného innerHTMLv Javascript použiť.

Jednoduchými slovami dangerouslySetInnerHTMLmôžete nastaviť HTML priamo z React.

Počas používania dangerouslySetInnerHTMLbudete musieť prejsť objektom pomocou __htmlkľúča. (Upozorňujeme, že kľúč sa skladá z dvoch podčiarknutí.)

Takto to urobíme:

Týmto sme dokončili náš projekt a teraz uvidíte svoju Markdown Previewerakciu.

Tu je komplet App.js

Zvládli sme to! ?

Gratulujeme k vytvoreniu tohto nástroja React Mardown Previewer.

Čo ďalej?

Aká je teda budúcnosť tohto projektu? Vy ste budúcnosť. Vytvorte si svoju vlastnú verziu Markdown Previewer, pridajte rôzne vzory, rozloženia, vlastné funkcie. Môžete napríklad pridať tlačidlo Reset a vyčistiť tak textovú oblasť - všetko je na vašej fantázii. Dúfam, že ste sa pri programovaní zabavili

Aké ďalšie projekty alebo návody by ste chceli vidieť? Oslovte ma na Twitteri a vytvorím ďalšie návody! Ak ste inšpirovaní pridávať funkcie sami, zdieľajte ma a označte ma - rád by som o nich počul :)