add new demos

README.md

@@ -30,7 +30,7 @@ Play with the source files under the repo's demo* directories.
 </html>
 ```
 
-## Render JSX
+## Demo1: Render JSX
 
 React.render() translates JSX into HTML.
 
@@ -41,7 +41,7 @@ React.render(
 );
 ```
 
-## Use JavaScript in JSX
+## Demo2: Use JavaScript in JSX
 
 JSX takes angle brackets (beginning with &lt; ) as HTML section, curly brackets (beginning with { ) as JavaScript section.
 
@@ -60,7 +60,7 @@ React.render(
 );
 ```
 
-## Use array in JSX
+## Demo3: Use array in JSX
 
 JSX implicitly concats all members of an array into HTML.
 
@@ -75,7 +75,7 @@ React.render(
 );
 ```
 
-## Define a component
+## Demo4: Define a component
 
 React.createClass() defines a component which you could use in your pages.
 
@@ -92,7 +92,7 @@ React.render(
 );
 ```
 
-## this.props.children
+## Demo5: this.props.children
 
 React uses `this.props.children` to access a component's children.
 
@@ -120,7 +120,7 @@ React.render(
 );
 ```
 
-## Finding a DOM node
+## Demo6: Finding a DOM node
 
 React uses React.findDOMNode() to find a DOM node.
 
@@ -145,7 +145,7 @@ React.render(
 );
 ```
 
-## this.state
+## Demo7: 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.
 
@@ -173,9 +173,9 @@ React.render(
 );
 ```
 
-## Form
+## Demo8: 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.
+The `value` property of Form components, such as &lt;input$gt;, &lt;textarea$gt;, and &lt;option$gt;, 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({
@@ -199,7 +199,7 @@ var Input = React.createClass({
 React.render(<Input/>, document.body);
 ```
 
-## Component Lifecycle
+## Demo9: 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.
 
@@ -239,7 +239,7 @@ React.render(
 );
 ```
 
-## Ajax
+## Demo10: Ajax
 
 Fetch data in componentDidMount. When the response arrives, store the data in state, triggering a render to update your UI.
 
@@ -284,13 +284,15 @@ React.render(
 
 ### Precompiling JSX
 
-Install the command-line tools.
+All above demos don't use JSX compilation for clarity. In production environment, ensure to precompile JSX files before putting them online.
+
+First, install the command-line tools.
 
 ```bash
 $ npm install -g react-tools
 ```
 
-Precompile your JSX files(.jsx) into JavaScript(.js).
+Then precompile your JSX files(.jsx) into JavaScript(.js).
 
 ```bash
 $ jsx -x src/ build/
@@ -317,6 +319,9 @@ Put the compiled JS files into HTML.
 
 - [React's official site](http://facebook.github.io/react)
 - [React's official examples](https://github.com/facebook/react/tree/master/examples)
+- [React JS Tutorial and Guide to the Gotchas](https://zapier.com/engineering/react-js-tutorial-guide-gotchas/), by Justin Deal
+- [React Primer](https://github.com/BinaryMuse/react-primer), by Binary Muse
+- [jQuery versus React.js thinking](http://blog.zigomir.com/react.js/jquery/2015/01/11/jquery-versus-react-thinking.html), by zigomir
 
 ## License
 

demo11/README.md

@@ -0,0 +1,5 @@
+// copied from https://github.com/mhart/react-server-example
+
+$ npm install
+$ jsx src/ .
+$ node server.js

demo11/app.js

@@ -0,0 +1,38 @@
+var React = require('react');
+
+module.exports = React.createClass({displayName: "exports",
+
+  getInitialState: function() {
+    return {
+      items: this.props.items,
+      disabled: true
+    }
+  },
+
+  componentDidMount: function() {
+    this.setState({
+      disabled: false
+    })
+  },
+
+  handleClick: function() {
+    this.setState({
+      items: this.state.items.concat('Item ' + this.state.items.length)
+    })
+  },
+
+  render: function() {
+    return (
+      React.createElement("div", null, 
+        React.createElement("button", {onClick: this.handleClick, disabled: this.state.disabled}, "Add Item"), 
+        React.createElement("ul", null, 
+
+          this.state.items.map(function(item) {
+            return React.createElement("li", null, item)
+          })
+
+        )
+      )
+    )
+  },
+});

demo11/browser.js

@@ -0,0 +1,4 @@
+var React = require('react');
+var App = require('./app');
+
+React.render(React.createElement(App, {items: window.APP_PROPS.items}), document.getElementById('content'));

demo11/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "react-server",
+  "version": "1.0.0",
+  "description": "an example of react.js in server",
+  "main": "server.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "ruanyf",
+  "license": "ISC",
+  "dependencies": {
+    "browserify": "~9.0.3",
+    "literalify": "~0.4.0",
+    "react": "~0.13.1"
+  },
+  "devDependencies": {
+    "react-tools": "~0.13.1"
+  }
+}

demo11/server.js

@@ -0,0 +1,48 @@
+var http = require('http'),
+    browserify = require('browserify'),
+    literalify = require('literalify'),
+    React = require('react');
+
+var App = require('./app');
+
+http.createServer(function(req, res) {
+  if (req.url == '/') {
+    res.setHeader('Content-Type', 'text/html');
+    var props = {
+      items: [
+        'Item 0',
+        'Item 1'
+      ]
+    };
+    var html = React.renderToStaticMarkup(
+      React.createElement("body", null, 
+        React.createElement("div", {id: "content", dangerouslySetInnerHTML: {__html:
+          React.renderToString(React.createElement(App, {items: props.items}))
+        }}), ",", 
+
+        React.createElement("script", {dangerouslySetInnerHTML: {__html:
+        'var APP_PROPS = ' + JSON.stringify(props) + ';'
+        }}), 
+        React.createElement("script", {src: "//fb.me/react-0.13.1.min.js"}), 
+        React.createElement("script", {src: "/bundle.js"})
+      )
+    );
+    res.end(html);
+
+  } else if (req.url == '/bundle.js') {
+    res.setHeader('Content-Type', 'text/javascript');
+    browserify()
+      .add('./browser.js')
+      .transform(literalify.configure({react: 'window.React'}))
+      .bundle()
+      .pipe(res);
+
+  } else {
+    res.statusCode = 404;
+    res.end();
+  }
+}).listen(3000, function(err) {
+  if (err) throw err;
+  console.log('Listening on 3000...');
+})
+

demo11/src/app.js

@@ -0,0 +1,38 @@
+var React = require('react');
+
+module.exports = React.createClass({
+
+  getInitialState: function() {
+    return {
+      items: this.props.items,
+      disabled: true
+    }
+  },
+
+  componentDidMount: function() {
+    this.setState({
+      disabled: false
+    })
+  },
+
+  handleClick: function() {
+    this.setState({
+      items: this.state.items.concat('Item ' + this.state.items.length)
+    })
+  },
+
+  render: function() {
+    return (
+      <div>
+        <button onClick={this.handleClick} disabled={this.state.disabled}>Add Item</button>
+        <ul>
+        {
+          this.state.items.map(function(item) {
+            return <li>{item}</li>
+          })
+        }
+        </ul>
+      </div>
+    )
+  },
+});

demo11/src/browser.js

@@ -0,0 +1,4 @@
+var React = require('react');
+var App = require('./app');
+
+React.render(<App items={window.APP_PROPS.items} />, document.getElementById('content'));

demo11/src/server.js

@@ -0,0 +1,48 @@
+var http = require('http'),
+    browserify = require('browserify'),
+    literalify = require('literalify'),
+    React = require('react');
+
+var App = require('./app');
+
+http.createServer(function(req, res) {
+  if (req.url == '/') {
+    res.setHeader('Content-Type', 'text/html');
+    var props = {
+      items: [
+        'Item 0',
+        'Item 1'
+      ]
+    };
+    var html = React.renderToStaticMarkup(
+      <body>
+        <div id="content" dangerouslySetInnerHTML={{__html:
+          React.renderToString(<App items={props.items}/>)
+        }} />,
+
+        <script dangerouslySetInnerHTML={{__html:
+        'var APP_PROPS = ' + JSON.stringify(props) + ';'
+        }}/>
+        <script src="//fb.me/react-0.13.1.min.js"/>
+        <script src="/bundle.js"/>
+      </body>
+    );
+    res.end(html);
+
+  } else if (req.url == '/bundle.js') {
+    res.setHeader('Content-Type', 'text/javascript');
+    browserify()
+      .add('./browser.js')
+      .transform(literalify.configure({react: 'window.React'}))
+      .bundle()
+      .pipe(res);
+
+  } else {
+    res.statusCode = 404;
+    res.end();
+  }
+}).listen(3000, function(err) {
+  if (err) throw err;
+  console.log('Listening on 3000...');
+})
+

demo4/index.html

@@ -5,29 +5,18 @@
     <script src="../build/JSXTransformer.js"></script>
   </head>
   <body>
+    <div id="example"></div>
     <script type="text/jsx">
-      var NotesList = React.createClass({
+      var HelloMessage = React.createClass({
         render: function() {
-          return (
-            <ol>
-              {
-                this.props.children.map(function (child) {
-                  return <li>{child}</li>
-                })
-              }
-            </ol>
-          );
+          return <h1>Hello {this.props.name}</h1>;
         }
       });
 
       React.render(
-        <NotesList>
-          <span>hello</span>
-          <span>world</span>
-        </NotesList>,
-        document.body
+        <HelloMessage name="John" />,
+        document.getElementById('example')
       );
     </script>
   </body>
 </html>
-