├── .gitignore
├── README.md
├── build
├── babel.min.js
├── jquery.min.js
├── prop-types.js
├── react-dom.development.js
├── react.development.js
└── react.js
├── demo01
└── index.html
├── demo02
└── index.html
├── demo03
└── index.html
├── demo04
└── index.html
├── demo05
└── index.html
├── demo06
└── index.html
├── demo07
└── index.html
├── demo08
└── index.html
├── demo09
└── index.html
├── demo10
└── index.html
├── demo11
└── index.html
├── demo12
└── index.html
└── demo13
├── .babelrc
├── README.md
├── app.js
├── browser.js
├── package-lock.json
├── package.json
├── server.js
└── src
├── app.js
├── browser.js
└── server.js
/.gitignore:
--------------------------------------------------------------------------------
1 | example/
2 | node_modules
3 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | This is a collection of simple demos of React.js.
2 |
3 | These demos are purposely written in a simple and clear style. You will find no difficulty in following them to learn the powerful library.
4 |
5 | ## Related Projects
6 |
7 | - [Flux Demo](https://github.com/ruanyf/extremely-simple-flux-demo)
8 | - [Webpack Demos](https://github.com/ruanyf/webpack-demos)
9 | - [React Router Tutorial](https://github.com/reactjs/react-router-tutorial)
10 | - [CSS Modules Demos](https://github.com/ruanyf/css-modules-demos)
11 | - [React Testing Demo](https://github.com/ruanyf/react-testing-demo)
12 | - [A boilerplate for React-Babel-Webpack project](https://github.com/ruanyf/react-babel-webpack-boilerplate)
13 |
14 | ## How to use
15 |
16 | First, copy the repo into your disk.
17 |
18 | ```bash
19 | $ git clone git@github.com:ruanyf/react-demos.git
20 | ```
21 |
22 | Then play with the source files under the repo's demo* directories.
23 |
24 | ## HTML Template
25 |
26 | ```html
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
42 |
43 |
44 | ```
45 |
46 | ## Index
47 |
48 | 1. [Render JSX](#demo01-render-jsx)
49 | 1. [Use JavaScript in JSX](#demo02-use-javascript-in-jsx)
50 | 1. [Use array in JSX](#demo03-use-array-in-jsx)
51 | 1. [Define a component](#demo04-define-a-component)
52 | 1. [this.props.children](#demo05-thispropschildren)
53 | 1. [PropTypes](#demo06-proptypes)
54 | 1. [Finding a DOM node](#demo07-finding-a-dom-node)
55 | 1. [this.state](#demo08-thisstate)
56 | 1. [Form](#demo09-form)
57 | 1. [Component Lifecycle](#demo10-component-lifecycle)
58 | 1. [Ajax](#demo11-ajax)
59 | 1. [Display value from a Promise](#demo12-display-value-from-a-promise)
60 | 1. [Server-side rendering](#demo13-server-side-rendering)
61 |
62 | ---
63 |
64 | ## Demo01: Render JSX
65 |
66 | [demo](http://ruanyf.github.io/react-demos/demo01/) / [source](https://github.com/ruanyf/react-demos/blob/master/demo01/index.html)
67 |
68 | The template syntax in React is called [JSX](http://facebook.github.io/react/docs/displaying-data.html#jsx-syntax). JSX allows you to use HTML tags in JavaScript code. `ReactDOM.render()` is the method which translates JSX into HTML and renders it into the specified DOM node.
69 |
70 | ```js
71 | ReactDOM.render(
72 | Hello, world!
,
73 | document.getElementById('example')
74 | );
75 | ```
76 |
77 | To actually perform the transformation in the browser, you must use `
570 |
571 |
572 |
573 |
574 |
575 |
576 |
577 |