├── .babelrc
├── .eslintrc.js
├── .gitignore
├── README.md
├── build
├── config.js
├── utils.js
├── webpack.base.config.js
├── webpack.dev.config.js
├── webpack.local.config.js
├── webpack.production.config.js
└── webpack.test.config.js
├── dist
├── index.html
├── index.js
└── js
│ └── sw.js
├── log
├── error
│ └── index.log.-2019-02-27.log
└── request
│ └── index.log.-2019-02-27.log
├── logs
├── date
│ └── index.log.-2019-02-27.log
└── render
│ └── index.log.-2019-02-27.log
├── nohup.log
├── package.json
├── postcss.config.js
├── server
├── api
│ ├── base.js
│ └── demo.js
├── app.js
├── config
│ └── index.js
├── const
│ └── index.js
├── controllers
│ ├── api
│ │ └── demo.js
│ └── demo.js
├── dist
│ └── views
│ │ └── index.html
├── index.js
├── log
│ └── logger.js
├── middlewares
│ ├── catchError.js
│ └── timeLogger.js
├── nohup.log
├── routes
│ ├── api
│ │ └── demo.js
│ ├── demo.js
│ └── index.js
├── templating.js
└── utils
│ └── time.js
└── src
├── api
├── base.js
└── demo.js
├── app.js
├── assets
└── scss
│ ├── base.scss
│ ├── base
│ ├── normalize.scss
│ └── variables.scss
│ ├── common.scss
│ ├── components
│ └── movie.scss
│ └── pages
│ ├── detail.scss
│ └── home.scss
├── common
└── index.js
├── components
├── index.js
└── movie
│ └── Index.jsx
├── containers
├── detail.js
├── devTool.js
└── home.js
├── index.html
├── layout
└── Index.jsx
├── pages
├── column
│ └── Index.jsx
├── detail
│ └── Index.jsx
└── home
│ └── Index.jsx
├── redux
├── actions
│ ├── detail.js
│ └── home.js
├── constants
│ ├── detail.js
│ └── home.js
├── middlewares
│ └── promiseMiddleware.js
├── reducers
│ ├── detail.js
│ ├── home.js
│ └── index.js
└── store
│ └── createStore.js
└── root
└── route.js
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [
3 | ["@babel/preset-env", {
4 | "modules": false,
5 | "targets": {
6 | "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
7 | },
8 | "useBuiltIns": "usage"
9 | }],
10 | "@babel/preset-react"
11 | ],
12 | "plugins": [
13 |
14 | ]
15 | }
16 |
--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
1 | // http://eslint.org/docs/user-guide/configuring
2 |
3 | module.exports = {
4 | root: true,
5 | parser: 'babel-eslint',
6 | parserOptions: {
7 | sourceType: 'module'
8 | },
9 | env: {
10 | browser: true,
11 | jquery: true
12 | },
13 | // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
14 | extends: 'standard',
15 | // required to lint *.vue files
16 | plugins: [
17 | 'html',
18 | 'react'
19 | ],
20 | globals: {
21 | API_ORIGIN: false,
22 | ROUTER_MODE: false,
23 | },
24 | // add your custom rules here
25 | 'rules': {
26 | 'indent': ['warn', 4, { SwitchCase: 1 }],
27 | 'semi': ['warn', 'always'],
28 | 'camelcase': 0,
29 | 'comma-dangle': ['error', {
30 | 'arrays': 'only-multiline',
31 | 'objects': 'only-multiline',
32 | 'imports': 'only-multiline',
33 | 'exports': 'only-multiline',
34 | 'functions': 'ignore',
35 | }],
36 | 'no-unused-vars': ['warn'],
37 | 'no-undef': 2,
38 | 'arrow-parens': 0,
39 | // allow async-await
40 | // 'generator-star-spacing': 0,
41 | // allow debugger during development
42 | 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
43 | 'no-callback-literal': 0,
44 | 'no-new': 0,
45 | "eol-last": 0,
46 | "react/jsx-uses-react": "error",
47 | "react/jsx-uses-vars": "error"
48 | }
49 | };
50 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .vscode/
2 | .idea/
3 | node_modules/
4 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
React SSR
3 | Delightful React Server-Side Rendering
4 |
5 |
6 | # 线上DEMO演示
7 | 基于这个demo扩展的做了个人博客。可以参考下
8 | http://www.shuxia123.com/
9 |
10 | # React SSR
11 | 这是基于`React`、`React-Router`、`Redux`、`Koa2.0`实现的React服务端渲染方案。为了更好的演示，已实现一个简单的电影首页、电影详情页。
12 | 数据资源是豆瓣上的资源。样式也参考了豆瓣的样式
13 |
14 | # 快速上手
15 | ```
16 | // 安装依赖
17 | npm install
18 |
19 | // 为了构建一个模板(dist/index.html)给koa模板引擎使用
20 | npm run build:local
21 |
22 | // 启动本地node服务器，这里设置的端口是4322
23 | npm run server:dev
24 |
25 | // 启动前端服务，这里的服务端口号是8088
26 | npm start
27 |
28 | // 访问 http://localhost:4322进行开发
29 | ```
30 |
31 | # 功能预览
32 | 目前已实现首页、详情页的交互和相关接口
33 | ```
34 | 首页：(直接访问时，会走服务端渲染出首页dom，浏览器右键可以查看源码)
35 | http://localhost:4322
36 |
37 | 详情页：(直接访问时，会走服务端渲染出详情页dom，浏览器右键可以查看源码)
38 | http://localhost:4322/detail/30163509
39 |
40 | api接口：
41 | http://localhost:4322/api/home
42 | http://localhost:4322/api/movie/30163509
43 |
44 | ```
45 |
46 | # 实现原理
47 |
48 |
49 |
50 |
85 |
86 |
91 |
92 |
19 |
{ props.title }
20 |
{ props.score } 分
21 |
17 |
18 |
19 |
20 |
21 |
22 | );
23 | }
24 | }
25 |
26 | export default Index;
27 |
--------------------------------------------------------------------------------
/src/pages/column/Index.jsx:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import propTypes from 'prop-types';
3 | import className from 'classnames';
4 | import { NavLink } from 'react-router-dom';
5 |
6 | class Index extends Component {
7 | constructor(props) {
8 | super(props);
9 | this.state = {};
10 | }
11 |
12 | render() {
13 | return (
14 |
15 |
16 | ![]()
17 |
18 |
21 |
24 |
51 |
{ movie.title }
52 |
53 |
54 |
55 |
57 |
58 | { movie.score }
59 |
60 |
61 | { movie.meta }
62 |
63 |
65 |
66 |
68 |
70 |
71 |
72 | { movie.desc }
73 |
74 |
75 |
76 |
35 |
36 | 
37 |
38 |
39 |
40 |
41 | 影院首页
42 |
43 |
44 |
45 | 精彩栏目
46 |
47 |
48 |
49 | 精彩发现
50 |
51 |
52 |
53 | 我关心的
54 |
55 |
56 |
57 | 影院热映
58 |
59 | {
60 | movies.map((movie) => {
61 | return ()
62 | })
63 | }
64 |
65 |
66 |