本文主要介紹了基於react後端渲染模板引擎noox發布使用,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟著小編過來看看吧,希望能幫助大家。
React 組件化思想受到越來越多開發者的關注,組件化思想幫助開發者將頁面解耦成一個一個組件,代碼更加模組化, 更易擴展。而目前流行的後端模板引擎如ejs, swig, jade, art 共同的問題是:
需要學習各類模板引擎定義的語法,如{{if}}, {{loop}}
對元件化支援不夠強,實作複雜,不易用
針對以上痛點,筆者基於React 造出了noox 這樣一個工具,專注於後端模板的解析,讓模板解析更簡單,容易使用。
使用方法
安裝
npm install noox
#簡單的demo
範本程式碼
##首先建立元件目錄和增加範本檔案mkdir components && cd components vi Head.jsxHead.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('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 的基礎上,簡化了元件參考和創建,假設創建一個目錄結構如下:
components/ Header.jsx Body.jsx Layout.jsx執行以下nodejs 的程式碼:
#
nx = new noox(path.resolve(__dirname, './components'))將會建立三個元件:
nx.render('Body', props)相關推薦:
後端渲染html、前端模板渲染html,jquery的html,各有什麼差別?
以上是react後端渲染模板引擎noox發布使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!