Home > Web Front-end > JS Tutorial > body text

How to use react backend rendering template engine noox release

小云云
Release: 2018-01-13 09:22:02
Original
2167 people have browsed it

This article mainly introduces the release and use of noox based on the react back-end rendering template engine. The editor thinks it is quite good. Now I will share it with you and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

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.

Usage

Installation


##

npm install noox
Copy after login

Simple demo

Template code

First create the component directory and add the template file


mkdir components && cd components
vi Head.jsx
Copy after login

Head.jsx content 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>
Copy after login

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;})
Copy after login

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>
Copy after login

Principle

Noox simplifies component reference and creation based on React's Jsx. Assume that a directory structure is created as follows:


components/
 Header.jsx
 Body.jsx
 Layout.jsx
Copy after login

Run the following nodejs code:


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

Three components will be created:

  1. Header

  2. Body

  3. Layout

Then render through nx.render


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

Related recommendations:


Detailed explanation of webpack configuration and backend rendering

Backend What are the differences between rendering html, front-end template rendering html, and jquery's html?

React front-end and back-end isomorphism to prevent repeated rendering

The above is the detailed content of How to use react backend rendering template engine noox release. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template