diff --git a/_data/nav_tips.yml b/_data/nav_tips.yml index 8299f6ea..992ba496 100644 --- a/_data/nav_tips.yml +++ b/_data/nav_tips.yml @@ -34,3 +34,5 @@ title: References to Components - id: children-undefined title: this.props.children undefined + - id: use-react-with-other-libraries + title: Use React with Other Libraries diff --git a/tips/17-children-undefined.md b/tips/17-children-undefined.md index 0be65a26..cfbc656d 100644 --- a/tips/17-children-undefined.md +++ b/tips/17-children-undefined.md @@ -4,6 +4,7 @@ title: this.props.children undefined layout: tips permalink: children-undefined.html prev: references-to-components.html +next: use-react-with-other-libraries.html --- 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: diff --git a/tips/18-use-react-with-other-libraries.md b/tips/18-use-react-with-other-libraries.md new file mode 100644 index 00000000..43299deb --- /dev/null +++ b/tips/18-use-react-with-other-libraries.md @@ -0,0 +1,38 @@ +--- +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($('')); + }, + + componentWillUnmount: function() { + // Clean up work here. + }, + + shouldComponentUpdate: function() { + // Let's just never update this component again. + return false; + }, + + render: function() { + return
; + } +}); + +React.render(, mountNode); +``` + +You can attach your own [event listeners](/react/tips/dom-event-listeners.html) and even [event streams](https://baconjs.github.io) this way.