feat: add gh-pages

README.md

@@ -6,6 +6,7 @@ These demos are purposely written in a simple and clear style. You will find no
 
 - [Flux Demo](https://github.com/ruanyf/extremely-simple-flux-demo)
 - [Webpack Demos](https://github.com/ruanyf/webpack-demos)
+- [React Testing Demo](https://github.com/ruanyf/react-testing-demo)
 - [A boilerplate for React-Babel-Webpack project](https://github.com/ruanyf/react-babel-webpack-boilerplate)
 
 ## How to use
@@ -41,23 +42,25 @@ Then play with the source files under the repo's demo* directories.
 
 ## Index
 
-1. [Render JSX](#demo01-render-jsx-source)
-1. [Use JavaScript in JSX](#demo02-use-javascript-in-jsx-source)
-1. [Use array in JSX](#demo03-use-array-in-jsx-source)
-1. [Define a component](#demo04-define-a-component-source)
-1. [this.props.children](#demo05-thispropschildren-source)
-1. [PropTypes](#demo06-proptypes-source)
-1. [Finding a DOM node](#demo07-finding-a-dom-node-source)
-1. [this.state](#demo08-thisstate-source)
-1. [Form](#demo09-form-source)
-1. [Component Lifecycle](#demo10-component-lifecycle-source)
-1. [Ajax](#demo11-ajax-source)
-1. [Display value from a Promise](#demo12-display-value-from-a-promise-source)
-1. [Server-side rendering](#demo13-server-side-rendering-source)
+1. [Render JSX](#demo01-render-jsx)
+1. [Use JavaScript in JSX](#demo02-use-javascript-in-jsx)
+1. [Use array in JSX](#demo03-use-array-in-jsx)
+1. [Define a component](#demo04-define-a-component)
+1. [this.props.children](#demo05-thispropschildren)
+1. [PropTypes](#demo06-proptypes)
+1. [Finding a DOM node](#demo07-finding-a-dom-node)
+1. [this.state](#demo08-thisstate)
+1. [Form](#demo09-form)
+1. [Component Lifecycle](#demo10-component-lifecycle)
+1. [Ajax](#demo11-ajax)
+1. [Display value from a Promise](#demo12-display-value-from-a-promise)
+1. [Server-side rendering](#demo13-server-side-rendering)
 
 ---
 
-## Demo01: Render JSX ([source](https://github.com/ruanyf/react-demos/blob/master/demo01/index.html))
+## Demo01: Render JSX
+
+[demo](http:https://ruanyf.github.io/react-demos/demo01/) / [source](https://github.com/ruanyf/react-demos/blob/master/demo01/index.html)
 
 The template syntax in React is called [JSX](http:https://facebook.github.io/react/docs/displaying-data.html#jsx-syntax). It is allowed in JSX to put HTML tags directly into JavaScript codes. `ReactDOM.render()` is the method which translates JSX into HTML, and renders it into the specified DOM node.
 
@@ -72,7 +75,9 @@ Attention, you have to use `<script type="text/babel">` to indicate JSX codes, a
 
 Before v0.14, React use `JSTransform.js` to translate `<script type="text/jsx">`. It has been deprecated ([more info](https://facebook.github.io/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html)).
 
-## Demo02: Use JavaScript in JSX ([source](https://github.com/ruanyf/react-demos/blob/master/demo02/index.html))
+## Demo02: Use JavaScript in JSX
+
+[demo](http:https://ruanyf.github.io/react-demos/demo02/) / [source](https://github.com/ruanyf/react-demos/blob/master/demo02/index.html)
 
 You could also use JavaScript in JSX. It takes angle brackets (&lt;) as the beginning of HTML syntax, and curly brackets ({) as the beginning of JavaScript syntax.
 
@@ -91,7 +96,9 @@ ReactDOM.render(
 );
 ```
 
-## Demo03: Use array in JSX ([source](https://github.com/ruanyf/react-demos/blob/master/demo03/index.html))
+## Demo03: Use array in JSX
+
+[demo](http:https://ruanyf.github.io/react-demos/demo03/) / [source](https://github.com/ruanyf/react-demos/blob/master/demo03/index.html)
 
 If a JavaScript variable is array, JSX will implicitly concat all members of the array.
 
@@ -106,7 +113,9 @@ ReactDOM.render(
 );
 ```
 
-## Demo04: Define a component ([source](https://github.com/ruanyf/react-demos/blob/master/demo04/index.html))
+## Demo04: Define a component
+
+[demo](http:https://ruanyf.github.io/react-demos/demo04/) / [source](https://github.com/ruanyf/react-demos/blob/master/demo04/index.html)
 
 `React.createClass()` creates a component class, which implements a render method to return an component instance of the class. You don't need to call `new` on the class in order to get an instance, just use it as a normal HTML tag.
 
@@ -150,7 +159,9 @@ var HelloMessage = React.createClass({
 });
 ```
 
-## Demo05: this.props.children ([source](https://github.com/ruanyf/react-demos/blob/master/demo05/index.html))
+## Demo05: this.props.children
+
+[demo](http:https://ruanyf.github.io/react-demos/demo05/) / [source](https://github.com/ruanyf/react-demos/blob/master/demo05/index.html)
 
 React uses `this.props.children` to access a component's children nodes.
 
@@ -182,7 +193,9 @@ Please be minded that the value of `this.props.children` has three possibilities
 
 React gave us an utility [`React.Children`](https://facebook.github.io/react/docs/top-level-api.html#react.children) for dealing with the `this.props.children`'s opaque data structure. You could use `React.Children.map` to iterate `this.props.children` without worring its data type being `undefined` or `object`. Check [official document](https://facebook.github.io/react/docs/top-level-api.html#react.children) for more methods `React.Children` offers.
 
-## Demo06: PropTypes ([source](https://github.com/ruanyf/react-demos/blob/master/demo06/index.html))
+## Demo06: PropTypes
+
+[demo](http:https://ruanyf.github.io/react-demos/demo06/) / [source](https://github.com/ruanyf/react-demos/blob/master/demo06/index.html)
 
 Components have many specific attributes which are called ”props” in React and can be of any type.
 
@@ -244,7 +257,9 @@ ReactDOM.render(
 );
 ```
 
-## Demo07: Finding a DOM node ([source](https://github.com/ruanyf/react-demos/blob/master/demo07/index.html))
+## Demo07: Finding a DOM node
+
+[demo](http:https://ruanyf.github.io/react-demos/demo07/) / [source](https://github.com/ruanyf/react-demos/blob/master/demo07/index.html)
 
 Sometimes you need to reference a DOM node in a component. React gives you the `ref` attribute to find it.
 
@@ -271,7 +286,9 @@ ReactDOM.render(
 
 The desired DOM node should have a `ref` attribute, and `this.refs.[refName]` would return the corresponding DOM node. Please be minded that you could do that only after this component has been mounted into the DOM, otherwise you get `null`.
 
-## Demo08: this.state ([source](https://github.com/ruanyf/react-demos/blob/master/demo08/index.html))
+## Demo08: this.state
+
+[demo](http:https://ruanyf.github.io/react-demos/demo08/) / [source](https://github.com/ruanyf/react-demos/blob/master/demo08/index.html)
 
 React thinks of component as state machines, and uses `this.state` to hold component's state, `getInitialState()` to initialize `this.state`(invoked before a component is mounted), `this.setState()` to update `this.state` and re-render the component.
 
@@ -301,7 +318,9 @@ ReactDOM.render(
 
 You could use component attributes to register event handlers, just like `onClick`, `onKeyDown`, `onCopy`, etc. Official Document has all [supported events](http:https://facebook.github.io/react/docs/events.html#supported-events).
 
-## Demo09: Form ([source](https://github.com/ruanyf/react-demos/blob/master/demo09/index.html))
+## Demo09: Form
+
+[demo](http:https://ruanyf.github.io/react-demos/demo09/) / [source](https://github.com/ruanyf/react-demos/blob/master/demo09/index.html)
 
 According to React's design philosophy, `this.state` describes the state of component and is mutated via user interactions, and `this.props` describes the properties of component and is stable and immutable.
 
@@ -331,7 +350,9 @@ ReactDOM.render(<Input/>, document.body);
 
 More information on [official document](http:https://facebook.github.io/react/docs/forms.html).
 
-## Demo10: Component Lifecycle ([source](https://github.com/ruanyf/react-demos/blob/master/demo10/index.html))
+## Demo10: Component Lifecycle
+
+[demo](http:https://ruanyf.github.io/react-demos/demo10/) / [source](https://github.com/ruanyf/react-demos/blob/master/demo10/index.html)
 
 Components have three main parts of [their lifecycle](https://facebook.github.io/react/docs/working-with-the-browser.html#component-lifecycle): Mounting(being inserted into the DOM), Updating(being re-rendered) and Unmounting(being removed from the DOM). 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.
 
@@ -381,7 +402,9 @@ The following is [a whole list of lifecycle methods](http:https://facebook.github.io/r
 - **componentWillReceiveProps(object nextProps)**: Fired when a component is receiving new props. You might want to `this.setState` depending on the props.
 - **shouldComponentUpdate(object nextProps, object nextState)**: Fired before rendering when new props or state are received. `return false` if you know an update isn't needed.
 
-## Demo11: Ajax ([source](https://github.com/ruanyf/react-demos/blob/master/demo11/index.html))
+## Demo11: Ajax
+
+[demo](http:https://ruanyf.github.io/react-demos/demo11/) / [source](https://github.com/ruanyf/react-demos/blob/master/demo11/index.html)
 
 How to get the data of a component from a server or an API provider? The answer is using Ajax to fetch data in the event handler of `componentDidMount`. When the server response arrives, store the data with `this.setState()` to trigger a re-render of your UI.
 
@@ -422,7 +445,9 @@ ReactDOM.render(
 );
 ```
 
-## Demo12: Display value from a Promise ([source](https://github.com/ruanyf/react-demos/tree/master/demo12/index.html))
+## Demo12: Display value from a Promise
+
+[demo](http:https://ruanyf.github.io/react-demos/demo12/) / [source](https://github.com/ruanyf/react-demos/blob/master/demo12/index.html)
 
 This demo is inspired by Nat Pryce's article ["Higher Order React Components"](http://natpryce.com/articles/000814.html).
 
@@ -480,7 +505,9 @@ var RepoList = React.createClass({
 });
 ```
 
-## Demo13: Server-side rendering ([source](https://github.com/ruanyf/react-demos/tree/master/demo13/src))
+## Demo13: Server-side rendering
+
+[source](https://github.com/ruanyf/react-demos/tree/master/demo13/src)
 
 This demo is copied from [github.com/mhart/react-server-example](https://github.com/mhart/react-server-example), but I rewrote it with JSX syntax.