Comment utiliser la version Noox du moteur de modèle de rendu backend React-js tutoriel-php.cn

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

小云云

Libérer： 2018-01-13 09:22:02

original

2195 Les gens l'ont consulté

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

Copier après la connexion

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

Copier après la connexion

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>

Copier après la connexion

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

Copier après la connexion

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>

Copier après la connexion

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

Copier après la connexion

Exécutez le code nodejs suivant :

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

Copier après la connexion

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)

Copier après la connexion

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!