How to use react backend rendering template engine noox release
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:
You need to learn the syntax defined by various template engines, such as {{if}}, {{loop}}
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
Simple demo
Template code
First create the component directory and add the template filemkdir components && cd components vi Head.jsx
<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('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" rel="external nofollow" rel="external nofollow" /> </head>
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
nx = new noox(path.resolve(__dirname, './components'))
- Header
- Body
- Layout
nx.render('Body', props)
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!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
PHP, Vue and React: How to choose the most suitable front-end framework?
Mar 15, 2024 pm 05:48 PM
PHP, Vue and React: How to choose the most suitable front-end framework? With the continuous development of Internet technology, front-end frameworks play a vital role in Web development. PHP, Vue and React are three representative front-end frameworks, each with its own unique characteristics and advantages. When choosing which front-end framework to use, developers need to make an informed decision based on project needs, team skills, and personal preferences. This article will compare the characteristics and uses of the three front-end frameworks PHP, Vue and React.
Integration of Java framework and front-end React framework
Jun 01, 2024 pm 03:16 PM
Integration of Java framework and React framework: Steps: Set up the back-end Java framework. Create project structure. Configure build tools. Create React applications. Write REST API endpoints. Configure the communication mechanism. Practical case (SpringBoot+React): Java code: Define RESTfulAPI controller. React code: Get and display the data returned by the API.
How to add PPT mask
Mar 20, 2024 pm 12:28 PM
Regarding PPT masking, many people must be unfamiliar with it. Most people do not understand it thoroughly when making PPT, but just make it up to make what they like. Therefore, many people do not know what PPT masking means, nor do they understand it. I know what this mask does, and I don’t even know that it can make the picture less monotonous. Friends who want to learn, come and learn, and add some PPT masks to your PPT pictures. Make it less monotonous. So, how to add a PPT mask? Please read below. 1. First we open PPT, select a blank picture, then right-click [Set Background Format] and select a solid color. 2. Click [Insert], word art, enter the word 3. Click [Insert], click [Shape]
Effects of C++ template specialization on function overloading and overriding
Apr 20, 2024 am 09:09 AM
C++ template specializations affect function overloading and rewriting: Function overloading: Specialized versions can provide different implementations of a specific type, thus affecting the functions the compiler chooses to call. Function overriding: The specialized version in the derived class will override the template function in the base class, affecting the behavior of the derived class object when calling the function.
Redmi G Pro 2024 See you on March 4th, with ice cooling and violent engine PC version support
Mar 02, 2024 pm 12:19 PM
Redmi officially announced today that the new Redmi GPro 2024 will be officially released on March 4. In other words, next week we will have the release of this exciting new product. RedmiGPro2024 makes its full debut as an e-sports flagship, deeply integrating the mobile phone industry capabilities into the notebook business, presenting 210W super performance release, and Redmi performance reaching a new high. Equipped with i9-14900HX processor and RTX4060 graphics card, it perfectly combines e-sports and creation to achieve dual evolution. From this point of view, the performance of this new product will be improved again, and the actual effect is exciting. It was mentioned in the official warm-up that the new Redmi G Pro 2024 brings the PC version of the violent engine. Mobile phone technology empowerment, three major factors lead
Actual test of NVIDIA AI game engine: real-time chat with NPC, Chinese is fluent
Mar 04, 2024 am 09:40 AM
The intelligent NPC created by Academician Huang in "Cyberpunk 2077" can already speak Chinese? Qubit's first-hand experience, witnessing NPCs conversing fluently in both Chinese and English, with natural expressions and movements, and matching mouth shapes... If there wasn't a screen in front of me, it would really feel like being there. . At this year's CES exhibition, Nvidia used its intelligent engine Avatar Cloud Engine (ACE) to make game NPCs "alive", which caused quite a shock. △The intelligent NPC displayed at CES uses ACE. The characters in the game can have realistic voice conversations with players, while showing vivid expressions and body movements without having to prepare a script in advance. At the time of its debut, there were Ubisoft, Tencent, NetEase, MiHoYo and other countries.
Vue.js vs. React: Project-Specific Considerations
Apr 09, 2025 am 12:01 AM
Vue.js is suitable for small and medium-sized projects and fast iterations, while React is suitable for large and complex applications. 1) Vue.js is easy to use and is suitable for situations where the team is insufficient or the project scale is small. 2) React has a richer ecosystem and is suitable for projects with high performance and complex functional needs.
What are the common applications of C++ templates in actual development?
Jun 05, 2024 pm 05:09 PM
C++ templates are widely used in actual development, including container class templates, algorithm templates, generic function templates and metaprogramming templates. For example, a generic sorting algorithm can sort arrays of different types of data.
