详细解读react后端渲染模板-tutorial js-php.cn

详细解读react后端渲染模板

亚连

Lepaskan： 2018-06-12 16:12:48

asal

2150 orang telah melayarinya

本篇文章主要介绍了基于react后端渲染模板引擎noox发布使用，现在分享给大家，也给大家做个参考。

React 组件化思想受到越来越多开发者的关注，组件化思想帮助开发者将页面解耦成一个一个组件，代码更加模块化, 更易扩展。而目前流行的后端模板引擎如 ejs, swig, jade, art 共同的问题是：

需要学习各类模板引擎定义的语法，如 {{if}}, {{loop}}
对组件化支持不够强，实现复杂，不易用

针对以上痛点，笔者基于 React 造出了 noox 这样一个工具，专注于后端模板的解析，让模板解析更加简单，易用。

使用方法

安装

npm install noox

Salin selepas log masuk

简单的 demo

模板代码

首先创建组件目录和增加模板文件

mkdir components && cd components
vi Head.jsx

Salin selepas log masuk

Head.jsx 内容如下:

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

Salin selepas log masuk

Node.js Code

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

Salin selepas log masuk

输出

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

Salin selepas log masuk

原理

Noox 在 React 的 Jsx 的基础上，简化了组件引用和创建，假设创建一个目录结构如下：

components/
 Header.jsx
 Body.jsx
 Layout.jsx

Salin selepas log masuk

运行如下 nodejs 的代码：

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

Salin selepas log masuk

将会创建三个组件：

Header
Body
Layout

然后通过 nx.render 渲染

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

Salin selepas log masuk

上面是我整理给大家的，希望今后会对大家有帮助。

使用vue2.0如何实现前端星星评分功能组件

在nginx+vue.js中如何实现前后端分离

在nodejs+express环境中如何将搭建多人聊天室

Atas ialah kandungan terperinci 详细解读react后端渲染模板. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Php8, saya datang juga

Ketahui reka letak tapak web dalam masa 30 minit

Tutorial Video Permulaan Shangguan Oracle kepada Mahir

Baris pertama kod UNI-APP anda

Berkibar dari awal ke pelancaran apl

Tutorial Video Linux Baharu Brother Lian

Tutorial Video AXURE 9 (Sesuai untuk UI Reka Bentuk Produk Interaktif Pengurus Produk)

Tutorial Video PS Kemahiran Asas Sifar

Tutorial video UI 16 hari untuk anda bermula

Tutorial Video Teknik PS dan Teknik Menghiris

Tutorial Video Pembinaan Persekitaran Awan Alibaba dan Pelancaran Projek

Gambaran Keseluruhan Rangkaian Komputer - Pengetahuan Asas yang Perlu Dikuasai Pengaturcara

Tutorial Penting untuk Pengaturcara - Penjelasan Protokol HTTP

Tutorial Video Websocket

详细解读react后端渲染模板