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
ReactJs包与教程
需积分: 22 73 浏览量
2018-08-24
13:26:18
上传
评论 3
收藏 20.66MB ZIP 举报
React.zip （34个子文件） 
React react-demos 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
react中文入门教程.pdf 20.59MB资源评论
