The best template engine for JavaScript, base on React Jsx
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
example
src
test
.eslintrc.json
.gitignore
LICENSE
README.md
package.json

README.md

noox

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 等模板引擎。

Installation

npm install noox

Basic Example

Template code

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>


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.'})

Output

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

How it works

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)

noox api

noox construct(dir, context = {})

Instantiation noox and load some components in the dir path, use context object as global varible.

get(name)

Get a component by name

args Description
name The component name

load(dir)

load some components in the dir path

args Description
dir The component directory path

add(name, jsx)

Add a component

args Description
name The component name
jsx The component content

example:

let jsx = fs.readFileSync('./page.jsx');
add('MyPage', jsx);

render(name, props)

render a component

args Description
name The component name
props The component props