首頁 > 文章 > web前端 > react後端渲染模板引擎noox發布使用方法

react後端渲染模板引擎noox發布使用方法

小云云原創: 2018-01-13 09:22:022167瀏覽

本文主要介紹了基於react後端渲染模板引擎noox發布使用，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧，希望能幫助大家。

React 組件化思想受到越來越多開發者的關注，組件化思想幫助開發者將頁面解耦成一個一個組件，代碼更加模組化, 更易擴展。而目前流行的後端模板引擎如ejs, swig, jade, art 共同的問題是：

需要學習各類模板引擎定義的語法，如{{if}}, {{loop}}
對元件化支援不夠強，實作複雜，不易用

針對以上痛點，筆者基於React 造出了noox 這樣一個工具，專注於後端模板的解析，讓模板解析更簡單，容易使用。

使用方法

安裝

npm install noox

#簡單的demo

範本程式碼

##首先建立元件目錄和增加範本檔案

mkdir components && cd components
vi Head.jsx

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>

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

輸出

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

原理

Noox 在React 的Jsx 的基礎上，簡化了元件參考和創建，假設創建一個目錄結構如下：

components/
 Header.jsx
 Body.jsx
 Layout.jsx

執行以下nodejs 的程式碼：

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

將會建立三個元件：

Header
Body
#Layout

然後透過nx.render 渲染

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

react後端渲染模板引擎noox發布使用方法

相關文章