Interprétation détaillée du modèle de rendu backend React-js tutoriel-php.cn

Interprétation détaillée du modèle de rendu backend React

亚连

Libérer： 2018-06-12 16:12:48

original

2215 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. Maintenant, je le partage avec vous et le donne comme référence.

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

Démo simple

Code du modèle

Créez d'abord le répertoire des composants et ajoutez le fichier 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 est simplifié basé sur Jsx de React Référence et création du composant, en supposant qu'une structure de répertoires est 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

puis rendu via nx .render

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

Copier après la connexion

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.