search

Home  >  Article  >  Web Front-end  >  Detailed interpretation of react backend rendering template

Detailed interpretation of react backend rendering template

亚连
亚连Original
2018-06-12 16:12:482168browse

This article mainly introduces the release and use of noox based on the react back-end rendering template engine. Now I share it with you and give it as a reference.

React componentization idea has attracted the attention of more and more developers. Componentization idea helps developers decouple pages into components, making the code more modular and easier to expand. The common problem of currently popular back-end template engines such as ejs, swig, jade, and art is:

  1. You need to learn the syntax defined by various template engines, such as {{if}}, {{loop}}

  2. The support for componentization is not strong enough, the implementation is complex, and it is not easy to use

In view of the above pain points, the author created it based on React Noox is a tool that focuses on back-end template parsing, making template parsing simpler and easier to use.

How to use

Installation

npm install noox

Simple demo

Template Code

First create the component directory and add the template file

mkdir components && cd components
vi Head.jsx

Head.jsx content is as follows:

<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(&#39;noox&#39;);
const nx = new noox(path.resolve(__dirname, &#39;./components&#39;), {title: &#39;noox&#39;});
let output = nx.render(&#39;Head&#39;, {description: &#39;hello, noox.&#39;})

Output

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

Principle

Noox simplifies component reference and creation based on React's Jsx, assuming that a directory structure is created As follows: 

components/
 Header.jsx
 Body.jsx
 Layout.jsx

Run the following nodejs code: 

nx = new noox(path.resolve(__dirname, &#39;./components&#39;))

will create three components:

  1. Header

  2. Body

  3. Layout

Then render through nx.render 

nx.render(&#39;Body&#39;, props)

The above is what I compiled for everyone , I hope it will be helpful to everyone in the future.

Related articles:

How to implement the front-end star rating function component using vue2.0

How to implement before and after in nginx vue.js End-to-end separation

How to build a multi-person chat room in nodejs express environment

The above is the detailed content of Detailed interpretation of react backend rendering template. For more information, please follow other related articles on the PHP Chinese website!

nginx node.js vue.js express if 类模板 JS
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Detailed introduction to higher-order components in ReactNext article：Detailed introduction to higher-order components in React

Related articles

See more