From 4d7900a48a73ef3ffa2e00b401d757530e9e45d9 Mon Sep 17 00:00:00 2001 From: Cheng Lou Date: Sun, 6 Oct 2013 19:56:36 -0400 Subject: [PATCH] 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 | 38 ++++++++++++++++++++ cookbook/cb-11-dom-event-listeners.md | 43 +++++++++++++++++++++++ cookbook/cb-11-event-listeners.md | 37 ------------------- 3 files changed, 81 insertions(+), 37 deletions(-) create mode 100644 cookbook/cb-11-dom-event-listeners tip.md create mode 100644 cookbook/cb-11-dom-event-listeners.md delete mode 100644 cookbook/cb-11-event-listeners.md diff --git a/cookbook/cb-11-dom-event-listeners tip.md b/cookbook/cb-11-dom-event-listeners tip.md new file mode 100644 index 00000000..b609a7f8 --- /dev/null +++ b/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
Current window width: {this.state.windowWidth}
; + } +}); + +React.renderComponent(, 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. diff --git a/cookbook/cb-11-dom-event-listeners.md b/cookbook/cb-11-dom-event-listeners.md new file mode 100644 index 00000000..6ca378dc --- /dev/null +++ b/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
Current window width: {this.state.windowWidth}
; + } +}); + +React.renderComponent(, 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. diff --git a/cookbook/cb-11-event-listeners.md b/cookbook/cb-11-event-listeners.md deleted file mode 100644 index 7b206a86..00000000 --- a/cookbook/cb-11-event-listeners.md +++ /dev/null @@ -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 {this.state.width} x {this.state.height}; - }, - 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. \ No newline at end of file