基于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前后端同构渲染
时间: 2018-01-10

浅谈react前后端同构渲染

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

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

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

浅谈php处理后端&接口访问超时的解决方法

[HTTP访问] 一般我们访问HTTP方式很多,主要是:curl, socket, file_get_contents() 等方法. 如果碰到对方服务器一直没有响应的时候,我们就悲剧了,很容易把整个服务器搞死,所以在访问http的时候也需要考虑超时的问题. [ CURL 访问HTTP] CURL 是我们常用的一种比较靠谱的访问HTTP协议接口的lib库,性能高,还有一些并发支持的功能等. CURL: curl_setopt($ch, opt) 可以设置一些超时的设置,主要包括: *(重要) CU

浅谈react.js 之 批量添加与删除功能

最近做的CMS需要用到批量添加图片的功能:在添加文件的容器盒子内,有两个内容,分别是:添加按钮与被添加的选择文件组件. 结构分析: 被添加的组件,我们称为:UploadQiNiuFiles(七牛文件上传组件),含一个删除当前组件的删除按钮 添加按钮的事件 被添加组件存放的容器 做这个效果只需要明白三个方法的用途就OK: 直接绑定要删除组件的  deleteType(),它是调用删除index数量的方法  removeContent() //删除{qiniu}与{deleteQiNiu}内容,是把

浅谈React 属性和状态的一些总结

一.属性 1.第一种使用方法:键值对 <ClaaNameA name = "Tom" /> <ClaaNameA name = {Tom} /> <ClaaNameA name = {"Tom"} /> <ClaaNameA name = {[1,2,3]} />//数组 <ClaaNameA name = {FunctionNAme} /> //定义一个函数 2.第二种方法:三个点的展开对象形式 var

浅谈react.js中实现tab吸顶效果的问题

在react项目开发中有一个需求是,页面滚动到tab所在位置时,tab要固定在顶部. 实现的思路其实很简单,就是判断当滚动距离scrollTop大于tab距离页面顶部距离offsetTop时,将tab的position变为fixed. 在react中,我在state中设置一个navTop属性,切换这个属性的值为true或者false,然后tab标签使用classnames()这个方法来利用navTop的值添加类名fixed. 一开始我是这样写的: import cs from 'classnam

浅谈react+es6+webpack的基础配置

这是模块化开发.主流框架和最新版的ECMAScript语法规范的一个小demo 准备工作 安装 nodeJs 首先进入node官网,去下载最新版的nodeJs webpack 安装webpack npm install webpack -g 参数-g表示全局安装webpack,你在cmd命令中哪个文件夹下都可以使用webpack的命令,如果不加-g的话,是只可以在你安装webpack的目录下使用webpack这个命令 webpack 也有一个 web 服务器 npm install webpac

浅谈react 同构之样式直出

前言 上文讲到通过同构服务端渲染,可以直出html结构,虽然讲解了样式,图片等静态资源在服务端引入问题的解决方案,但是并没有实际进行相关操作,这篇文章就讲解一下如何让样式像html一样直出. PS: 直出,我的理解就是输入url发起get请求访问服务端,直接得到完整响应结果,而不是同过ajax异步去获取. React 同构的关键要素 完善的 Compponent 属性及生命周期与客户端的 render 时机是 React 同构的关键. DOM 的一致性 在前后端渲染相同的 Compponent,

浅谈React Native 中组件的生命周期

概述 就像 Android 开发中的 View 一样,React Native(RN) 中的组件也有生命周期(Lifecycle).所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解生命周期,是合理开发的关键.RN 组件的生命周期整理如下图: 如图,可以把组件生命周期大致分为三个阶段: 第一阶段:是组件第一次绘制阶段,如图中的上面虚线框内,在这里完成了组件的加载和初始化: 第二阶段:是组件在运行和交互阶段,如图中左下角虚线框,这个阶段组件可以处理用户交互,或者接收事件更新界面: 第

浅谈js中用$(#ID)来作为选择器的问题(id重复的时候)

虽然经常用 但是 今天用这个去选的时候,发现怎么都设置不上值 经调查, id选择器是选择页面内全部的对象中的第一个 问题就在这------------因为以前项目里面没有说对这个弹出框做什么操作,所有id重复了也没管. 所以, 需要注意: id选择器选择的是所有里面的一个,(虽然,也是返回在一个数组里面) 而类选择器选择的是一个数组. 如下: 以上这篇浅谈js中用$(#ID)来作为选择器的问题(id重复的时候)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

浅谈python字典多键值及重复键值的使用

在python中使用字典,格式如下: dict={ key1:value1 , key2;value2 ...} 在实际访问字典值时的使用格式如下: dict[key] 多键值 字典的多键值形式如下: dict={(ke11,key12):value ,(key21,key22):value ...} 在实际访问字典里的值时的具体形式如下所示(以第一个键为例): dict[key11,key12] 或者是: dict[(key11,key12)] 以下是实际例子: 多值 在一个键值对应多个值时,