React's componentization idea has attracted more and more attention from developers. The componentization idea helps developers decouple pages into components one by one, making the code more modular and easier to expand. The common problems of popular backend template engines such as ejs, swig, jade, art are:
- You need to learn the syntax defined by various template engines, such as {{if}}, {{loop}}
- Not strong enough for componentization, complex implementation, and difficult to use
In response to the above pain points, the author has created a tool like noox based on React, focusing on the analysis of back-end templates, making template analysis simpler and easier to use.
How to use
Install
npm install noox
Simple demo
Template code
First create component directory and add template files
mkdir components && cd components vi
The content is as follows:
<head>
<title>{title}</title>
<meta name="description" content={} />
<link rel="stylesheet" href="./css/" rel="external nofollow" rel="external nofollow" />
</head>
Code
const noox = require('noox');
const nx = new noox((__dirname, './components'), {title: 'noox'});
let output = ('Head', {description: 'hello, noox.'})
Output
<head> <title>noox</title> <meta name="description" content="hello, noox." /> <link rel="stylesheet" href="./css/" rel="external nofollow" rel="external nofollow" /> </head>
principle
Based on React's Jsx, Noox simplifies component reference and creation. Assuming that a directory structure is created is as follows:
components/
Run the following nodejs code:
nx = new noox((__dirname, './components'))
Three components will be created:
- Header
- Body
- Layout
Then by rendering
('Body', props)
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.