suchen

Heim  >  Artikel  >  Web-Frontend  >  So verwenden Sie die Noox-Version der React Backend Rendering Template Engine

So verwenden Sie die Noox-Version der React Backend Rendering Template Engine

小云云
小云云Original
2018-01-13 09:22:022160Durchsuche

In diesem Artikel wird hauptsächlich die Veröffentlichung und Verwendung von Noox basierend auf der React-Back-End-Rendering-Vorlagen-Engine vorgestellt. Der Herausgeber findet es ziemlich gut, daher werde ich es jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

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:

  1. Sie müssen die von verschiedenen Template-Engines definierte Syntax lernen, wie zum Beispiel {{ if}}, {{loop}}

  2. 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

Einfach Demo

Vorlagencode

Erstellen Sie zunächst das Komponentenverzeichnis und fügen Sie Vorlagendateien hinzu


mkdir components && cd components
vi Head.jsx

Der Inhalt von Head.jsx lautet wie folgt: 


<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. Gehen Sie davon aus, dass eine Verzeichnisstruktur wie folgt erstellt wird: 


components/
 Header.jsx
 Body.jsx
 Layout.jsx

Führen Sie den folgenden NodeJS-Code aus: 


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

Es werden drei Komponenten erstellt:

  1. Header

  2. Body

  3. Layout

Dann über nx.render rendern


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

Verwandte Empfehlungen:

Webpack Konfigurations-Backend Detaillierte Erläuterung des Renderings

Was sind die Unterschiede zwischen Back-End-Rendering-HTML, Front-End-Template-Rendering-HTML und JQuery-HTML?

Reagieren Sie auf Front-End- und Back-End-Isomorphismus, um wiederholtes Rendern zu verhindern

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die Noox-Version der React Backend Rendering Template Engine. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

node.js jquery html webpack 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：Teilen Sie Beispiele für den Einstieg mit React-Komponenten höherer OrdnungNächster Artikel：Teilen Sie Beispiele für den Einstieg mit React-Komponenten höherer Ordnung

In Verbindung stehende Artikel

Mehr sehen