You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
39 lines
1.1 KiB
39 lines
1.1 KiB
10 years ago
|
---
|
||
|
|
id: use-react-with-other-libraries
|
||
|
|
title: Use React with Other Libraries
|
||
|
|
layout: tips
|
||
|
|
permalink: use-react-with-other-libraries.html
|
||
|
|
prev: children-undefined.html
|
||
|
|
---
|
||
|
|
|
||
|
|
You don't have to go full React. The component [lifecycle events](/react/docs/component-specs.html#lifecycle-methods), especially `componentDidMount` and `componentDidUpdate`, are good places to put your other libraries' logic.
|
||
|
|
|
||
|
|
```js
|
||
|
|
var App = React.createClass({
|
||
|
|
getInitialState: function() {
|
||
|
|
return {myModel: new myBackboneModel({items: [1, 2, 3]})};
|
||
|
|
},
|
||
|
|
|
||
|
|
componentDidMount: function() {
|
||
|
|
$(this.refs.placeholder.getDOMNode()).append($('<span />'));
|
||
|
|
},
|
||
|
|
|
||
|
|
componentWillUnmount: function() {
|
||
|
|
// Clean up work here.
|
||
|
|
},
|
||
|
|
|
||
|
|
shouldComponentUpdate: function() {
|
||
|
|
// Let's just never update this component again.
|
||
|
|
return false;
|
||
|
|
},
|
||
|
|
|
||
|
|
render: function() {
|
||
|
|
return <div ref="placeholder"/>;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
React.render(<App />, mountNode);
|
||
|
|
```
|
||
|
|
|
||
|
|
You can attach your own [event listeners](/react/tips/dom-event-listeners.html) and even [event streams](https://baconjs.github.io) this way.
|