环境准备

编写前端代码逻辑

编写 React Router

创建 React Router 实例

添加 ${root}/app/web/page/blog/router/index.jsx 

  1. import { Route } from 'react-router-dom';
  2. import Home from './home';
  3. import Detail from './detail';
  5. export default function createRouter() {
  6.   return [
  7.     {
  8.       path: '/detail/:id',
  9.       component: Detail
  10.     },
  11.     {
  12.       path: '/',
  13.       component: Home
  14.     },
  15.     {
  16.       path: '*',
  17.       component: Home
  18.     }
  19.   ];  
  20. }

创建 React Router 路由页面

  • 添加 ${root}/app/web/page/blog/router/home.jsx
  1. import React, { Component } from 'react';
  2. import { connect } from 'react-redux';
  3. import { Link } from 'react-router-dom';
  5. import { hot } from 'react-hot-loader/root'
  6. import request from 'framework/request';
  7. import './home.css'
  8. class Home extends Component {
  9.   static async asyncData(context, route) {
  10.     return request.get('/api/blog/list', context);
  11.   }
  13.   render() {
  14.     const { list = [] } = this.props;
  15.     return <div className="easy-article-list">
  16.       <ul>
  17.         {list.map(function (item) {
  18.           return <li key={item.id} className="easy-article-item">
  19.             <h2 className="easy-article-title"><Link to={'/detail/' + item.id}>{item.title}</Link></h2>
  20.             <div className="easy-article-summary">{item.summary}</div>
  21.             <div className="easy-article-meta">
  22.               <span>11Word Count:{item.wordCount}  </span>
  23.               <span>Create Time: {item.createTime}</span>
  24.             </div>
  25.           </li>;
  26.         })}
  27.       </ul>
  28.     </div>;
  29.   }
  30. }
  33. const mapStateToProps = state => {
  34.   return {
  35.     list: state.list
  36.   };
  37. };
  40. const mapDispatchToProps = dispatch => {
  41.   return {};
  42. };
  44. export default connect(mapStateToProps, mapDispatchToProps)(EASY_ENV_IS_DEV ? hot(Home) : Home);
  • 添加 ${root}/app/web/page/blog/router/detail.jsx
  1. 'use strict';
  3. import React, { Component } from 'react';
  4. import { connect } from 'react-redux';
  5. import { hot } from 'react-hot-loader/root'
  6. import request from 'framework/request';
  8. class Detail extends Component {
  10.   static async asyncData(locals, route) {
  11.     const id = route.match.params.id;
  12.     return request.get(`/api/blog/${id}`, locals);
  13.   }
  15.   render() {
  16.     const { article } = this.props;
  17.     return article ? <div>
  18.       <h2 className="easy-article-detail-title">{article.title}</h2>
  19.       <div className="easy-article-info">
  20.         <iframe src={article.url} frameBorder="0" width="100%" style={{minHeight: '800px'}}></iframe>
  21.       </div>
  22.     </div> : null;
  23.   }
  24. }
  27. const mapStateToProps = state => {
  28.   return {
  29.     article: state.article
  30.   };
  31. };
  33. export default connect(mapStateToProps)(EASY_ENV_IS_DEV ? hot(Detail) : Detail)

编写 React Router 聚合页面

${root}/app/web/page/blog/view/main.jsx

  1. import React, { Component } from 'react';
  2. import { Link, Switch } from 'react-router-dom';
  3. import { hot } from 'react-hot-loader/root'
  4. import { ARTICLE_LIST, ARTICLE_DETAIL } from '../store/constant';
  5. import Layout from 'component/layout'
  6. import Header from 'component/header'
  7. import Route from '../router/route';
  8. import Home from '../router/home';
  9. import Detail from '../router/detail';
  10. import './main.css';
  12. class Main extends Component {
  14.   constructor(props) {
  15.     super(props);
  16.     this.state = { current: props.url };
  17.   }
  19.   tabClick(e) {
  20.     console.log('click', e.target);
  21.   }
  23.   render() {
  24.     return <Layout {...this.props}>
  25.       <Header></Header>
  26.       <ul className="menu-tab">
  27.         <li onClick={this.tabClick.bind(this)}><Link to="/">Home</Link></li>
  28.       </ul>
  29.       <Switch>
  30.         <Route type={ARTICLE_DETAIL} path="/detail/:id" component={Detail} />
  31.         <Route type={ARTICLE_LIST} path="/" component={Home}/>
  32.       </Switch>
  33.     </Layout>;
  34.   }
  35. }
  37. export default EASY_ENV_IS_DEV ? hot(Main) : Main;

