[Docs] Tip on integration with other libraries
Chose this title because it's more eye-catchy than "third-party integration".
Cheng Lou committed
Jan 1, 2015 at 16:09 UTC
d0f2e7db5f63ad38792b518fe13eb48d3f08e6a1
3 files changed
+41
docs/_data/nav_tips.yml
+2
@@ -34,3 +34,5 @@
34
title: References to Components
35
- id: children-undefined
36
title: this.props.children undefined
37
+ - id: use-react-with-other-libraries
38
+ title: Use React with Other Libraries
docs/tips/17-children-undefined.md
+1
@@ -4,6 +4,7 @@ title: this.props.children undefined
4
layout: tips
5
permalink: children-undefined.html
6
prev: references-to-components.html
7
+next: use-react-with-other-libraries.html
8
---
9
10
You can't access the children of your component through `this.props.children`. `this.props.children` designates the children being **passed onto you** by the owner:
docs/tips/18-use-react-with-other-libraries.md
new
+38
@@ -0,0 +1,38 @@
1
+---
2
+id: use-react-with-other-libraries
3
+title: Use React with Other Libraries
4
+layout: tips
5
+permalink: use-react-with-other-libraries.html
6
+prev: children-undefined.html
7
+---
8
+
9
+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.
10
+
11
+```js
12
+var App = React.createClass({
13
+ getInitialState: function() {
14
+ return {myModel: new myBackboneModel({items: [1, 2, 3]})};
15
+ },
16
+
17
+ componentDidMount: function() {
18
+ $(this.refs.placeholder.getDOMNode()).append($('<span />'));
19
+ },
20
+
21
+ componentWillUnmount: function() {
22
+ // Clean up work here.
23
+ },
24
+
25
+ shouldComponentUpdate: function() {
26
+ // Let's just never update this component again.
27
+ return false;
28
+ },
29
+
30
+ render: function() {
31
+ return <div ref="placeholder"/>;
32
+ }
33
+});
34
+
35
+React.render(<App />, mountNode);
36
+```
37
+
38
+You can attach your own [event listeners](/react/tips/dom-event-listeners.html) and even [event streams](https://baconjs.github.io) this way.