基于react的轻量级同构方案
发布在react实战2016年9月18日view:2563YiksiAssowExpressReact
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

https://github.com/jnotnull/react-isomorphic

技术栈:React + React Router + Webpack + Express + Axios

运行:

  1. 安装依赖 npm install
  2. 执行启动
    1. 开发模式 script/dev
    2. 编译打包 script/build
    3. 生产模式 script/run

特性

  1. 支持客服端渲染组件。在各自组件中添加如下代码:

     statics: {
        clientRender: true
     },
    
  2. 支持公共模板替换

     <!--#header.html-->
    
  3. 支持按需加载,在routes.js中添加如下代码:

     const Index = (location, callback) => {
         require.ensure([], require => {
             callback(null, require('./handlers/Index/Index'))
         }, 'index')
     };
    
  4. 如果浏览器端出现如下错误,请确实是否没有编译,导致服务端代码和客服端代码不一致

    Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server
    
评论
发表评论
暂无评论
WRITTEN BY
jnotnull
专注于前端开发
TA的新浪微博
PUBLISHED IN
react实战

关于react实践

我的收藏