This is a collection of simple demos of React.js. These demos are purposely written in a simple and clear style. You will find no difficulty in following them to learn the powerful library. ## Related Projects - [Flux Demo](https://github.com/ruanyf/extremely-simple-flux-demo) - [Webpack Demos](https://github.com/ruanyf/webpack-demos) - [React Router Tutorial](https://github.com/reactjs/react-router-tutorial) - [CSS Modules Demos](https://github.com/ruanyf/css-modules-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 First copy the repo into your disk. ```bash $ git clone git@github.com:ruanyf/react-demos.git ``` Then play with the source files under the repo's demo* directories. ## HTML Template ```html
``` ## Index 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 [demo](http://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://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. ```js ReactDOM.render(