adding new demos

README.md

@@ -94,7 +94,7 @@ React.render(
 
 ## this.props.children
 
-we use `this.props.children` to access a component's children.
+React uses `this.props.children` to access a component's children.
 
 ```js
 var NotesList = React.createClass({
@@ -120,6 +120,166 @@ React.render(
 );
 ```
 
+## Finding a DOM node
+
+React uses React.findDOMNode() to find a DOM node.
+
+```js
+var MyComponent = React.createClass({
+  handleClick: function() {
+    React.findDOMNode(this.refs.myTextInput).focus();
+  },
+  render: function() {
+    return (
+      <div>
+        <input type="text" ref="myTextInput" />
+        <input type="button" value="Focus the text input" onClick={this.handleClick} />
+      </div>
+    );
+  }
+});
+
+React.render(
+  <MyComponent />,
+  document.getElementById('example')
+);
+```
+
+## this.state
+
+React thinks of component as state machines, and uses `this.state` to hold component's state, `this.setState()` to update `this.state` and re-render the component.
+
+```js
+var LikeButton = React.createClass({
+  getInitialState: function() {
+    return {liked: false};
+  },
+  handleClick: function(event) {
+    this.setState({liked: !this.state.liked});
+  },
+  render: function() {
+    var text = this.state.liked ? 'like' : 'haven\'t liked';
+    return (
+      <p onClick={this.handleClick}>
+        You {text} this. Click to toggle.
+      </p>
+    );
+  }
+});
+
+React.render(
+  <LikeButton />,
+  document.getElementById('example')
+);
+```
+
+## Form
+
+The `value` property of Form components, such as <input>, <textarea>, and <option>, is unaffected by any user input. If you wanted to update the value in response to user input, you could use the onChange event.
+
+```js
+var Input = React.createClass({
+  getInitialState: function() {
+    return {value: 'Hello!'};
+  },
+  handleChange: function(event) {
+    this.setState({value: event.target.value});
+  },
+  render: function () {
+    var value = this.state.value;
+    return (
+      <div>
+        <input type="text" value={value} onChange={this.handleChange} />
+        <p>{value}</p>
+      </div>
+    );
+  }
+});
+
+React.render(<Input/>, document.body);
+```
+
+## Component Lifecycle
+
+Components have three main parts of their lifecycle: Mounting, Updating and Unmounting. React provides hooks into these lifecycle part. `will` methods are called right before something happens, and `did` methods which are called right after something happens.
+
+```js
+var Hello = React.createClass({
+  getInitialState: function () {
+    return {
+      opacity: 1.0
+    };
+  },
+
+  componentDidMount: function () {
+    this.timer = setInterval(function () {
+      var opacity = this.state.opacity;
+      opacity -= .05;
+      if (opacity < 0.1) {
+        opacity = 1.0;
+      }
+      this.setState({
+        opacity: opacity
+      });
+    }.bind(this), 100);
+  },
+
+  render: function () {
+    return (
+      <div style={{opacity: this.state.opacity}}>
+        Hello {this.props.name}
+      </div>
+    );
+  }
+});
+
+React.render(
+  <Hello name="world"/>,
+  document.body
+);
+```
+
+## Ajax
+
+Fetch data in componentDidMount. When the response arrives, store the data in state, triggering a render to update your UI.
+
+```js
+var UserGist = React.createClass({
+  getInitialState: function() {
+    return {
+      username: '',
+      lastGistUrl: ''
+    };
+  },
+
+  componentDidMount: function() {
+    $.get(this.props.source, function(result) {
+      var lastGist = result[0];
+      if (this.isMounted()) {
+        this.setState({
+          username: lastGist.owner.login,
+          lastGistUrl: lastGist.html_url
+        });
+      }
+    }.bind(this));
+  },
+
+  render: function() {
+    return (
+      <div>
+        {this.state.username}'s last gist is
+        <a href={this.state.lastGistUrl}>here</a>.
+      </div>
+    );
+  }
+});
+
+React.render(
+  <UserGist source="https://api.github.com/users/octocat/gists" />,
+  document.body
+);
+```
+
 ## Extras
 
 ### Precompiling JSX
@@ -155,7 +315,8 @@ Put the compiled JS files into HTML.
 
 ## Useful links
 
-- [React's Official site](http://facebook.github.io/react)
+- [React's official site](http://facebook.github.io/react)
+- [React's official examples](https://github.com/facebook/react/tree/master/examples)
 
 ## License
 

ajax/index.html

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script src="../build/react.js"></script>
+    <script src="../build/JSXTransformer.js"></script>
+    <script src="../build/jquery.min.js"></script>
+  </head>
+  <body>
+    <script type="text/jsx">
+var UserGist = React.createClass({
+  getInitialState: function() {
+    return {
+      username: '',
+      lastGistUrl: ''
+    };
+  },
+
+  componentDidMount: function() {
+    $.get(this.props.source, function(result) {
+      var lastGist = result[0];
+      if (this.isMounted()) {
+        this.setState({
+          username: lastGist.owner.login,
+          lastGistUrl: lastGist.html_url
+        });
+      }
+    }.bind(this));
+  },
+
+  render: function() {
+    return (
+      <div>
+        {this.state.username}'s last gist is
+         <a href={this.state.lastGistUrl}>here</a>.
+      </div>
+    );
+  }
+});
+
+React.render(
+  <UserGist source="https://api.github.com/users/octocat/gists" />,
+  document.body
+);
+    </script>
+  </body>
+</html>

demo7/index.html

@@ -26,10 +26,6 @@
           }.bind(this), 100);
         },
 
-        componentWillUnmount: function () {
-          clearInterval(this.timer);
-        },
-
         render: function () {
           return (
             <div style={{opacity: this.state.opacity}}>

this-ref/index.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script src="../build/react.js"></script>
+    <script src="../build/JSXTransformer.js"></script>
+  </head>
+  <body>
+    <div id="example"></div>
+    <script type="text/jsx">
+var MyComponent = React.createClass({
+  handleClick: function() {
+    React.findDOMNode(this.refs.myTextInput).focus();
+  },
+  render: function() {
+    return (
+      <div>
+        <input type="text" ref="myTextInput" />
+        <input type="button" value="Focus the text input" onClick={this.handleClick} />
+      </div>
+    );
+  }
+});
+
+React.render(
+  <MyComponent />,
+  document.getElementById('example')
+);
+    </script>
+  </body>
+</html>