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]( - [Webpack Demos]( - [React Router Tutorial]( - [CSS Modules Demos]( - [React Testing Demo]( - [A boilerplate for React-Babel-Webpack project]( ## How to use First copy the repo into your disk. ```bash $ git clone ``` 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]( / [source]( The template syntax in React is called [JSX]( 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(

Hello, world!

, document.getElementById('example') ); ``` Attention, you have to use `
``` ## Useful links - [React's official site]( - [React's official examples]( - [React (Virtual) DOM Terminology](, by Sebastian Markbåge - [The React Quick Start Guide](, by Jack Callister - [Learning React.js: Getting Started and Concepts](, by Ken Wheeler - [Getting started with React](, by Ryan Clark - [React JS Tutorial and Guide to the Gotchas](, by Justin Deal - [React Primer](, by Binary Muse - [jQuery versus React.js thinking](, by zigomir ## License BSD licensed