Sådan opbygges en Markdown Previewer med React.js

Opbygning af egentlige projekter er en fantastisk måde at lære at reagere på og styrke nogle af dets grundlæggende principper. Så i dette indlæg bygger vi en simpel Markdown Previewer som det, du ser på billedet ovenfor. Dette vil være en simpel reageringsapp, der vil indeholde et tekstareal til Markdown-input og en preview-fane, hvor den konverterede tekst vises.

Hvis du vil springe lige ind i koden, skal du tjekke GitHub Repo her: //github.com/lelouchB/markdown-previewer/tree/master

Og her er et link til den implementerede version: //markdown-previewer.lelouch-b.now.sh/.

Lad os nu komme i gang.

Forudsætninger

  1. Kendskab til HTML, CSS, Javascript og Bootstrap.
  2. Grundlæggende viden om React.
  3. Node og NPM installeret på din lokale dev-maskine.
  4. Enhver kode editor efter eget valg.

Hvis du har lyst til, at dine fremskridt er forhindret, fordi du ikke ved nok om disse emner, skal du tjekke //www.freecodecamp.org/learn. Der er nogle fantastiske moduler der, der får dig i gang på ingen tid.

Opsætning

Vi bygger denne app ved hjælp af npx create-react-app. Create React App er en officielt understøttet måde at oprette React-applikationer på en enkelt side . Det tilbyder en moderne build-opsætning uden konfiguration.

Kør følgende kommando i terminalen i dit projektmappe:

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

Åbn derefter // localhost: 3000 / for at se din app. Det vil se sådan ud:

Lad os nu se projektstrukturen her:

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

Ingen konfiguration eller komplicerede mappestrukturer - kun de filer, du har brug for for at opbygge din app.

Lad os nu rydde op i disse filer, inden vi går videre:

  1. Slet index.cssog App.css.
  2. Da vi har slettet index.cssog henholdsvis App.cssfjern import './index.css';og import './App.css';fra index.jsog App.js.
  3. Slet logo.svgog fjern import logo from './logo.svg';i App.js.
  4. App.jsFjern funktionen indeni App(). Vi eksporterer en klassekomponent snarere end en funktionel komponent. Så skift for   App.jsat se sådan ud:
import React from 'react'; export default class App extends React.Component{ render(){ return ( );} } 

Gå over til // localhost: 3000, og den er blank nu.

Design

Men en ting mere, inden vi kommer ind i det ... Det er altid en god ide at have en plan for, hvad du skal bygge, inden du begynder at skrive. Især når du bygger en brugergrænseflade med React.

Vi vil have en idé om, hvordan grænsefladen vil se ud, så vi kan vide, hvilke komponenter vi skal bygge, og hvilke data hver komponent er ansvarlig for håndtering.

Så til at begynde med har jeg tegnet en hurtig skitse af, hvordan markdown-previewer-appen ser ud. Jeg har også mærket alle de komponenter, vi skal oprette:

Så det ser ud til, at vi bliver nødt til at bygge tre primære komponenter:

  1. Titel og underoverskrift - Dette viser blot vores overskrifter og underoverskrifter.
  2. Markdown Input TextArea - Dette er det input texarea, hvor markdown, vi vil forhåndsvise, vil blive skrevet.
  3. Markdown Preview - Dette er en container med en grålig baggrund, hvor output vises.

Et par ting at bemærke:

  1. Vi har en 'App'-komponent, der indeholder alt. Dette er et lille projekt, så det er let at vedligeholde alle komponenterne i en enkelt fil. Men når størrelsen på dit projekt stiger (for eksempel mens du bygger en e-handelsplatform), bliver du nødt til at adskille komponenter i forskellige filer og mapper efter deres typer.
  2. Da denne artikel ikke handler om CSS og design, bruger jeg React-Bootstrap-biblioteket og Inline-stilarter. Enhver diskussion om dem vil blive holdt kort.

Inline-stilarter i React

Når du bruger indbyggede stilarter, betyder det, at komponenter i stedet for at oprette separate CSS-filer er stylet ved at videregive CSS-egenskaberne som et objekt. For eksempel:

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

Stilnøgler er camelCased for at være i overensstemmelse med adgang til egenskaberne på DOM-noder fra JS (f.eks. node.style.backgroundImage). Sælgerpræfikser, der ikke msskal begynde med et stort bogstav. Dette er hvorfor WebkitTransitionhar en stor bogstav "W".                

Stilobjektet sendes derefter i DOM-komponenten ved hjælp af {}. Vi kan bruge køre Javascript-kode i vores returnmetode ved hjælp af {}.

Kode

Okay, det er tid til at begynde at skrive kode! Hvis du til enhver tid sidder fast, er du velkommen til at henvise til den færdige app her: //github.com/lelouchB/markdown-previewer/tree/master og //markdown-previewer.lelouch-b.now.sh/

Installation af afhængigheder

Lad os starte med at installere vores projektafhængigheder. Kør følgende kommandoer inde i projektmappen:

npm install react-bootstrap bootstrap npm install marked

Lad os nu diskutere dem:

  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)

Nu er det næste trin at faktisk vise de konverterede data på websiden. For at gøre det bruger vi dangerouslySetInnerHTML, hvilket er en attribut under DOM Elements i React. Ifølge den officielle dokumentation:

dangerouslySetInnerHTMLer Reacts erstatning for brug innerHTMLi browseren DOM.

Dette betyder, at hvis du i React skal indstille HTML programmatisk eller fra en ekstern kilde , bliver du nødt til at bruge i dangerouslySetInnerHTMLstedet for traditionel innerHTMLi Javascript.

I enkle ord ved hjælp af dangerouslySetInnerHTMLkan du indstille HTML direkte fra React.

Under brug dangerouslySetInnerHTMLskal du sende et objekt med en __htmlnøgle. (Bemærk nøglen består af to understregninger.)

Sådan gør vi det:

Med dette har vi afsluttet vores projekt, og nu vil du se din Markdown Previeweri aktion.

Her er det komplette App.js

Vi gjorde det! ?

Tillykke med opbygningen af ​​denne React Mardown Previewer.

Hvad er det næste?

Så hvad er fremtiden for dette projekt? Du er fremtiden. Lav din egen version af Markdown Previewer, tilføj forskellige designs, layouts, brugerdefinerede funktioner. For eksempel kan du tilføje en nulstillingsknap for at rydde tekstområdet - det er helt op til din fantasi. Jeg håber, du havde det sjovt at kode sammen.

Hvilke andre projekter eller tutorials vil du gerne se? Kontakt mig på Twitter, så laver jeg flere selvstudier! Hvis du er inspireret til selv at tilføje funktioner, så del og tag mig - jeg vil meget gerne høre om dem :)