Reative Native是著名设社交网络公司Facebook旗下的一款旨在实现虚拟Virtual交互到Native交互层高效交互的View层框架，通过虚拟DOM UI来转为Native UI，通过JSX实现Javascript,IOS,Android原生开发语言的交互，充当一种桥梁(Bridge)的角色，类似一种交叉编译。
虽然不能跨平台应用，但能在各平台上实现各自的代码，但统一的风格，高效的开发受到众多跨平台。
学习网站：
示例代码
先来看看最简单的代码
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<!------------start:开发中必须使用的3个js库--------------->
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
<!------------end:开发中必须使用的3个js库--------------->
</head>
<body>
<div id="example"></div>
<!--使用特定的script type-->
<script type="text/babel">
//首先定义一个UI组建类
var Hello = React.createClass({
render: function() {
//css样式使用驼峰写法,如className
return <div className="commentBox">Hello {this.props.name}{this.props.myAge}</div>;
}
});
<!--渲染虚拟节点，并且将虚拟节点添加到指定div，注意，这里没有标准属性，一切属性属于自定义-->
ReactDOM.render(
<Hello name="World" myAge="20" />,
document.getElementById('container')
);
</script>
</body>
</html>当然，我们也可以使得代码和UI分离
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
<script src="../build/jquery.min.js"></script>
<!--load appjsx到页面，注意，默认情况下不会load，除非改html放到服务器下-->
<script type="text/babel" src=js/app.js>
</script>
</head>
<body>
<div id="example">
</div>
</body>
</html>app.js---注意，旧版本是app.jsx
class RepoList extends React.Component{
// <!--启用构造函数，传入参数-->
constructor(props) {
super(props);
this.state= {
loading: true,
error: null,
data: null
}
}
// <!--当jsx渲染完成后执行-->
componentDidMount()
{
this.props.promise.then(
value => this.setState({loading: false, data: value}),
error => this.setState({loading: false, error: error}));
}
// <!--当jsx渲染完成后执行-->
render() {
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>
);
}
}
}
//获取js输入，并赋值给promise,注意数据结构是 promise={{....}}
ReactDOM.render(
<RepoList promise={$.getJSON('https://api.github.com/search/repositories?q=javascript&sort=stars')} />,
document.body
);
