Kaip sukurti žymėjimo peržiūros priemonę su React.js

Tikri projektai yra puikus būdas išmokti reaguoti ir įtvirtinti kai kuriuos pagrindinius jo principus. Taigi šiame įraše sukursime paprastą „Markdown“ peržiūros priemonę, kurią matote aukščiau esančiame paveikslėlyje. Tai bus paprasta reagavimo programa, kurioje bus „Markdown“ įvesties teksto sritis ir peržiūros skirtukas, kuriame pasirodys konvertuotas tekstas.

Jei norite pereiti tiesiai į kodą, patikrinkite „GitHub Repo“ čia: //github.com/lelouchB/markdown-previewer/tree/master

Čia pateikiama nuoroda į įdiegtą versiją: //markdown-previewer.lelouch-b.now.sh/.

Dabar pradėkime.

Būtinos sąlygos

  1. HTML, CSS, „Javascript“ ir „Bootstrap“ žinios.
  2. Pagrindinės reakcijos žinios.
  3. Mazgas ir NPM, įdiegti jūsų vietiniame „dev“ įrenginyje.
  4. Bet kuris jūsų pasirinktas kodo redaktorius.

Jei manote, kad jūsų pažanga yra trukdoma, nes nepakankamai žinote apie šiuos dalykus, apsilankykite //www.freecodecamp.org/learn. Yra keletas puikių modulių, kurie padės jums pradėti dirbti per trumpą laiką.

Sąranka

Mes sukursime šią programą naudodami npx create-react-app. „Create React App“ yra oficialiai palaikomas būdas sukurti vieno puslapio „React“ programas . Jis siūlo modernią konfigūracijos sąrankos sąranką.

Savo projekto kataloge terminale paleiskite šią komandą:

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

Tada atidarykite // localhost: 3000 /, kad pamatytumėte savo programą. Tai atrodys taip:

Dabar pažiūrėkime projekto struktūrą čia:

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

Nėra konfigūracijos ar sudėtingų aplankų struktūrų - tik failai, kurių reikia norint sukurti programą.

Dabar, prieš tęsdami toliau, išvalykime šiuos failus:

  1. Ištrinti index.cssir App.css.
  2. Kadangi mes ištrinta index.cssir App.csspašalinkite import './index.css';ir import './App.css';index.jsir App.jsatitinkamai.
  3. Ištrinti logo.svgir pašalinti import logo from './logo.svg';App.js.
  4. Viduje App.jspašalinkite funkciją App(). Mes eksportuosime klasės komponentą, o ne funkcinį komponentą. Taigi, pasikeiskite   App.jstaip:
import React from 'react'; export default class App extends React.Component{ render(){ return ( );} } 

Eikite į // localhost: 3000 ir dabar jis bus tuščias.

Dizainas

Bet dar vienas dalykas, kol mes į tai įsivelsime ... Prieš pradedant rašyti, visada verta turėti planą, ką ketinate pastatyti. Ypač tada, kai kuriate vartotojo sąsają su „React“.

Mes norime šiek tiek įsivaizduoti, kokia bus sąsaja, kad galėtume žinoti, kokius komponentus turime sukurti ir kokius duomenis kiekvienas komponentas bus atsakingas už jų tvarkymą.

Taigi, norėdamas pradėti, aš nupiešiau greitą eskizą, kaip atrodys žymėjimo peržiūros programa. Aš taip pat pažymėjau visus komponentus, kuriuos mums reikės sukurti:

Taigi atrodo, kad mums reikės sukurti tris pagrindinius komponentus:

  1. Pavadinimas ir paantraštė - tai tiesiog parodys mūsų antraštes ir paantraštes.
  2. Pažymėjimo įvesties teksto sritis - tai yra įvesties teksto sritis, kurioje bus parašytas žymėjimas, kurį norime peržiūrėti.
  3. Pažymėjimo peržiūra - tai konteineris su pilkšvu fonu, kuriame bus rodoma išvestis.

