<commit_before>﻿# NornJ-React
React bindings for template engine NornJ

### 安装

使用npm安装:

```sh
npm install nornj-react
```

### 使用registerTmpl为React组件注册模板

`registerTmpl`采用es7装饰器的形式，可以使NornJ用更简洁的语法配合React使用。

```js
import { Component } from 'react';
import { registerTmpl } from 'nornj-react';
import styled from 'styled-components';

@registerTmpl({
  name: 'TestComponent',  //可传入组件名，相当于调用了nj.registerComponent注册组件，可选参数
  components: {           //可传入局部组件，如本例配合styled-components组件使用
    Container: styled.div `
      background-color: #fff;
    `
  },
  template: `             <!--可传入模板，普通字符串和带nj标签的es6模板字符串都可以，可选参数-->
    <Container id=test1>
      this the test demo{no}.
      <i>test{no}</i>
    </Container>
  `,
  cache: false            //可指定是否开启缓存，缓存key为name参数
})
class TestComponent extends Component {
  render() {
    return this.template({ no: 1 });  //使用this.template方法渲染模板，该方法为标准的nj模板函数
  }
}
```

另外，`registerTmpl`装饰器也可以这样更简化地传参数：

```js
@registerTmpl(/*参数依次为：组件名、模板、是否开启缓存、局部组件*/
  'TestComponent', '<div id=test1>...</div>'
})
```

### License

MIT<commit_msg>Updated docs<commit_after>﻿# NornJ-React
React bindings for template engine NornJ

[![NPM Version][npm-image]][npm-url]
[![NPM Downloads][downloads-image]][npm-url]

### 安装

使用npm安装:

```sh
npm install nornj-react
```

### 使用registerTmpl为React组件注册模板

`registerTmpl`采用es7装饰器的形式，可以使NornJ用更简洁的语法配合React使用。

```js
import { Component } from 'react';
import { registerTmpl } from 'nornj-react';
import styled from 'styled-components';

@registerTmpl({
  name: 'TestComponent',  //可传入组件名，相当于调用了nj.registerComponent注册组件，可选参数
  components: {           //可传入局部组件，如本例配合styled-components组件使用
    Container: styled.div `
      background-color: #fff;
    `
  },
  template: `             <!--可传入模板，普通字符串和带nj标签的es6模板字符串都可以，可选参数-->
    <Container id=test1>
      this the test demo{no}.
      <i>test{no}</i>
    </Container>
  `,
  cache: false            //可指定是否开启缓存，缓存key为name参数
})
class TestComponent extends Component {
  render() {
    return this.template({ no: 1 });  //使用this.template方法渲染模板，该方法为标准的nj模板函数
  }
}
```

另外，`registerTmpl`装饰器也可以这样更简化地传参数：

```js
@registerTmpl(/*参数依次为：组件名、模板、是否开启缓存、局部组件*/
  'TestComponent', '<div id=test1>...</div>'
})
```

### License

MIT

[npm-image]: http://img.shields.io/npm/v/nornj-react.svg
[downloads-image]: http://img.shields.io/npm/dm/nornj-react.svg
[npm-url]: https://www.npmjs.org/package/nornj-react
{'fraction_non_alphanumeric': 0.16122364613476645, 'fraction_numerical': 0.00413393964448119, 'mean_word_length': 3.879032258064516, 'pattern_counts': {'":': 0, '<': 17, '<?xml version=': 0, '>': 17, 'https://': 1, 'lorem ipsum': 0, 'www.': 1, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 3, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7402447', 'n_tokens_mistral': 1140, 'n_tokens_neox': 1173, 'n_words': 150}