一个基于React整套技术栈+Node.js的前端页面制作工具

pagemaker是一个前端页面制作工具，方便产品，运营和视觉的同学迅速开发简单的前端页面，从而可以解放前端同学的工作量。此项目创意来自网易乐得内部项目nfop中的pagemaker项目。原来项目的前端是采用jquery和模板ejs做的，每次组件的更新都会重绘整个dom，性能不是很好。因为当时react特别火，加上项目本身的适合，最后决定采用react来试试水。因为原来整个项目是包含很多子项目一起，所以后台的实现也没有参考，完全重写。

本项目只是原来项目的简单实现，去除了用的不多和复杂的组件。但麻雀虽小五脏俱全，本项目采用了react的一整套技术栈，适合那些对react有过前期学习，想通过demo来加深理解并动手实践的同学。建议学习本demo的之前，先学习/复习下相关的知识点：React 技术栈系列教程、Immutable 详解及 React 中实践。

线上地址

一、功能特点

组件丰富。有标题、图片、按钮、正文、音频、视频、统计、jscss输入。
实时预览。每次修改都可以立马看到最新的预览。
支持三种导入方式，支持导出配置文件。
支持恢复现场功能(关闭页面配置不丢失)
支持Undo/Redo操作。(组件个数发生变化为触发点)
可以随时发布、修改、删除已发布的页面。
本项目密码统一采用bcrypt编码，即使拖库也不会泄漏自己的密码。
每个页面都有一个发布密码，从而可以方便多人管理也可防止别人修改。
页面前端架构采用react+redux，并采用immutable数据结构。可以将每次组件的更新最小化，从而达到页面性能的最优化。
后台对上传的图片自动进行压缩，防止文件过大
适配移动端

二、用到的技术

1. 前端

React
Redux
React-Redux
Immutable
React-Router
fetch
es6
es7

2. 后台

Node
Express

3. 工具

Webpack
Sass
Pug

三、脚手架工具

因为项目用的技术比较多，采用脚手架工具可以省去我们搭建项目的时间。经过搜索，我发现有三个用的比较多：
1. create-react-app create-react-app star数
2. react-starter-kit react-starter-kit star数
3. react-boilerplate react-boilerplate star数

github上的star数都很高，第一个是Facebook官方出的react demo。但是看下来，三个项目都比较庞大，引入了很多不需要的功能包。后来搜索了下，发现一个好用的脚手架工具：yeoman，大家可以选择相应的generator。我选择的是react-webpack。项目比较清爽，需要大家自己搭建redux和immutable环境，以及后台express。其实也好，锻炼下自己构建项目的能力。

四、核心代码分析

1. Store

Store 就是保存数据的地方，你可以把它看成一个容器。整个应用只能有一个 Store。

import { createStore } from 'redux';
import { combineReducers } from 'redux-immutable';

import unit from './reducer/unit';
// import content from './reducer/content';

let devToolsEnhancer = null;
if (process.env.NODE_ENV === 'development') {
    devToolsEnhancer = require('remote-redux-devtools');
}

const reducers = combineReducers({ unit });
let store = null;
if (devToolsEnhancer) {
    store = createStore(reducers, devToolsEnhancer.default({ realtime: true, port: config.reduxDevPort }));
}
else {
    store = createStore(reducers);
}
export default store;

Redux 提供createStore这个函数，用来生成 Store。由于整个应用只有一个 State 对象，包含所有数据，对于大型应用来说，这个 State 必然十分庞大，导致 Reducer 函数也十分庞大。Redux 提供了一个 combineReducers 方法，用于 Reducer 的拆分。你只要定义各个子 Reducer 函数，然后用这个方法，将它们合成一个大的 Reducer。当然，我们这里只有一个 unit 的 Reducer ，拆不拆分都可以。

devToolsEnhancer是个中间件（middleware）。用于在开发环境时使用Redux DevTools来调试redux。

2. Action

Action 描述当前发生的事情。改变 State 的唯一办法，就是使用 Action。它会运送数据到 Store。

import Store from '../store';

const dispatch = Store.dispatch;

const actions = {
    addUnit: (name) => dispatch({ type: 'AddUnit', name }),
    copyUnit: (id) => dispatch({ type: 'CopyUnit', id }),
    editUnit: (id, prop, value) => dispatch({ type: 'EditUnit', id, prop, value }),
    removeUnit: (id) => dispatch({ type: 'RemoveUnit', id }),
    clear: () => dispatch({ type: 'Clear'}),
    insert: (data, index) => dispatch({ type: 'Insert', data, index}),
    moveUnit: (fid, tid) => dispatch({ type: 'MoveUnit', fid, tid }),
};

export default actions;