詳細解讀react後端渲染模板-js教程-PHP中文網

詳細解讀react後端渲染模板

亚连

發布： 2018-06-12 16:12:48

原創

2150 人瀏覽過

本篇文章主要介紹了基於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)

登入後複製

上面是我整理給大家的，希望今後對大家有幫助。

使用vue2.0如何實作前端星星評分功能元件

在nginx vue.js中如何實作前後端分離

在nodejs express環境中如何將建置多人聊天室

以上是詳細解讀react後端渲染模板的詳細內容。更多資訊請關注PHP中文網其他相關文章！

php8，我來也

30分鐘學會網站佈局

尚觀Oracle入門到精通視頻教程

你的第一行UNI-APP程式碼

Flutter 從頭到應用程式啟動

兄弟連新版Linux視頻教程

AXURE 9影片教學（適用於產品經理互動產品設計UI）

零基礎PS影片教學

16天帶你入門UI視頻教程

PS技巧和切片技巧影片教學

阿裡雲環境搭建以及項目上線視頻教程

電腦網路概述－程式設計師必須掌握的基礎知識

程式設計師必備教學——HTTP協定講解

Websocket影片教學

詳細解讀react後端渲染模板