Detaillierte Interpretation der React-Backend-Rendering-Vorlage-js-Tutorial-php.cn

Detaillierte Interpretation der React-Backend-Rendering-Vorlage

亚连

Freigeben： 2018-06-12 16:12:48

Original

2099 Leute haben es durchsucht

Dieser Artikel stellt hauptsächlich die Veröffentlichung und Verwendung von Noox basierend auf der React-Back-End-Rendering-Vorlagen-Engine vor. Jetzt teile ich ihn mit Ihnen und gebe ihn als Referenz.

Die Idee der React-Komponentisierung hat immer mehr Aufmerksamkeit von Entwicklern auf sich gezogen. Die Idee der Komponentisierung hilft Entwicklern, Seiten in Komponenten zu entkoppeln, wodurch der Code modularer und einfacher erweiterbar wird. Die derzeit gängigen Back-End-Template-Engines wie EJS, Swig, Jade und Art haben ein gemeinsames Problem:

Sie müssen die von verschiedenen Template-Engines definierte Syntax lernen, wie zum Beispiel {{ if}}, {{loop}}
Die Unterstützung für die Komponentisierung ist nicht stark genug, die Implementierung ist komplex und nicht einfach zu verwenden

Angesichts der oben genannten Schwachstellen hat der Autor es basierend auf React Noox erstellt, einem Tool, das sich auf das Parsen von Back-End-Vorlagen konzentriert und das Parsen von Vorlagen einfacher und benutzerfreundlicher macht.

Verwendung

Installation

npm install noox

Nach dem Login kopieren

Einfache Demo

Vorlagencode

Erstellen Sie zunächst das Komponentenverzeichnis und fügen Sie die Vorlagendatei

mkdir components && cd components
vi Head.jsx

Nach dem Login kopieren

Head.jsx mit folgendem Inhalt hinzu:

<head>
 <title>{title}</title>
 <meta name="description" content={props.description} />
 <link rel="stylesheet" href="./css/style.css" rel="external nofollow" rel="external nofollow" />
</head>

Nach dem Login kopieren

Node. js-Code

const noox = require(&#39;noox&#39;);
const nx = new noox(path.resolve(__dirname, &#39;./components&#39;), {title: &#39;noox&#39;});
let output = nx.render(&#39;Head&#39;, {description: &#39;hello, noox.&#39;})

Nach dem Login kopieren

Ausgabe

<head>
 <title>noox</title>
 <meta name="description" content="hello, noox." />
 <link rel="stylesheet" href="./css/style.css" rel="external nofollow" rel="external nofollow" />
</head>

Nach dem Login kopieren

Prinzip

Noox vereinfacht Komponentenreferenz und -erstellung basierend auf Reacts Jsx, vorausgesetzt, es handelt sich um eine Verzeichnisstruktur Wie folgt erstellt:

components/
 Header.jsx
 Body.jsx
 Layout.jsx

Nach dem Login kopieren

Führen Sie den folgenden NodeJS-Code aus:

nx = new noox(path.resolve(__dirname, &#39;./components&#39;))

Nach dem Login kopieren

erstellt drei Komponenten:

Header
Körper
Layout

Dann über nx.render rendern

nx.render(&#39;Body&#39;, props)

Nach dem Login kopieren

Das Obige ist das, wofür ich kompiliert habe Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

So implementieren Sie die Front-End-Sternebewertungsfunktionskomponente mit vue2.0

So implementieren Sie sie in nginx+vue.js Trennung von Front-End und Back-End

So erstellen Sie einen Mehrpersonen-Chatroom in der NodeJS+Express-Umgebung

Das obige ist der detaillierte Inhalt vonDetaillierte Interpretation der React-Backend-Rendering-Vorlage. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!