ruanyf/react-demos
This is an external open-source GitHub repository imported into the WOCSOL Marketplace for discovery. The original repository owner is the primary creator.
Repository Details
Repository Description
a collection of simple demos of React.js
a collection of simple demos of React.js
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 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <script src="../build/react.development.js"></script> <script src="../build/react-dom.development.js"></script> <script src="../build/babel.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> // ** Our code goes here! ** </script> </body> </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-
Related Repositories
Product Discussion
Ask questions or discuss this product. New comments are reviewed before publishing.
Loading comments...