编写 React Router 路由切换 Hook 高阶组件

${root}/app/web/page/blog/router/route.jsx

  1. 'use strict';
  3. import React, { Component } from 'react';
  4. import { Route } from 'react-router-dom';
  5. import { connect } from 'react-redux';
  6. import { update } from '../store/actions';
  8. class WrapperRoute extends Component {
  10.   async componentWillReceiveProps(nextProps) {
  11.     const { type, locals, component, computedMatch, updateState } = nextProps;
  12.     if (computedMatch.url !== this.props.computedMatch.url) {
  13.       const { asyncData } = component;
  14.       if (asyncData) {
  15.         const data = await asyncData(locals, { match: computedMatch });
  16.         updateState(type, data);
  17.       }
  18.     }
  19.   }
  21.   render() {
  22.     return <Route {...this.props} />
  23.   }
  24. }
  26. const mapStateToProps = state => {
  27.   return {
  28.     locals: state
  29.   }
  30. };
  32. const mapDispatchToProps = dispatch => {
  33.   return { 
  34.     updateState: (type, data) => dispatch(update(type, data))
  35.   };
  36. };
  38. export default connect(mapStateToProps, mapDispatchToProps)(WrapperRoute);

编写 React Store

创建 React Store 实例

  1. // ${root}/app/web/page/blog/store/constant.js
  2. export const ARTICLE_LIST = 'ARTICLE_LIST';
  3. export const ARTICLE_DETAIL = 'ARTICLE_DETAIL';
  4. export const ADD = 'ADD';
  5. export const DEL = 'DEL';
  7. // ${root}/app/web/page/blog/store/actions.js
  8. export const update = (type, data) => {
  9.   return {
  10.     type,
  11.     data
  12.   };
  13. }
  15. // ${root}/app/web/page/blog/store/reducers.js
  16. import { ARTICLE_DETAIL, ARTICLE_LIST, ADD, DEL } from './constant';
  18. export default function update(state, action) {
  19.   const newState = Object.assign({}, state);
  20.   if (action.type === ADD) {
  21.     const list = Array.isArray(action.data) ? action.data : [action.data];
  22.     newState.list = [...newState.list, ...list];
  23.   } else if (action.type === DEL) {
  24.     newState.list = newState.list.filter(data => {
  25.       return data.id !== action.id;
  26.     });
  27.   } else if (action.type === ARTICLE_LIST) {
  28.     newState.list = action.data.list;
  29.     newState.total = action.data.total;
  30.   } else if (action.type === ARTICLE_DETAIL) {
  31.     newState.article = action.data.article;
  32.   }
  33.   return newState;
  34. }
  37. // ${root}/app/web/page/blog/store/index.js
  38. import { createStore } from 'redux';
  39. import reducers from './reducers';
  41. export default function(initalState){
  42.   return createStore(reducers, initalState);
  43. }

编写 React SPA 入口代码

${root}/app/web/page/blog/index.jsx webpack.config.js 的 entry 指向该文件。

  1. import React, { Component } from 'react';
  2. import { Provider } from 'react-redux';
  3. import { BrowserRouter, StaticRouter } from 'react-router-dom';
  4. import { matchRoutes } from 'react-router-config';
  5. import createStore from './store'
  6. import createRouter from './router'
  7. import Main from './view/main'
  8. import '../../asset/css/blog.css'
  10. // 直接渲染 React Component 组件，JSX 文件结尾的 Webpack entry 自动使用 react-entry-template-loader
  11. export default class Entry extends Component {
  12.   static async asyncData(locals) {
  13.     const router = createRouter();
  14.     const url = locals.url;
  15.     const matchRouteList = matchRoutes(router, url);
  16.     const promises = matchRouteList.map(matchRoute=> {
  17.       const componentAsyncData = matchRoute.route.component.asyncData;
  18.       return componentAsyncData instanceof Function ? componentAsyncData(locals, matchRoute) : null;
  19.     });
  20.     const list = await Promise.all(promises);
  21.     return list.reduce((item, result) => {
  22.       return { ...result, ...item}
  23.     }, {});
  24.   }
  26.   render() {
  27.     if (EASY_ENV_IS_BROWSER) {
  28.       const store = createStore(window.__INITIAL_STATE__);
  29.       const { url } = store.getState();
  30.       return <Provider store={store}>
  31.         <BrowserRouter location={url}>
  32.           <Main></Main>
  33.         </BrowserRouter>
  34.       </Provider>;
  35.     }
  36.     const store = createStore(this.props);
  37.     const { url } = store.getState();
  38.     return <Provider store={store}>
  39.       <StaticRouter location={url} context={{}}>
  40.         <Main></Main>
  41.       </StaticRouter>
  42.     </Provider>;
  43.   }
  44. }

