React 服务端渲染全家桶

#1

react-blog 希望大佬们给个star

这是一个使用react+redux完成的全家桶bolg 项目,服务端渲染; 后台框架使用node.js 的express 框架,数据库使用的是mongodb,大量使用es6 语法。
和async await 语法;
性能之类的我没去优化;
另外由于我数据库是短板希望大家轻拍;
有许多bug .由于这个项目后期不会再进行维护了。所以这些bug 我也不会去修复。有些地方样式我也没仔细去搞。组件复用和组件优化也没做; 本人现在在做个旅游项目,这个项目就给各位参考下吧。希望能对大家有点帮助。
其中有许多我踩过的坑.

这个项目完全是基于react+react-router+redux做的。没有一点jq 代码。 因为本人实在不喜欢jq

几个已知的bug

  1. 后台 只有首页能刷新。 其余页面刷新会报404错误;
  2. 图片上传会偶尔中断node.js http 服务.但是数据和图片还是保存了和上传成功了。
  3. 有些插件内不能引入css 否为会报css 无法加载。 目前解决方案是在客户端入口 定位 #app 渲染那个文件import 就不会报错;

安装

npm install 或yarn

运行

npm start -s

检查node 版本

npm run preinstall

编译生产版本

npm run build

测试 与监听测试

npm run test:watch || npm run test

检测代码规范 或监听检测代码规范

npm run lint || npm run lint:watch

清理编译后的文件夹 和 删除编译的文件

npm run clean-dist || npm run remove-dist

使用的技术栈 和依赖组件作用

  1. node.js 版本 6.X以上
  2. mongoose(mongodb 连接操作工具)
  3. express(Node.js 框架)
  4. react (版本15.4)
  5. redux(状态管理)
  6. webpack (打包工具 2.X 版本)
  7. draft-js (react 富文本依赖)
    7.1 immutable (数据不可变库),
    7.2 js-base (富文本组件依赖的解析图片)
  8. passport (node.js 密码验证)
  9. passport-local (密码验证策略)
    9.1 passport-jwt (令牌验证)
    9.2 jwt-simple (服务端发送令牌给客户端)
  10. webpack-dev-middleware(开发环境编译中间件)
  11. webpack-hot-middleware(热加载中间件)
  12. antd (一个阿里react ui库)
  13. axios (ajax 客户端请求库,作用类似jquer 的ajax)
  14. body-parser (body 解析中间件)
  15. lodash (工具函数包)
  16. classnames (一个管理“类”组件)
  17. pugjs (html 模板引擎)
  18. multer (上传文件中间件)
  19. react-dom (react 虚拟dom节点渲染)
  20. react-image (react 一个点击预览组件)
  21. react-photo-gallery (响应式图片管理组件)
  22. react-redux (连接react 和redux)
  23. react-router (react 路由)
  24. react-router-redux (redux 异步路由系统)
  25. redux-form (redux 表单组件。提供了验证。等等强大功能)
  26. redux-thunk (redux 异步组件)
  27. object-assign (es6 对象分配)
  28. synthetic-dom (富文本组件依赖)

编译组件

  1. autoprefixer (识别css 头 如-webkit-)
  2. babel-cli (babel 命令行)
  3. babel-core (babel 核心)
  4. babel-eslint (babel 代码规范检测)
  5. babel-loader (babel 装载)
  6. babel-plugin-import (babel import 引入)
  7. babel-plugin-react-display-name (添加显示名字给react.cerateClass)
  8. babel-plugin-transform-react-constant-elements (添加转换 jsx 节点支持)
  9. babel-plugin-transform-react-remove-prop-types (添加转换 jsx 属性支持)
  10. babel-preset-es2015 (es6 转码支持)
  11. babel-preset-latest (预置 babelrc 里面支持最新的es5 es6 es7)
  12. babel-preset-react (预置 babelrc 里面支持 react)
  13. babel-preset-stage-1 (es7 语法候选版1)
  14. babel-register (对node.js 的require 勾子)
  15. chai (测试库)
  16. chalk (命令行颜色显示组件)
  17. compression (文件压缩工具)
  18. cross-env (跨平台命令行工具, 可以运行一些unix 命令)
  19. css-loader (css 装载器)
  20. enzyme (react 测试工具 可以模拟jqery dom 循环遍历)
  21. eslint (代码规范验证)
  22. eslint-plugin-import (代码引入规范验证)
  23. eslint-plugin-jsx-ally (代码 jsx 语法规范验证)
  24. eslint-plugin-react (react 规范验证)
  25. eslint-watch (验证监听)
  26. extract-text-webpack-plugin (将文本从包中提取到文件中。)
  27. file-loader (文件加载器)
  28. json-loader (json 加载器)
  29. mocha (测试工具)
  30. node-sass (支持编译sass)
  31. npm-run-all (运行所有npm 脚本)
  32. open (运行后代开浏览器)
  33. postcss-loader (支持scss 加载器)
  34. react-addons-test-utils (react 原生测试工具)
  35. react-hot-loader (react热加载工具)
  36. redux-immutable-state-invariant (检测突变的redux 状态。仅仅用于开发环境)
  37. rimraf (unix 命令行)
  38. sass-loader(sass 加载器)
  39. sinon (独立的测试框架)
  40. sinon-chai (测试工具)
  41. style-loader (样式加载器)
  42. url-loader (图片,字体加载器)
    ######这个例子使用的是传统的mvc 结构 借鉴了很多别人的经验

GITHUB 地址
https://github.com/whevether/react-blog

2 Likes
#2

看上去 React 全家桶已经很可怕了啊… 这么长

#3

大佬给个star 呗。

#4

全家桶太吓人了, 不 star , XD

#5

:sweat:

#6

很强势,大神能否留个联系方式

#7

我去。沉这么快。各位大哥给个star呀,

#8

吓到我赶紧去用vue。。react真的不适合写管理页面,简单的东西复杂化了

#9

我在用laravel+vue 写个旅游项目。
听说laravel 5.5 会支持react 了啦;

#10

大神留个联系方式啊,有群也行,求加个

#11

插入广告, React 中文微信群, 加我拉 jiyinyiyong . 大群已满, 二群一百多人.

更多 新手导航(持续更新)

#12

路漫漫其修远兮…

#13

:sob: 找不到工作. 求大神收留.

#15

#加我qq:907468866

#17

大神好厉害 >.<

#18

也可以参考 https://www.jianshu.com/p/7a1bd7f11b1f