<commit_before># Backbone.React.Component

Backbone.React.Component is a wrapper for React.Component and brings all the power of Facebook's React to Backbone.js.

## Dependencies
* [Backbone](http://backbonejs.org/) ([jQuery](http://jquery.com/)/[Underscore](http://underscorejs.org/))
* [React](http://facebook.github.io/react/)

## How To
### Downloading and including the script
Using [Bower](http://bower.io/)
```shell
bower install backbone-react-component
```
If you're not using [Bower](http://bower.io/) download the source from the dist folder.

Include the script on your webpage (or use [RequireJS](http://requirejs.org/)/[Browserify](http://browserify.org/))
```html
...
<script type="text/javascript" src="path_to_script/backbone-react-component-min.js"></script>
...
```

### Using Backbone.React.Component
It follows all the principles behind [React.Component](http://facebook.github.io/react/docs/component-api.html), though it binds models to the component's props and also automatically
mounts the component into the component's $el.
```js
/** @jsx React.DOM */
var MyComponent = Backbone.React.Component.extend({
  render: function () {
    return <div>{this.props.test}</div>;
  }
});
var model = new Backbone.Model();
var newComponent = new MyComponent({
  el: $("body"),
  model: model
});
model.set("test", "Hello world!");
```
The Component will listen to any model changes, making it automatically refresh (and mount if needed) using React's virtual DOM capabilities.

If you are not relying on models or simply want to mount the component into the DOM just call:
```js
newComponent.renderComponent();
```

### API
Besides inheriting all the methods from [React.Component](http://facebook.github.io/react/docs/component-api.html) and [Backbone.Events](http://backbonejs.org/#Events) you can find the following methods:

#### new Backbone.React.Component(options)
options is a hash and may contain el and model properties. Any other property gets stored inside this.options.

#### getOwner()
Gets the component owner (greatest parent component).

#### getModel()
Gets the model from the component's owner.

#### mount([el = this.el], [onRender])
* el (DOMElement)
* onRender (Callback)
Mounts the component into the DOM and sets it has rendered (this.isRendered = true).

#### unmount()
Unmounts the component.

#### remove()
Stops component listeners, unmounts the component and then removes the DOM element.

### TO DO
* Any ideas?<commit_msg>added to do<commit_after># Backbone.React.Component

Backbone.React.Component is a wrapper for React.Component and brings all the power of Facebook's React to Backbone.js.

## Dependencies
* [Backbone](http://backbonejs.org/) ([jQuery](http://jquery.com/)/[Underscore](http://underscorejs.org/))
* [React](http://facebook.github.io/react/)

## How To
### Downloading and including the script
Using [Bower](http://bower.io/)
```shell
bower install backbone-react-component
```
If you're not using [Bower](http://bower.io/) download the source from the dist folder.

Include the script on your webpage (or use [RequireJS](http://requirejs.org/)/[Browserify](http://browserify.org/))
```html
...
<script type="text/javascript" src="path_to_script/backbone-react-component-min.js"></script>
...
```

### Using Backbone.React.Component
It follows all the principles behind [React.Component](http://facebook.github.io/react/docs/component-api.html), though it binds models to the component's props and also automatically
mounts the component into the component's $el.
```js
/** @jsx React.DOM */
var MyComponent = Backbone.React.Component.extend({
  render: function () {
    return <div>{this.props.test}</div>;
  }
});
var model = new Backbone.Model();
var newComponent = new MyComponent({
  el: $("body"),
  model: model
});
model.set("test", "Hello world!");
```
The Component will listen to any model changes, making it automatically refresh (and mount if needed) using React's virtual DOM capabilities.

If you are not relying on models or simply want to mount the component into the DOM just call:
```js
newComponent.renderComponent();
```

### API
Besides inheriting all the methods from [React.Component](http://facebook.github.io/react/docs/component-api.html) and [Backbone.Events](http://backbonejs.org/#Events) you can find the following methods:

#### new Backbone.React.Component(options)
options is a hash and may contain el and model properties. Any other property gets stored inside this.options.

#### getOwner()
Gets the component owner (greatest parent component).

#### getModel()
Gets the model from the component's owner.

#### mount([el = this.el], [onRender])
* el (DOMElement)
* onRender (Callback)
Mounts the component into the DOM and sets it has rendered (this.isRendered = true).

#### unmount()
Unmounts the component.

#### remove()
Stops component listeners, unmounts the component and then removes the DOM element.

### TO DO
* Any ideas?
* Allow to pass a root collection to a component (it only works with models for the time being)
{'fraction_non_alphanumeric': 0.13930842607313196, 'fraction_numerical': 0.0, 'mean_word_length': 4.852325581395349, 'pattern_counts': {'":': 0, '<': 11, '<?xml version=': 0, '>': 11, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 6, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7069696', 'n_tokens_mistral': 1463, 'n_tokens_neox': 1426, 'n_words': 513}