Keletas dalykų, kuriuos reikia atkreipti dėmesį:

  1. Turėsime „Programos“ komponentą, kuriame bus viskas. Tai nedidelis projektas, todėl visus komponentus lengva išlaikyti viename faile. Tačiau didėjant jūsų projekto dydžiui (pavyzdžiui, kuriant el. Prekybos platformą), turėtumėte atskirti komponentus į skirtingus failus ir aplankus pagal jų tipus.
  2. Kadangi šis straipsnis nėra apie CSS ir dizainą, naudosiu „React-Bootstrap“ biblioteką ir „Inline Styles“. Bet kokia diskusija apie juos bus trumpa.

Įterpti stiliai „React“

Naudojant įterptinius stilius, tai reiškia, kad vietoj atskirų CSS failų kūrimo komponentai yra stilizuojami perduodant CSS ypatybes kaip objektą. Pavyzdžiui:

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

Stiliaus klavišai yra „camelCased“, kad būtų nuosekliai pasiekiami DOM mazgų ypatybės iš JS (pvz. node.style.backgroundImage). Pardavėjo priešdėliai, kurie msneturėtų prasidėti didžiąja raide. Štai kodėl WebkitTransitiondidžiosios raidės „W“.                

Tada stiliaus objektas perduodamas DOM komponente naudojant {}. Mes galime naudoti paleistą „Javascript“ kodą returnnaudodami savo metodą {}.

Kodas

Gerai, laikas pradėti rašyti kodą! Jei bet kuriuo metu užstrigote, nedvejodami kreipkitės į paruoštą programą čia: //github.com/lelouchB/markdown-previewer/tree/master ir //markdown-previewer.lelouch-b.now.sh/

Diegiamos priklausomybės

Pradėkime nuo projekto priklausomybių diegimo. Projekto kataloge vykdykite šias komandas:

npm install react-bootstrap bootstrap npm install marked

Dabar aptarkime juos:

  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)

Kitas žingsnis - konvertuotus duomenis faktiškai rodyti tinklalapyje. Norėdami tai padaryti, mes naudosime dangerouslySetInnerHTML, kuris yra DOM elementų, esančių „React“, atributas. Pagal oficialius dokumentus:

dangerouslySetInnerHTMLyra „React“ pakaitalas naudoti innerHTMLnaršyklėje DOM.

Tai reiškia, kad jei „React“ turite nustatyti HTML programiškai arba iš išorinio šaltinio , „Javascript“ turėsite naudoti dangerouslySetInnerHTMLvietoj tradicinio innerHTML.

Paprastais žodžiais naudojant dangerouslySetInnerHTMLHTML galite nustatyti HTML tiesiai iš „React“.

Naudodamiesi dangerouslySetInnerHTMLturėsite perduoti objektą su __htmlraktu. (Atkreipkite dėmesį, kad klavišą sudaro du pabraukimai.)

Štai kaip mes tai padarysime:

Tai užbaigėme savo projektą ir dabar pamatysite savo Markdown Previewerveiklą.

Čia yra visa App.js

Mes tai padarėme! ?

Sveikiname sukūrus šį „React Mardown Previewer“.

Kas toliau?

Taigi, kokia yra šio projekto ateitis? Tu esi ateitis. Susikurkite savo „Markdown Previewer“ versiją , pridėkite skirtingų dizainų, išdėstymų, pasirinktinių funkcijų. Pavyzdžiui, galite pridėti mygtuką „Reset“, kad išvalytumėte teksto sritį - viskas priklauso nuo jūsų fantazijos. Tikiuosi, kad jums buvo smagu užkoduoti.

Kokius dar projektus ar pamokas norėtumėte pamatyti? Kreipkitės į mane „Twitter“ ir aš padarysiu daugiau pamokų! Jei jus įkvepia patys pridėti funkcijų, pasidalykite ir pažymėkite mane - norėčiau apie jas išgirsti :)