The best template engine for JavaScript, base on React Jsx. It can be used instead of ejs, swig, jade, art-template template engine.
一个基于 react jsx 的模板引擎,她可以用来替代传统的 ejs, swig, jade, art 等模板引擎。
npm install noox
Add template file
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" />
</head>
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" />
</head>
Given a folder structure like the following:
components/
Header.jsx
Body.jsx
Layout.jsx
Running nodejs code:
nx = new noox(path.resolve(__dirname, './components'))
It will create three component:
- Header
- Body
- Layout
Then to render component by use render function :
nx.render('Body', props)
Instantiation noox and load some components in the dir path, use context object as global varible.
Get a component by name
args | Description |
---|---|
name | The component name |
load some components in the dir path
args | Description |
---|---|
dir | The component directory path |
Add a component
args | Description |
---|---|
name | The component name |
jsx | The component content |
example:
let jsx = fs.readFileSync('./page.jsx');
add('MyPage', jsx);
render a component
args | Description |
---|---|
name | The component name |
props | The component props |