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>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.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-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(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
```
Attention, you have to use `<script type="text/babel">` to indicate JSX codes, and include `browser.min.js`, which is a [browser version](https://babeljs.io/docs/usage/browser/) of Babel and could be get inside a [babel-core@5](https://www.npmjs.com/package/babel-core) npm release, to actually perform the transformation in the browser.
Before v0.14, React use `JSTransform.js` to translate `<script type="text/jsx">`. It has been deprecated ([more info](https://facebook.github.io/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html)).
## Demo02: Use JavaScript in JSX
[demo](http://ruanyf.github.io/react-demos/demo02/) / [source](https://github.com/ruanyf/react-demos/blob/master/demo02/index.html)
You could also use JavaScript in JSX. It takes angle brackets (<) as the beginning of HTML syntax, and curly brackets (`{`) as the beginning of JavaScript syntax.
```js
var names = ['Alice', 'Emily', 'Kate'];
ReactDOM.render(
<div>
{
names.map(function (name) {
return <div>Hello, {name}!</div>
})
}
</div>,
document.getElementById('example')
);
```
## Demo03: Use array in JSX
[demo](http://ruanyf.github.io/react-demos/demo03/) / [source](https://github.com/ruanyf/react-demos/blob/master/demo03/index.html)
If a JavaScript variable is an array, JSX will implicitly concat all members of the array.
```js
var arr = [
<h1>Hello world!</h1>,
<h2>React is awesome</h2>,
];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById('example')
);
```
## Demo04: Define a component
[demo](http://ruanyf.github.io/react-demos/demo04/) / [source](https://github.com/ruanyf/react-demos/blob/master/demo04/index.html)
`React.createClass()` creates a component class, which implements a render method to return an component instance of the class. You don't need to call `new` on the class in order to get an instance, just use it as a normal HTML tag.
```javascript
var HelloMessage = React.createClass({
render: function() {
return <h1>Hello {this.props.name}</h1>;
}
});
ReactDOM.render(
<HelloMessage name="John" />,
document.getElementById('example')
);
```
Components would have attributes, and you can use `this.props.[attribute]` to access them, just like `this.props.name` of `<HelloMessage name="John" />` is John.
Please remember the first letter of the component's name must be capitalized, otherwise React will throw an error. For instance, `HelloMessage` as a component's name is OK, but `helloMessage` is not allowed. And a React component should only have one top child node.
```javascript
// wrong
var HelloMessage = React.createClass({
render: function() {
return <h1>
Hello {this.props.name}
</h1><p>
some text
</p>;
}
});
// correct
var HelloMessage = React.createClass({
render: function() {
return <div>
<h1>Hello {this.props.name}</h1>
<p>some text</p>
</div>;
}
});
```
## Demo05: this.props.children
[demo](http://ruanyf.github.io/react-demos/demo05/) / [source](https://github.com/ruanyf/react-demos/blob/master/demo05/index.html)
React uses `this.props.children` to access a component's children nodes.
```javascript
var NotesList = React.createClass({
render: function() {
return (
<ol>
{
React.Children.map(this.props.children, function (child) {
return <li>{child}</li>;
})
}
</ol>
);
}
});
ReactDOM.render(
<NotesList>
<span>hello</span>
<span>world</span>
</NotesList>,
document.getElementById('example')
);
```
Please be mindful that the value of `this.props.children` has three possibilities. If the component has no children node, the value is `undefined`; If single children node, an object; If multiple children nodes, an array. You should be careful to handle it.
React gave us an utility [`React.Children`](https://facebook.github.io/react/docs/top-level-api.html#react.children) for dealing with the `this.props.children`'s opaque data structure. You could use `React.Children.map` to iterate `this.props.children` without worring its data type being `undefined` or `object`. Check [official document](https://facebook.github.io/react/docs/top-level-api.html#react.children) for more methods `React.Children` offers.
## Demo06: PropTypes
[demo](http://ruanyf.github.io/react-demos/demo06/) / [source](https://github.com/ruanyf/react-demos/blob/master/demo06/index.html)
Components have many specific attributes which are called ”props” in React and can be of any type.
Sometimes you need a way to validate these props. You don't want users have the freedom to input anything into your components.
React has a solution for this and it's called PropTypes.
```javascript
var MyTitle = React.createClass({
propTypes: {
title: React.PropTypes.string.isRequired,
},
render: function() {
return <h1> {this.props.title} </h1>;
}
});
```
The above component of `MyTitle` has a props of `title`. PropTypes tells React that the title is required and its value should be a string.
Now we give `Title` a number value.
```javascript
var data = 123;
ReactDOM.render(
<MyTitle title={data} />,
document.getElementById('example')
);
```
It means the props doesn't pass the validation, and the console will show you an error message.
```bash
Warning: Failed propType: Invalid prop `title` of type `number` supplied to `MyTitle`, expected `string`.
```
Visit [official doc](http://facebook.github.io/react/docs/reusable-components.html) for more PropTypes options.
P.S. If you want to give the props a default value, use `getDefaultProps()`.
```javascript
var M
没有合适的资源?快使用搜索试试~ 我知道了~
资源推荐
资源详情
资源评论
收起资源包目录
react-demos-master.zip (33个子文件)
react-demos-master
demo10
index.html 1KB
demo11
index.html 1017B
demo08
index.html 756B
demo12
index.html 1KB
demo03
index.html 501B
demo05
index.html 795B
demo13
browser.js 510B
package.json 462B
server.js 1KB
src
browser.js 180B
server.js 1KB
app.js 755B
app.js 3KB
README.md 333B
demo01
index.html 398B
demo04
index.html 550B
demo09
index.html 856B
.gitignore 22B
demo02
index.html 578B
README.md 19KB
demo06
index.html 649B
demo07
index.html 686B
build
react-dom.js 1KB
jquery.min.js 94KB
react.js 641KB
react-dom-0.14.0.js 1KB
react-with-addons.js 644KB
browser.min.js 1.27MB
react-0.13.4.min.js 118KB
react-with-addons.min.js 128KB
JSXTransformer.js 482KB
react-0.14.0.js 625KB
react-0.13.4.js 584KB
共 33 条
- 1
资源评论
周楷雯
- 粉丝: 78
- 资源: 1万+
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功