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

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

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

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