@samitouri / QOS-React-2 / commits / 48f1ee4940

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.

Cheng Lou committed Oct 6, 2013 at 19:56 UTC 48f1ee4940cb427aa67efcd789558cb4b5148902
3 files changed +81 -37
docs/cookbook/cb-11-dom-event-listeners tip.md new
+38
@@ -0,0 +1,38 @@
1 +---
2 +id: dom-event-listeners-tip
3 +title: DOM event listeners in a component
4 +layout: docs
5 +permalink: dom-event-listeners-tip.html
6 +---
7 +
8 +> Note:
9 +>
10 +> 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.
11 +
12 +This example displays the window width:
13 +
14 +```js
15 +/** @jsx React.DOM */
16 +
17 +var Box = React.createClass({
18 + getInitialState: function() {
19 + return {windowWidth: window.innerWidth};
20 + },
21 + handleResize: function(e) {
22 + this.setState({windowWidth: window.innerWidth});
23 + },
24 + componentDidMount: function() {
25 + window.addEventListener("resize", this.handleResize);
26 + },
27 + componentWillUnmount: function() {
28 + window.removeEventListener("resize", this.handleResize);
29 + },
30 + render: function() {
31 + return <div>Current window width: {this.state.windowWidth}</div>;
32 + }
33 +});
34 +
35 +React.renderComponent(<Box />, mountNode);
36 +```
37 +
38 +`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.
docs/cookbook/cb-11-dom-event-listeners.md new
+43
@@ -0,0 +1,43 @@
1 +---
2 +id: dom-event-listeners
3 +title: DOM event listeners in a component
4 +layout: docs
5 +permalink: dom-event-listeners.html
6 +---
7 +
8 +### Problem
9 +You want to listen to an event inside a component.
10 +
11 +### Solution
12 +> Note:
13 +>
14 +> 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.
15 +
16 +This example displays the window width:
17 +
18 +```js
19 +/** @jsx React.DOM */
20 +
21 +var Box = React.createClass({
22 + getInitialState: function() {
23 + return {windowWidth: window.innerWidth};
24 + },
25 + handleResize: function(e) {
26 + this.setState({windowWidth: window.innerWidth});
27 + },
28 + componentDidMount: function() {
29 + window.addEventListener("resize", this.handleResize);
30 + },
31 + componentWillUnmount: function() {
32 + window.removeEventListener("resize", this.handleResize);
33 + },
34 + render: function() {
35 + return <div>Current window width: {this.state.windowWidth}</div>;
36 + }
37 +});
38 +
39 +React.renderComponent(<Box />, mountNode);
40 +```
41 +
42 +### Discussion
43 +`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.
docs/cookbook/cb-11-event-listeners.md deleted
-37
@@ -1,37 +0,0 @@
1 ----
2 -id: event-listeners
3 -title: event listening in a React component
4 -layout: docs
5 -permalink: event-listeners.html
6 ----
7 -
8 -### Problem
9 -You want to listen to an event inside a React component.
10 -
11 -### Solution
12 -You can listen in componentDidMount. The below example will display the window dimensions.
13 -
14 -```js
15 -var WindowDimensions = React.createClass({
16 - render: function() {
17 - return <span>{this.state.width} x {this.state.height}</span>;
18 - },
19 - updateDimensions: function() {
20 - this.setState({width: $(window).width(), height: $(window).height()});
21 - },
22 - componentWillMount: function() {
23 - this.updateDimensions();
24 - },
25 - componentDidMount: function() {
26 - window.addEventListener("resize", this.updateDimensions);
27 - // Using jQuery $(window).on('resize', this.updateDimensions);
28 - },
29 - componentWillUnmount: function() {
30 - window.removeEventListener("resize", this.updateDimensions);
31 - // Using jQuery $(window).off('resize', this.updateDimensions);
32 - }
33 -});
34 -```
35 -
36 -### Discussion
37 -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.
\ No newline at end of file