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