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(

Hello, world!

, document.getElementById('example') ); ``` Attention, you have to use `
``` ## Useful links - [React's official site](http://facebook.github.io/react) - [React's official examples](https://github.com/facebook/react/tree/master/examples) - [React (Virtual) DOM Terminology](http://facebook.github.io/react/docs/glossary.html), by Sebastian Markbåge - [The React Quick Start Guide](http://www.jackcallister.com/2015/01/05/the-react-quick-start-guide.html), by Jack Callister - [Learning React.js: Getting Started and Concepts](https://scotch.io/tutorials/learning-react-getting-started-and-concepts), by Ken Wheeler - [Getting started with React](http://ryanclark.me/getting-started-with-react), by Ryan Clark - [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 BSD licensed