代码地址如下：
http://www.demodashi.com/demo/14960.html

项目简介

H5DS (HTML5 Design software) 这是一款基于WEB的 H5制作工具。让不会写代码的人也能轻松快速上手制作H5页面。
h5ds 官方站：http://www.h5ds.com

2. 执行命令安装依赖

执行 ** npm install ** 安装第三方依赖，如果npm安装失败，可以试试cnpm安装，具体使用说明见：http://npm.taobao.org/

安装依赖可能时间会比较长，请耐心等待。正常情况下，安装成功后，控制台不会出现error。

3. 安装成功后，启动项目

安装成功后，启动npm start 会自动启动项目，打开浏览器 http://localhost:8787 即可访问项目。

技术架构：

1、功能介绍
2、技术架构
3、性能优化
4、细节分享

1、项目功能介绍

很久没写过技术类的文章了，这次给大家分享一个近期的项目，采用react+mobx+jquery构建的大型工具类项目。查看项目址。

整个H5页面制作的思路是这样的：生成后的H5页面虽然是单页，但是单页下面还是有多个子页面，我们可以大致的可以分为3个类。APP包含了整个页面的内容。Page包含了单个子页面的内容，Layer是每个子页面里面的元素。这样理解我们的思路就很清晰了。每个H5页面对应有一个JSON文件，而JSON转化为JSX模板，再通过renderToStaticMarkup将JSX转化为HTML, 我觉得这幅图是最有效的说明，react强大的服务端渲染函数，可以直接吧JSX转化为HTML。没有任何人说过，服务器渲染方法就只能在服务器端使用，这里我直接拿到前端使用，而且效果还非常棒，具体的方法renderToStaticMarkup

why mobx li>

我是个野蛮的开发者，喜欢用最简单的代码，去实现业务，而mobx更加灵活多变，没有那么多限制和约束，而redux好比墨守成规的名门子弟，虽然约束是可以让代码更加规范，如果是以大量的代码堆积出来的规范，我还是觉得已经脱离了技术的实际意义，同样是增加维护成本的，我绝对不是一个合格的程序员，如果能 code less，do more，我宁愿牺牲规范不择手段。

why jquery li>

之前很多朋友这样对我说：用了react就不要用jquery了，jquery能做的事情react也能做，为什么还要用其他库也不规范。其实我的回答往往是这样的：我比较任性，而且喜欢jquery！为什么都普遍认为jquery和react不要共存，大致有以下几点：

从框架层面讲，react可以通过state修改dom，数据会从Virtual DOM到真实的DOM走一遍，如果用了jquery是直接修改DOM，这样导致的结果就是state和真实的DOM就不能对应起来了，react也就失去了他存在的意义。
从思想方面来讲，jquery直接操作dom和react的思想所违背。

但是实际的业务千变万化，有哪个框架能说自己能轻松实现所有业务uery是工具库，react是ui库，如果运用得当，个人觉得配合起来还是非常不错的选择！有时候用jquery操作DOM，在性能方面能完胜react。比如拖动排序功能！

技术选型的问题说完了，接下来聊聊整个项目的架构吧！

如果用jquery + react 去实现：

版权声明

补充

源码结构图