基于react后端渲染模板引擎noox發(fā)布使用
更新時間：2018年01月11日 09:51:36 作者：suxiaoxin
本篇文章主要介紹了基于react后端渲染模板引擎noox發(fā)布使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
React 組件化思想受到越來越多開發(fā)者的關(guān)注，組件化思想幫助開發(fā)者將頁面解耦成一個一個組件，代碼更加模塊化, 更易擴展。而目前流行的后端模板引擎如 ejs, swig, jade, art 共同的問題是：
- 需要學習各類模板引擎定義的語法，如 {{if}}, {{loop}}
- 對組件化支持不夠強，實現(xiàn)復雜，不易用
針對以上痛點，筆者基于 React 造出了 noox 這樣一個工具，專注于后端模板的解析，讓模板解析更加簡單，易用。
使用方法
安裝
npm install noox
簡單的 demo
模板代碼
首先創(chuàng)建組件目錄和增加模板文件
mkdir components && cd components vi Head.jsx
Head.jsx 內(nèi)容如下:
<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('noox');
const nx = new noox(path.resolve(__dirname, './components'), {title: 'noox'});
let output = nx.render('Head', {description: 'hello, noox.'})
輸出
<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 的基礎(chǔ)上，簡化了組件引用和創(chuàng)建，假設(shè)創(chuàng)建一個目錄結(jié)構(gòu)如下：
components/ Header.jsx Body.jsx Layout.jsx
運行如下 nodejs 的代碼：
nx = new noox(path.resolve(__dirname, './components'))
將會創(chuàng)建三個組件：
- Header
- Body
- Layout
然后通過 nx.render 渲染
nx.render('Body', props)
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
詳解React中的useMemo和useCallback的區(qū)別
React中的useMemo和useCallback是兩個重要的Hooks。常常被用于優(yōu)化組件的性能。雖然這兩個Hooks看起來很相似，但它們彼此之間還是有很大的區(qū)別的，隨著小編一起來學習吧2023-04-04
這篇文章主要為大家介紹了每天學習一個hooks?useMount，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
這篇文章主要介紹了React之虛擬DOM的實現(xiàn)原理分析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
react-native-video實現(xiàn)視頻全屏播放的方法
這篇文章主要介紹了react-native-video實現(xiàn)視頻全屏播放的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了react中關(guān)于useCallback的用法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
使用React+ts實現(xiàn)無縫滾動的走馬燈詳細過程
這篇文章主要給大家介紹了關(guān)于使用React+ts實現(xiàn)無縫滾動的走馬燈詳細過程,文中給出了詳細的代碼示例以及圖文教程,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了react native 仿微信聊天室實例代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-09
今天帶來大家學習react-diagram 序列化Json解讀的相關(guān)知識，本文通過多種案例給大家分析序列化知識，通過圖文并茂的形式給大家介紹的非常詳細，感興趣的朋友一起看看吧2021-05-05
React服務(wù)端渲染和同構(gòu)的實現(xiàn)
本文主要介紹了React服務(wù)端渲染和同構(gòu)的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-04-04
阿里低代碼框架lowcode-engine自定義設(shè)置器詳解
這篇文章主要為大家介紹了阿里低代碼框架lowcode-engine自定義設(shè)置器示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02