参考文献：
React主要的优点就是增量更新（虚拟DOM）和组件化（状态机）。
<!DOCTYPE html>
<html>
<head>
<script src="react.js"></script>
<script src="react-dom.js"></script>
<script src="browser.min.js"></script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> </head>
<body>
1<div id="example1"></div><br><br>
2<div id="example2"></div><br><br>
3<div id="example3"></div><br><br>
4<div id="example4"></div><br><br>
5<div id="example5"></div><br><br>
6<div id="example6"></div><br><br>
7<div id="example7"></div><br><br>
8<div id="example8"></div><br><br>
9<div id="example9"></div><br><br>
10<div id="example10"></div><br><br>
<script type="text/babel">
//ReactDOM.render()
var names=['LiMing','Zhangsam','Xiaoming'];
var addr=[<p>Beijing</p>,<p>Tianjin</p>];
ReactDOM.render(
<div>
{addr},
{
names.map
(
function(name)
{
return <div>hell0,{name}</div>
}
)
}
</div>,
document.getElementById('example1')); //组件,组件并不是真实的 DOM 节点，而是存在于内存之中的一种数据结构，叫做虚拟 DOM
var HelloMessage1=React.createClass
({
render:function()
{
return (<h5>hello,{this.props.nameStr},{this.props.size}</h5>)
}
});
ReactDOM.render(
<HelloMessage1 nameStr='John' size='12'/>,document.getElementById("example2")
); var HelloMessage2=React.createClass
({
render:function()
{
return (
<ol>
{
React.Children.map(this.props.children, function (child) {
return <li>{child}</li>
})
}
</ol>
);
}
});
ReactDOM.render(
<HelloMessage2>
<span>one</span>
<span>two</span>
<span>three</span>
</HelloMessage2>
,document.getElementById("example3")
); //PropTypes验证参数
var MyTitle = React.createClass({
propTypes: {
title: React.PropTypes.string.isRequired,//PropTypes验证组件参数
},
getDefaultProps : function () {//getDefaultProps设置组件默认值
return {
msg : 'Hello World'
};
},
render: function() {
return <h1> {this.props.title}，{this.props.msg} </h1>;
}
});
var data = 123;
ReactDOM.render(
<MyTitle title={data} />,
document.getElementById("example4")
);//you can see message in console: Warning: Failed propType: Invalid prop `title` of type `number` supplied to `MyTitle`, expected `string`. //获得真实的DOM节点,ref属性
var MyComponent = React.createClass({
handleClick: function() {
this.refs.myTextInput.focus();
},
render: function() {
return (
<div>
<input type="text" ref="myTextInput" />
<input type="button" value="Focus the text input" onClick={this.handleClick} />
</div>
);
}
}); ReactDOM.render(
<MyComponent />,
document.getElementById('example5')
); //this.state,React的一大创新，就是将组件看成是一个状态机，一开始有一个初始状态，然后用户互动，导致状态变化
var LikeButton = React.createClass({
getInitialState: function() {
return {liked: false};
},
handleClick: function(event) {
this.setState({liked: !this.state.liked});
},
render: function() {
var text = this.state.liked ? 'like' : 'haven\'t liked';
return (
<p onClick={this.handleClick}>
You {text} this. Click to toggle.
</p>
);
}
}); ReactDOM.render(
<LikeButton />,
document.getElementById('example6')
); //this.props 和 this.state 都用于描述组件的特性,this.props 表示那些一旦定义，就不再改变的特性，而 this.state 是会随着用户互动而产生变化的特性
//表单
var Input = React.createClass({
getInitialState: function() {
return {value: 'Hello!'};
},
handleChange: function(event) {
this.setState({value: event.target.value});
},
render: function () {
var value = this.state.value;
return (
<div>
<input type="text" value={value} onChange={this.handleChange} />
<p>{value}</p>
</div>
);
}
});
ReactDOM.render(<Input/>, document.getElementById('example7')); //组件的生命周期
var Hello = React.createClass({
getInitialState: function () {
return {
opacity: 1.0
};
}, componentDidMount: function () {
this.timer = setInterval(function () {
var opacity = this.state.opacity;
opacity -= .05;
if (opacity < 0.1) {
opacity = 1.0;
}
this.setState({
opacity: opacity
});
}.bind(this), 200);
}, render: function () {
return (
<div style={{opacity: this.state.opacity}}>
Hello {this.props.name}
</div>
);//React 组件样式是一个对象，所以style里第一重大括号表示这是 JavaScript 语法，第二重大括号表示样式对象。// }
}); ReactDOM.render(
<Hello name="world"/>,
document.getElementById('example8')
); //Ajax (1)
var UserGist = React.createClass({
getInitialState: function() {
return {
username: '',
lastGistUrl: ''
};
}, componentDidMount: function() {
$.get(this.props.source, function(result) {
var lastGist = result[0];
if (this.isMounted()) {
this.setState({
username: lastGist.owner.login,
lastGistUrl: lastGist.html_url
});
}
}.bind(this));
}, render: function() {
return (
<div>
{this.state.username}'s last gist is
<a href={this.state.lastGistUrl}> {this.state.lastGistUrl}</a>.
</div>
);
}
});
ReactDOM.render(
<UserGist source="https://api.github.com/users/ruanyf/gists" />,
document.getElementById('example9')
) //Ajax (2) Promise
var RepoList = React.createClass({
getInitialState: function() {
return { loading: true, error: null, data: null};
}, componentDidMount() {
this.props.promise.then(
value => this.setState({loading: false, data: value}),
error => this.setState({loading: false, error: error}));
}, render: function() {
if (this.state.loading) {
return <span>Loading...</span>;
}
else if (this.state.error !== null) {
return <span>Error: {this.state.error.message}</span>;
}
else {
var repos = this.state.data.items;
var repoList = repos.map(function (repo) {
return (
<li>
<a href={repo.html_url}>{repo.name}</a> ({repo.stargazers_count} stars) <br/> {repo.description}
</li>
);
});
return (
<main>
<h1>Most Popular JavaScript Projects in Github</h1>
<ol>{repoList}</ol>
</main>
);
}
}
});
ReactDOM.render(
<RepoList
promise={$.getJSON('https://api.github.com/search/repositories?q=javascript&sort=stars')}
/>,
document.getElementById('example10')
);
</script>
</body>
</html>