# think-react-page
> use react build page with thinkjs
Latest version **0.1.5** (published 2017-05-04) · MIT license · 0 weekly downloads
## Install
```sh
npm install think-react-page
pnpm add think-react-page
yarn add think-react-page
bun add think-react-page
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.1.5 |
| Published | 2017-05-04 |
| First published | 2016-04-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 10 |
| Author | snadn |
| Maintainers | snadn |
| Keywords | thinkjs, react, webpage, isomorphism |
## Links
- npm: https://www.npmjs.com/package/think-react-page
- Repository: https://github.com/snadn/think-react-page
- Homepage: https://github.com/snadn/think-react-page#readme
- Issues: https://github.com/snadn/think-react-page/issues
- npm.io page: https://npm.io/package/think-react-page
## Dependencies (1)
- [babel-runtime](https://npm.io/package/babel-runtime.md) ^6.6.1
## Alternatives
- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads
## Recent versions
- 0.1.5 (latest) — 2017-05-04
- 0.1.4 — 2016-04-21
- 0.1.3 — 2016-04-21
- 0.1.2 — 2016-04-21
## README
# think-react-page
thinkjs 插件，在 thinkjs 中使用 react 来构建同构的 webpage
## 安装
`npm install think-react-page --save`
## 使用
1. 编辑 src/common/bootstrap/plugins.js （如果没有则创建），引入插件
```javascript
import reactPlugin from 'think-react-page';
reactPlugin.init();
```
2. 在 view 目录下创建 base.html 模板文件，例如
```html
DEMO
{{html}}
```
3. 在 view/home 中创建相应的视图文件，例如 IndexIndexPage.js
- 命名规则 \[Controller\]\[Action\]Page.js 首字母大写
- 在视图中导出命名为 Page 的 Component，例如
```jsx
import React, {Component} from 'react'
export class Page extends Component {
render() {
return 'React Demo';
}
}
```
4. 在 www/static/js/index 中创建浏览器端执行脚本 index.jsx，例如
```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import provideContext from 'think-react-page/lib/provideContext';
import {Page} from 'HomePage/IndexIndexPage'; // HomePage 为 webpack 中定义的别名，即 /view/home
const ContextProvider = provideContext(G.context)(Page);
ReactDOM.render(, document.getElementById('react-wraper'));
```
然后使用 webpack 编译 index.jsx => index.js
5. 在 controller 中 assign('pageScript', '/static/js/index/index.js')，
或者在 view 的配置中指定 getPageScript 方法来返回页面对应的浏览器端脚本路径
## 潜规则
1. 在 node 端，渲染 Page 时会在 props 中传入 location ，会设置 context。
- location 为 url.parse(http.req.url) 的结果
- context 中为 controller 中 assgin 传入的参数 （ context 的使用参见：https://facebook.github.io/react/docs/context.html ）
2. 处理 base.html 模板时
- 使用 Page 渲染成的字符串替换 {{html}}
- 将全局变量 G JSON.stringify 后，替换 {{GStr}}
- 使用浏览器端脚本路径替换 {{pageScript}}
## 配置
```javascript
import path from 'path'
// 自定义的映射表，用于静态资源构建后名称改变的情况
try {
var map = require(path.join(think.ROOT_PATH, './page_map.json'));
} catch(e){
var map = { res: {} };
}
// 我的项目中获取浏览器端脚本url的规则，根据项目情况自定义
function getPageScript(templateFile, options) {
let dirname = path.dirname(templateFile).split(options.root_path)[1];
let basename = path.basename(templateFile).replace(/^[A-Z]/, function(w){
return w.toLowerCase();
}).replace(/[A-Z]/, function(w){
return '/'+w.toLowerCase();
});
let pageName = dirname + '/' + basename;
let pagePath = "/static/js/" + pageName;
if (map.res['webpack/' + pageName]) {
pagePath = map.res['webpack/' + pageName].uri
}
return pagePath;
}
export default {
type: 'react',
content_type: 'text/html',
file_ext: 'Page.js',
file_depr: '_',
root_path: path.join(think.ROOT_PATH, 'view/'),
adapter: {
react: {
getPageScript, // 浏览器端脚本url的获取方法
globalVarName: 'DEMO', // 要使用的全局变量的名称，默认为 G
server_render: true // 是否开启服务端渲染
}
}
};
```
---
_Source: https://npm.io/package/think-react-page · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._