React Node 端代码实现

服务端只渲染 HTML 的 HTML,HEAD,BODY 标签结构,具体 BODY 内容由 ctx.renderClient 进行 React 客户端渲染; 文件名为 webpack entry 的文件名,注入的页面 JS 文件为 app/public 文件。

  • ${root}/app/controller/render/render.ts
import { Controller } from 'egg';
export default class ReactController extends Controller {
  public async reactClientRender() {
    const { ctx } = this;
    await ctx.renderClient('react-client-render.js', { 
      title: 'React Client Render',
      text: 'Egg + React + TypeScript + Webpack Client Side Render' 
    });
  }
}
  • ${root}/app/router.ts
app.get('/csr', app.controller.render.reactClientRender);

React Web 端代码实现

${root}/app/web/page/render-client-render/index.tsx

import React, { Component } from 'react';
import { CSR } from '../../framework/app';
class Index extends Component {
  componentDidMount() {
    console.log('client render');
  }
  render() {
    return <h1>{this.props.text}11</h1>;
  }
}
export default CSR(Index);

构建配置实现

${root}/config/res.config.js

module.exports = {
  entry: {
   'react-client-render': 'app/web/page/react-client-render/index.tsx'
  }
}

Author: sky
Reprint policy: All articles in this blog are used except for special statements CC BY 4.0 reprint polocy. If reproduced, please indicate source sky !
 Previous
本地开发 本地开发
Node 调试res debug 启动应用然后复制 chrome-devtools://devtools/bundled/inspector.html?experiments=true&v8only=true&ws=127.0.0.1:9999/__ws_proxy__ 到 chro...
2020-04-18 sky
Next 
公共代码实现 公共代码实现
React Render 初始化辅助代码${root}/app/web/framework/app.tsximport React, { Component } from 'react'; import ReactDOM from 'react-dom'; // 热更新 import { Ap...
2020-04-18 sky