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:
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
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('noox');
const nx = new noox(path.resolve(__dirname, './components'), {title: 'noox'});
let output = nx.render('Head', {description: 'hello, noox.'})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, './components'))
Es werden drei Komponenten erstellt:
Header
Body
Layout
Dann über nx.render rendern
nx.render('Body', props)
Verwandte Empfehlungen:
Webpack Konfigurations-Backend Detaillierte Erläuterung des Renderings
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!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
