change some wording, add tip for events entry

- No need to mention React, you know you're working with it =).
- Wrap code elements in back ticks, so that they get the "box" styling for md.
- You'd want the snippet to work inside the live editor, so you need to `renderComponent`. As per wiki specification, the DOM element on which to mount is `mountNode`, just like on the front page.
- Don't forget the JSX pragma, or else your `render` fails.
- Nitpick: empty line after the end of md.
- No need for jQuery reference since
  1. The general mood around React is that you don't need jQuery.
  2. The syntax' still clear without jQuery.
  3. We're doing a jQuery integration entry =).
- `getInitialState` was absent.
- You don't need `componentWillMount` here. fetch them in `getInitialState`.
- The non-spoken convention seems to call the event handler `"handle" + eventName`. So `handleResize` clearly indicates it's a `resize` handler while `updateDimensions` might do something else. This latter name might actually be better under circumstances where you use call the method directly somewhere, but since we removed the only direct usage in `componentWillMount` this is fine.
- Went OCD again and tried to keep the code short. `width` is enough of a demo. Removed `height`.
- Distinguish between DOM events and React events. Wish we go full React events in a near future.

cookbook/cb-11-dom-event-listeners tip.md

@@ -0,0 +1,38 @@
+---
+id: dom-event-listeners-tip
+title: DOM event listeners in a component
+layout: docs
+permalink: dom-event-listeners-tip.html
+---
+
+> Note:
+>
+> This entry shows how to attach DOM events not provided by React ([check here for more info](events.html)). This is good for integrations with other libraries such as jQuery.
+
+This example displays the window width:
+
+```js
+/** @jsx React.DOM */
+
+var Box = React.createClass({
+  getInitialState: function() {
+    return {windowWidth: window.innerWidth};
+  },
+  handleResize: function(e) {
+    this.setState({windowWidth: window.innerWidth});
+  },
+  componentDidMount: function() {
+    window.addEventListener("resize", this.handleResize);
+  },
+  componentWillUnmount: function() {
+    window.removeEventListener("resize", this.handleResize);
+  },
+  render: function() {
+    return <div>Current window width: {this.state.windowWidth}</div>;
+  }
+});
+
+React.renderComponent(<Box />, mountNode);
+```
+
+`componentDidMount` is called after the component's mounted and has a DOM representation. This is often a place where you'd attach generic DOM events.

cookbook/cb-11-dom-event-listeners.md

@@ -0,0 +1,43 @@
+---
+id: dom-event-listeners
+title: DOM event listeners in a component
+layout: docs
+permalink: dom-event-listeners.html
+---
+
+### Problem
+You want to listen to an event inside a component.
+
+### Solution
+> Note:
+>
+> This entry shows how to attach DOM events not provided by React ([check here for more info](events.html)). This is good for integrations with other libraries such as jQuery.
+
+This example displays the window width:
+
+```js
+/** @jsx React.DOM */
+
+var Box = React.createClass({
+  getInitialState: function() {
+    return {windowWidth: window.innerWidth};
+  },
+  handleResize: function(e) {
+    this.setState({windowWidth: window.innerWidth});
+  },
+  componentDidMount: function() {
+    window.addEventListener("resize", this.handleResize);
+  },
+  componentWillUnmount: function() {
+    window.removeEventListener("resize", this.handleResize);
+  },
+  render: function() {
+    return <div>Current window width: {this.state.windowWidth}</div>;
+  }
+});
+
+React.renderComponent(<Box />, mountNode);
+```
+
+### Discussion
+`componentDidMount` is called after the component's mounted and has a DOM representation. This is often a place where you'd attach generic DOM events.

cookbook/cb-11-event-listeners.md

@@ -1,37 +0,0 @@
----
-id: event-listeners
-title: event listening in a React component
-layout: docs
-permalink: event-listeners.html
----
-
-### Problem
-You want to listen to an event inside a React component.
-
-### Solution
-You can listen in componentDidMount. The below example will display the window dimensions.
-
-```js
-var WindowDimensions = React.createClass({
-  render: function() {
-    return <span>{this.state.width} x {this.state.height}</span>;
-  },
-  updateDimensions: function() {
-    this.setState({width: $(window).width(), height: $(window).height()});
-  },
-  componentWillMount: function() {
-    this.updateDimensions();
-  },
-  componentDidMount: function() {
-    window.addEventListener("resize", this.updateDimensions);
-    // Using jQuery $(window).on('resize', this.updateDimensions);
-  },
-  componentWillUnmount: function() {
-    window.removeEventListener("resize", this.updateDimensions);
-    // Using jQuery $(window).off('resize', this.updateDimensions);
-  }
-});
-```
-
-### Discussion
-componentDidMount is invoked when the component has been mounted and has a DOM representation. Use this as an opportunity to operate on the DOM when the component has been initialized and rendered for the first time.