基于react后端渲染模板引擎noox发布使用

React 组件化思想受到越来越多开发者的关注，组件化思想帮助开发者将页面解耦成一个一个组件，代码更加模块化, 更易扩展。而目前流行的后端模板引擎如 ejs, swig, jade, art 共同的问题是：

  1. 需要学习各类模板引擎定义的语法，如 {{if}}, {{loop}}
  2. 对组件化支持不够强，实现复杂，不易用

针对以上痛点，笔者基于 React 造出了 noox 这样一个工具，专注于后端模板的解析，让模板解析更加简单，易用。

使用方法

安装

npm install noox

简单的 demo

模板代码

首先创建组件目录和增加模板文件

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" 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>

原理

Noox 在 React 的 Jsx 的基础上，简化了组件引用和创建，假设创建一个目录结构如下：

components/
 Header.jsx
 Body.jsx
 Layout.jsx

运行如下 nodejs 的代码：

nx = new noox(path.resolve(__dirname, './components'))

将会创建三个组件：

  1. Header
  2. Body
  3. Layout

然后通过 nx.render 渲染

nx.render('Body', props)

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

您可能感兴趣的文章:

  • 浅谈React前后端同构防止重复渲染
  • 浅谈react前后端同构渲染
赞 (0)

相关推荐

  • 浅谈React前后端同构防止重复渲染

    浅谈React前后端同构防止重复渲染

    什么叫前后端同构? 为了解决某些问题(比如SEO.提升渲染速度等)react 提供了2个方法在服务端生成一个HTML文本格式的字符串.在得到了这个HTML格式的字符串之后,通常会将其组装成一个页面直接返回给用户的浏览器. 到这里,服务端的活已经干完了,然后就是浏览器这边干活. 浏览器拿到HTML文本后,立刻进行渲染将内容呈现给用户.然后加载页面所需的 .js 文件,然后执行 JavaScript 脚本,然后开始初始化 react 组件---- 到这里问题就来了.react 初始化组件后会执行组件

  • 浅谈react前后端同构渲染

    浅谈react前后端同构渲染

    前后端同构渲染:当客户端请求一个包含React组件页面的时候,服务端首先响应输出这个页面,客户端和服务端有了第一次交互.然后,如果加载组件的过程需要向服务端发出Ajax请求等,客户端和服务端又进行了一次交互,这样,耗时相对较长.前后端同构渲染可以在页面初次加载时把所有地方渲染好一次性响应给客户端 实现方式:保证包管理工具和模块依赖方式一致 包管理工具-npm管理,保证前后端都使用同一个兼容包 模块依赖方式-webpack,保证前后端都采用commonjs的依赖方式,确保代码可以互相依赖 服务端如

  • 基于react后端渲染模板引擎noox发布使用

    React 组件化思想受到越来越多开发者的关注,组件化思想帮助开发者将页面解耦成一个一个组件,代码更加模块化, 更易扩展.而目前流行的后端模板引擎如 ejs, swig, jade, art 共同的问题是: 需要学习各类模板引擎定义的语法,如 {{if}}, {{loop}} 对组件化支持不够强,实现复杂,不易用 针对以上痛点,笔者基于 React 造出了 noox 这样一个工具,专注于后端模板的解析,让模板解析更加简单,易用. 使用方法 安装 npm install noox 简单的 demo

  • 基于SSM 集成 Freemarker模板引擎的方法

    FreeMarker简介 FreeMarker是一个用Java语言编写的模板引擎,它基于模板来生成文本输出.FreeMarker与Web容器无关,即在Web运行时,它并不知道Servlet或HTTP.它不仅可以用作表现层的实现技术,而且还可以用于生成XML,JSP或Java 文等.可以彻底的分离表现层和业务逻辑.曾经在使用JSP 开发过程中发现在页面中大量的存在业务逻辑的代码,使得页面内容凌乱,在后期大量的修改维护过程中就变得非常困难 FreeMarker的原理就是:模板+数据模型=输出,模板只

  • 详解SpringBoot+Thymeleaf 基于HTML5的现代模板引擎

    序言: Thymeleaf 是Java服务端的模板引擎,与传统的JSP不同,前者可以使用浏览器直接打开,因为可以忽略掉拓展属性,相当于打开原生页面,给前端人员也带来一定的便利.如果你已经厌倦了JSP+JSTL的组合,Thymeleaf或许是个不错的选择!本工程传送门:SpringBoot-Web-Thymeleaf 开始使用 1.引入依赖 SpringBoot默认提供了Thymeleaf的Starter,只需简单引入依赖即可. <dependency> <groupId>org.s

  • 常用的JavaScript模板引擎介绍

    最近工作内容慢慢接近我的理想化(web前端),所以关注比较多的是前端性能!后台同事介绍使用ajax模板引擎,提高渲染速度! 下面介绍几款 JavaScript 模板引擎 1. Mustache 基于javascript 实现的模板引擎,类似于 Microsoft's jQuery template plugin,但更简单易用! 2. doT.js doT.js 包含为浏览器和Node.js 准备的 JavaScript 模板引擎. 3. jSmart jSmart 是著名的 PHP 模板引擎 S

  • Spring Boot实战之模板引擎

    虽然现在很多开发,都采用了前后端完全分离的模式,即后端只提供数据接口,前端通过AJAX请求获取数据,完全不需要用的模板引擎.这种方式的优点在于前后端完全分离,并且随着近几年前端工程化工具和MVC框架的完善,使得这种模式的维护成本相对来说也更加低一点.但是这种模式不利于SEO,并且在性能上也会稍微差一点,还有一些场景,使用模板引擎会更方便,比如说邮件模板.这篇文章主要讨论Spring boot与模板引擎Thymeleaf.Freemaker以及JSP的集成. 一.集成Thymeleaf 第一步:引

  • SpringMVC中使用Thymeleaf模板引擎实例代码

    本文研究的主要是SpringMVC中使用Thymeleaf模板引擎的相关内容,具体介绍如下. Thymeleaf提供了一组Spring集成,允许您将其用作Spring MVC应用程序中全面替代JSP的功能. Maven依赖 <!-- thymeleaf-spring4 --> <dependency> <groupId>org.thymeleaf</groupId> <artifactId>thymeleaf-spring4</artifa

  • 模板引擎正则表达式调试小技巧

    基于正则表达式替换的模板引擎很容易遇上正则表达式最大回溯/递归的限制. 惰性匹配并不可怕,正常情况下模板并不会不够用,往往不会超出限制,discuz的模板引擎就大量使用了.但是因此而不去注意.不去学习,则容易书写错误并遇上问题. 当preg_*返回的是null的时候则要注意了,判断函数是is_null. 出错并不可怕,但是最好把错误都完整的输出,这样调试就很容易了. 除了输出出错原因,还要输出匹配的文本和使用的正则,这样就很容易调试了. PHP代码 复制代码 代码如下: <?php if (is

  • Spring Boot 与 kotlin 使用Thymeleaf模板引擎渲染web视图的方法

    本篇给大家介绍Spring Boot 与 kotlin 使用Thymeleaf模板引擎渲染web视图. 静态资源访问 在我们开发Web应用的时候,需要引用大量的js.css.图片等静态资源,使用Spring Boot 与 kotlin如何去支持这些静态资源?,很简单. 默认配置 Spring Boot默认提供静态资源目录位置需置于 classpath 下,目录名需符合如下规则: /static /public /resources /META-INF/resources 举例:我们可以在src/

  • 详解js模板引擎art template数组渲染的方法

    JavaScript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注,模板引擎种类也是五花八门,我就说几个安全性高.错误处理调试优,执行速度快的有artTemplate(腾讯 14k).juicer(国外 12k)这俩个,doT除了错误处理调试差以外其他的都和这两个一样,他有一个优点是小(4k),扯远啦. art-template 是一个简约.超快的模板引擎. 什么是art-template art-template 是一个简约.超快的模板引擎.它采用作用域预声明的技术来优化模板

  • 基于JS正则表达式实现模板数据动态渲染(实现思路详解)

    最近业务上需要动态渲染模板数据,好久没写前端代码了,有点生疏,将思路简单写下来,防老: 一.业务需求: 1.前端后端定义好模板以及变量名,保存数据库 2.订单数据是前端根据支付结果获取的,最终渲染完的数据模板需要调用打印机打印出来 3.模板相对商家来说比较固定,但是每个商家需要的模板都有可能不一样,所以需要每次登录后,查询一次模板缓存前端,后续每次支付后,动态渲染数据即可 二.考点: 1.正则表达式 2.精简代码量,尽量减少前端的工作量​ 三.实现思路: 1.需要渲染数据的模板,以${变量名}区

随机推荐