<commit_before># 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
	<!doctype html>
	<html>
		<head>
			<title>DEMO</title>
		</head>
		<body>
			<div id="react-wraper">{{html}}</div>
			<script src="/static/js/lib/react.js"></script>
			<script src="/static/js/lib/react-dom.js"></script>
			<script>
				window.G = {{GStr}};
			</script>
			<script src="{{pageScript}}"></script>
	</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(<ContextProvider location={location} />, document.getElementById('react-wraper'));
	```

	然后使用 webpack 编译 index.jsx => index.js

5. 在 controller 中 assign('pageScript', '/static/js/index/index.js')，
	或者在 view 的配置中指定 getPageScript 方法来返回页面对应的浏览器端脚本路径

## 潜规则

1. 在 node 端，渲染 Page 时会传入 location 和 context 两个 props。

	- location 为 url.parse(http.req.url) 的结果
	- context 中为 controller 中 assgin 传入的参数

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){<commit_msg>更新 readme<commit_after># 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
	<!doctype html>
	<html>
		<head>
			<title>DEMO</title>
		</head>
		<body>
			<div id="react-wraper">{{html}}</div>
			<script src="/static/js/lib/react.js"></script>
			<script src="/static/js/lib/react-dom.js"></script>
			<script>
				window.G = {{GStr}};
			</script>
			<script src="{{pageScript}}"></script>
	</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(<ContextProvider location={location} />, 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){
{'fraction_non_alphanumeric': 0.1574074074074074, 'fraction_numerical': 0.0035035035035035035, 'mean_word_length': 3.9103194103194103, 'pattern_counts': {'":': 0, '<': 41, '<?xml version=': 0, '>': 43, 'https://': 1, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2418700', 'n_tokens_mistral': 1865, 'n_tokens_neox': 1885, 'n_words': 358}