编写 Node 代码

添加 ${root}/app/controller/blog/index.js Node 代码

  1. 'usestrict';
  2. const egg = require('egg');
  3. module.exports = class IndexController extends egg.Controller {
  5.   async ssr(ctx) {
  6.     // 1. ctx.render 方法是 egg-view-react-ssr 插件提供实现
  7.     // 2. ctx.render 第一个参数 blog.js 是 webpack.config.js entry 配置的 blog 构建后 JSBundle 文件
  8.     // 3. ctx.render 第二个参数 { url, title ...} 是渲染数据，会与公共 ctx.locals 合并
  9.     await ctx.render('blog.js', { 
  10.       url: ctx.url,
  11.       title: 'Egg React ',
  12.       keywords: 'Egg,React,Egg React,Egg React SSR, Egg React CSR, Server Side Render, Client Side Render',
  13.       description: 'Egg + React + Webpack 服务端渲染 SSR (Server Side Render) 和 前端渲染 CSR (Client Side Render) 工程骨架项目'
  14.     });
  15.   }
  17.   async list() {
  18.     this.ctx.body = this.service.article.getArtilceList();
  19.   }
  21.   async detail(ctx) {
  22.     const id = ctx.params.id;
  23.     const article = this.service.article.getArticle(Number(id));
  24.     ctx.body = { article };
  25.   }
  26. };

Egg 路由配置

添加 ${root}/app/router.js Egg 路由配置

  2. module.exports = app => {
  3.   const { router, controller } = app;
  4.   router.get('/api/blog/list', controller.blog.index.list);
  5.   router.get('/api/blog/:id', controller.blog.index.detail);
  6.   router.get('/(.*?)', controller.blog.index.ssr);
  7. };

Webpack 构建配置

添加 ${root}/webpack.config.js 新增页面 entry 配置

  1. module.exports = {
  2.   entry: {
  3.     blog: 'app/web/page/blog/index.jsx'
  4.   },
  5. }

相关辅助代码

  • ${root}/app/web/framework/request.js
  1. 'use strict';
  2. import axios from 'axios';
  3. // axios.defaults.baseURL = 'http://127.0.0.1:7001';
  4. axios.defaults.timeout = 15000;
  5. axios.defaults.xsrfHeaderName = 'x-csrf-token';
  6. axios.defaults.xsrfCookieName = 'csrfToken';
  7. export default {
  8.   async post(url, json, locals = {}) {
  9.     const headers = {};
  10.     if (EASY_ENV_IS_NODE) {
  11.       headers['x-csrf-token'] = locals.csrf;
  12.       headers.Cookie = `csrfToken=${locals.csrf}`;
  13.     }
  14.     const res = await axios.post(`${locals.origin}${url}`, json, { headers });
  15.     return res.data;
  16.   },
  17.   async get(url, locals = {}) {
  18.     const res = await axios.get(`${locals.origin}${url}`);
  19.     return res.data;
  20.   }
  21. };
  • ${root}/app/web/component/layout/index.jsx
  1. import React, { Component } from 'react';
  2. export default class Layout extends Component {
  4.   render() {
  5.     if(EASY_ENV_IS_NODE) {
  6.       return <html>
  7.         <head>
  8.           <title>{this.props.title}</title>
  9.           <meta charSet="utf-8"></meta>
  10.           <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"></meta>
  11.           <meta name="keywords" content={this.props.keywords}></meta>
  12.           <meta name="description" content={this.props.description}></meta>
  13.           <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"></link>
  14.         </head>
  15.         <body><div id="app">{this.props.children}</div></body>
  16.       </html>;
  17.     }
  18.     return this.props.children;
  19.   }
  20. }
  • Egg 中间件设置公共 locals, 该 locals 会自动与 Egg 的 render 的第二个参数合并传递给 JSX 模板
  1. // ${root}/app/middleware/locals.js
  3. module.exports = () => {
  4.   return async function locale(ctx, next) {
  5.     ctx.locals.locale = ctx.query.locale || 'cn';
  6.     ctx.locals.origin = ctx.request.origin;
  7.     await next();
  8.   };
  9. };
  11. // Egg 启用 Middleware locals
  12. const path = require('path');
  13. const fs = require('fs');
  14. module.exports = app => {
  15.   const exports = {};
  17.   exports.middleware = [
  18.     'locals'  
  19.   ];
  21.   return exports;
  22. };

项目代码结构

代码见：https://github.com/easy-team/egg-react-webpack-boilerplate.git

egg-react-spa.png