Heim > Artikel > Web-Frontend > Detaillierte Interpretation der React-Backend-Rendering-Vorlage

Detaillierte Interpretation der React-Backend-Rendering-Vorlage

亚连Original: 2018-06-12 16:12:482151Durchsuche

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

Einfache Demo

Vorlagencode

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

mkdir components && cd components
vi Head.jsx

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>

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

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>

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

Führen Sie den folgenden NodeJS-Code aus:

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

erstellt drei Komponenten:

Header
Körper
Layout

Dann über nx.render rendern

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

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!

nginx node.js vue.js express if 类模板 JS

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Detaillierte Einführung in Komponenten höherer Ordnung in ReactNächster Artikel：Detaillierte Einführung in Komponenten höherer Ordnung in React

In Verbindung stehende Artikel

Mehr sehen