Maison > Article > interface Web > Comment utiliser la version Noox du moteur de modèle de rendu backend React

Comment utiliser la version Noox du moteur de modèle de rendu backend React

小云云original: 2018-01-13 09:22:022148parcourir

Cet article présente principalement la sortie et l'utilisation de noox basé sur le moteur de modèle de rendu back-end React. L'éditeur pense qu'il est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un œil. J'espère que cela pourra aider tout le monde.

L'idée de composantisation de React a attiré de plus en plus l'attention des développeurs. L'idée de composition de composants aide les développeurs à découpler les pages en composants, rendant le code plus modulaire et plus facile à développer. Les moteurs de modèles back-end populaires actuels tels que ejs, swig, jade, art ont un problème commun :

Vous devez apprendre la syntaxe définie par divers moteurs de modèles, tels que {{ if}}, {{loop}}
La prise en charge de la composantisation n'est pas assez forte, la mise en œuvre est complexe et elle n'est pas facile à utiliser

Compte tenu des problèmes ci-dessus, l'auteur l'a créé sur la base de React Noox, un outil qui se concentre sur l'analyse des modèles back-end, rendant l'analyse des modèles plus simple et plus facile à utiliser.

Comment utiliser

Installation

npm install noox

Simple démo

Code du modèle

Créez d'abord le répertoire des composants et ajoutez des fichiers de modèle

mkdir components && cd components
vi Head.jsx

Le contenu de Head.jsx est le suivant :

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

Code Node.js

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

Sortie

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

Principe

Noox simplifie la référence et la création de composants basés sur Jsx de React. Supposons qu'une structure de répertoires soit créée comme suit :

components/
 Header.jsx
 Body.jsx
 Layout.jsx

Exécutez le code nodejs suivant :

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

Trois composants seront créés :

En-tête
Corps
Mise en page

Ensuite, effectuez le rendu via nx.render

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

Recommandations associées :

webpack configuration backend Explication détaillée du rendu

Quelles sont les différences entre le rendu HTML back-end, le rendu HTML du modèle frontal et le HTML jquery ?

Réagissez à l'isomorphisme front-end et back-end pour éviter les rendus répétés

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

node.js jquery html webpack if 类模板 JS

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Partager des exemples de démarrage avec les composants d'ordre supérieur de ReactArticle suivant：Partager des exemples de démarrage avec les composants d'ordre supérieur de React

Articles Liés

Voir plus